.direction-review-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-muted);
    transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.direction-review-toggle svg { width: 22px; height: 22px; }
.direction-review-toggle span {
    position: absolute;
    right: -2px;
    top: -2px;
    min-width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    font-size: 0.58rem;
    line-height: 1;
}
.direction-review-toggle.is-settled { color: var(--accent-moss); }
.direction-review-toggle.is-soon { color: var(--accent-primary); }
.direction-review-toggle.is-due {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--accent-primary) 17%, transparent);
}
.direction-review-toggle.is-due span,
.direction-review-toggle.is-loading span { display: none; }
.direction-review-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-primary) 50%, transparent); outline-offset: 2px; }

.direction-review-surface {
    position: absolute;
    inset: 0;
    z-index: 18;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--accent-moss) 7%, transparent), transparent 34%),
        linear-gradient(165deg, color-mix(in srgb, var(--surface-canvas) 97%, var(--accent-moss)), var(--surface-canvas));
    transition: opacity 0.22s ease, filter 0.22s ease;
}
.direction-review-surface.is-leaving { opacity: 0; filter: blur(3px); }
.direction-review-transition {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    text-align: center;
    opacity: 0;
    animation: directionReviewReveal 0.65s ease forwards;
}
.direction-review-transition-icon { width: 58px; height: 58px; color: var(--accent-primary); opacity: 0.8; }
.direction-review-transition-title { font-family: var(--font-serif); font-size: clamp(1.35rem, 3vw, 2rem); color: var(--text-primary); }
.direction-review-transition-copy { max-width: 430px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; }
.direction-review-dots,
.direction-review-thinking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 20px;
}
.direction-review-dots i,
.direction-review-thinking i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-moss) 72%, var(--text-muted));
    animation: directionReviewDot 1.15s ease-in-out infinite;
}
.direction-review-dots i:nth-child(2), .direction-review-thinking i:nth-child(2) { animation-delay: 0.15s; }
.direction-review-dots i:nth-child(3), .direction-review-thinking i:nth-child(3) { animation-delay: 0.3s; }
.direction-review-session { height: 100%; display: flex; flex-direction: column; animation: directionReviewReveal 0.45s ease both; }
.direction-review-session.is-closing .direction-review-header { display: none; }
.direction-review-header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 22px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 75%, transparent);
}
.direction-review-kicker { color: var(--accent-moss); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.13em; }
.direction-review-header h2 { margin-top: 3px; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; color: var(--text-primary); }
.direction-review-header-actions { display: flex; align-items: center; gap: 6px; }
.direction-review-header-actions button { min-height: 38px; padding: 7px 10px; color: var(--text-secondary); font-size: 0.75rem; border-radius: 9px; }
#direction-review-close { width: 38px; padding: 0; font-size: 1.35rem; }
#direction-review-agenda { display: none; }
.direction-review-thread { flex: 1; overflow-y: auto; padding: 18px 22px 28px; scrollbar-width: thin; }
.direction-review-recap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 24px;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.direction-review-recap-scope {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    color: var(--text-muted);
    font-size: 0.67rem;
    letter-spacing: 0.015em;
}
.direction-review-recap-empty { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.75rem; }
.direction-review-recap-section {
    min-width: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}
.direction-review-recap-section summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    font-size: 0.72rem;
}
.direction-review-recap-section summary::-webkit-details-marker { display: none; }
.direction-review-recap-count { margin-left: auto; color: var(--accent-moss); }
.direction-review-recap-items { display: flex; flex-direction: column; gap: 5px; padding: 0 10px 10px; }
.direction-review-recap-item { min-width: 0; color: var(--text-muted); font-size: 0.71rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.direction-review-messages { display: flex; flex-direction: column; gap: 18px; transition: opacity 0.22s ease, transform 0.22s ease; }
.direction-review-message { max-width: 88%; font-size: 0.9rem; line-height: 1.68; color: var(--text-primary); }
.direction-review-message-ai { padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--accent-moss) 50%, transparent); }
.direction-review-message-user { align-self: flex-end; color: var(--text-secondary); background: color-mix(in srgb, var(--surface-raised) 72%, transparent); border: 1px solid var(--border-subtle); border-radius: 14px 14px 4px 14px; padding: 10px 13px; }
.direction-review-compose { padding: 12px 20px 18px; border-top: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent); transition: opacity 0.22s ease, transform 0.22s ease; }
.direction-review-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 7px 8px 7px 13px; border: 1px solid var(--border-subtle); border-radius: 14px; background: color-mix(in srgb, var(--surface-raised) 82%, transparent); }
.direction-review-input-row textarea { flex: 1; min-width: 0; min-height: 36px; max-height: 120px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; line-height: 1.5; }
.direction-review-input-row button { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; color: var(--bg-deep); background: var(--accent-moss); }
.direction-review-finish { min-height: 36px; padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--accent-moss) 58%, transparent); border-radius: 999px; color: var(--accent-moss); font-size: 0.73rem; }
#direction-review-finish { margin: 0 auto 10px; display: block; }
.direction-review-finish.hidden { display: none; }
.direction-review-finish:hover { background: color-mix(in srgb, var(--accent-moss) 8%, transparent); }
.direction-review-recap.is-leaving,
.direction-review-messages.is-leaving,
.direction-review-compose.is-leaving,
.direction-review-closing.is-leaving { opacity: 0; transform: translateY(-4px); }
.direction-review-closing {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
    transition: opacity 0.22s ease, transform 0.22s ease;
    animation: directionReviewReveal 0.35s ease both;
}
.direction-review-closing p { font-family: var(--font-serif); font-size: 1.35rem; color: var(--text-primary); }
.direction-review-closing span { color: var(--text-muted); font-size: 0.76rem; }
.direction-review-ending { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; padding: 28px; }
.direction-review-ending svg { width: 48px; height: 48px; color: var(--accent-moss); }
.direction-review-ending h3 { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; }
.direction-review-ending p { max-width: 500px; color: var(--text-secondary); line-height: 1.65; }
.direction-review-ending span { color: var(--text-muted); font-size: 0.78rem; }
.direction-review-ending button { margin-top: 8px; min-height: 42px; padding: 9px 16px; border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-primary); }
.direction-review-return { display: none; }

@keyframes directionReviewReveal { from { opacity: 0; filter: blur(5px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes directionReviewDot { 0%, 65%, 100% { opacity: 0.28; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-2px); } }

@media (max-width: 768px) {
    #app-header .header-center { min-width: 0; padding-left: 0; }
    #app-header .header-right { flex: 0 0 auto; gap: 2px; }
    .direction-review-toggle { width: 32px; height: 32px; }
    .direction-review-toggle svg { width: 20px; height: 20px; }
    .direction-review-toggle span { min-width: 15px; height: 15px; font-size: 0.52rem; }
    #direction-review-agenda { display: inline-flex; align-items: center; }
    .direction-review-surface {
        position: fixed;
        inset: 0 0 auto;
        height: var(--visual-viewport-height, 100dvh);
        z-index: 80;
    }
    .direction-review-header { min-height: 68px; gap: 8px; padding: max(13px, env(safe-area-inset-top)) 14px 11px; }
    .direction-review-header > div:first-child { min-width: 0; }
    .direction-review-kicker { display: none; }
    .direction-review-header h2 { margin-top: 0; font-size: 1.05rem; white-space: nowrap; }
    .direction-review-header-actions { gap: 3px; }
    #direction-review-finish-header { padding-inline: 9px; font-size: 0.68rem; white-space: nowrap; }
    .direction-review-thread { padding: 14px 14px 24px; }
    .direction-review-recap { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 20px; }
    .direction-review-message { max-width: 94%; font-size: 0.87rem; }
    .direction-review-compose { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
    .direction-review-active #mobile-ai-fab { display: none; }
    .direction-review-active.direction-review-agenda-open #direction-review-surface { display: none; }
    .direction-review-active.direction-review-agenda-open .direction-review-return {
        position: fixed;
        z-index: 61;
        left: 50%;
        bottom: calc(var(--mobile-tab-bar-height, 64px) + 12px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        display: block;
        min-height: 42px;
        padding: 9px 16px;
        border-radius: 999px;
        color: var(--bg-deep);
        background: var(--accent-moss);
        box-shadow: var(--shadow-soft);
    }
}

@media (max-width: 420px) {
    #greeting-text { font-size: 1.05rem; }
    #journal-toggle-btn { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .direction-review-transition,
    .direction-review-session,
    .direction-review-closing { animation: none; opacity: 1; filter: none; transform: none; }
    .direction-review-dots i,
    .direction-review-thinking i { animation: none; opacity: 0.65; }
}