/* Session Container - fills the content area */
.session-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px); /* fixed height to remove tiny outer page scroll */
    margin: -40px; /* negate content-area padding for immersive feel */
    position: relative;
    overflow: hidden;
}

/* Backdrop layer — dark green ambient gradient matching dashboard */
.session-backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%); /* matches JS idle phase — prevents green flash on load */
    z-index: 0;
    transition: background 4s ease;
    overflow: hidden;
}

/* Gradient orbs */
.session-backdrop .bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    will-change: transform;
}
.session-backdrop .bg-orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(118,183,169,0.25) 0%, transparent 70%);
    top: -10%; right: -5%;
    animation: sdrift1 25s ease-in-out infinite;
}
.session-backdrop .bg-orb-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(74,139,122,0.20) 0%, transparent 70%);
    bottom: -8%; left: -5%;
    animation: sdrift2 30s ease-in-out infinite;
}
.session-backdrop .bg-orb-3 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(232,213,196,0.12) 0%, transparent 70%);
    top: 40%; left: 50%;
    animation: sdrift3 22s ease-in-out infinite;
}

@keyframes sdrift1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,20px) scale(1.05);} }
@keyframes sdrift2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-20px) scale(1.08);} }
@keyframes sdrift3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-20px,30px) scale(0.95);} }

/* Floating particles */
.session-backdrop .s-particles { position: absolute; inset: 0; pointer-events: none; }
.session-backdrop .sp {
    position: absolute; border-radius: 50%;
    background: rgba(118,183,169,0.6);
    box-shadow: 0 0 6px 2px rgba(118,183,169,0.25);
    will-change: transform, opacity;
}
.sp.sp1 { width:4px;height:4px;left:10%;bottom:15%;animation:srise 15s ease-in infinite 0s; }
.sp.sp2 { width:3px;height:3px;left:25%;bottom:8%;animation:srise 19s ease-in infinite 3s; background:rgba(167,216,203,0.5); }
.sp.sp3 { width:5px;height:5px;left:40%;bottom:25%;animation:srise 13s ease-in infinite 5s; background:rgba(232,213,196,0.4); }
.sp.sp4 { width:2px;height:2px;left:55%;bottom:10%;animation:srise 17s ease-in infinite 1s; }
.sp.sp5 { width:4px;height:4px;left:70%;bottom:20%;animation:srise 14s ease-in infinite 7s; background:rgba(167,216,203,0.5); }
.sp.sp6 { width:3px;height:3px;left:85%;bottom:12%;animation:srise 20s ease-in infinite 4s; background:rgba(232,213,196,0.4); }
.sp.sp7 { width:3px;height:3px;left:50%;bottom:5%;animation:srise 16s ease-in infinite 9s; }
.sp.sp8 { width:4px;height:4px;left:15%;bottom:30%;animation:srise 18s ease-in infinite 6s; background:rgba(167,216,203,0.5); }

@keyframes srise {
    0%   { transform:translateY(0) translateX(0) scale(1); opacity:0; }
    10%  { opacity:0.8; }
    50%  { opacity:0.4; }
    100% { transform:translateY(-80vh) translateX(20px) scale(0.3); opacity:0; }
}

/* ----------------------------------------------------------
   MODE DROPDOWN — two layouts:
   .floating  → absolute top-right (pre-session & wrap-up)
   .inline    → flows inside the session timer bar
   ---------------------------------------------------------- */
.mode-dropdown-wrapper {
    z-index: 10;
}

.mode-dropdown-wrapper.floating {
    position: absolute;
    top: 0.85rem;
    right: 1.25rem;
}

.mode-dropdown-wrapper.inline {
    position: relative;
}

.timer-bar-mid {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.debug-ff-btn {
    font-size: 0.7rem;
    padding: 2px 8px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background: rgba(255,255,255,0.8);
    color: #94A3B8;
    cursor: pointer;
    line-height: 1.4;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.debug-ff-btn:hover {
    opacity: 1;
}

.ambient-toggle-btn {
    font-size: 0.95rem;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(255,255,255,0.65);
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s, transform 0.15s;
}

.ambient-toggle-btn:hover {
    background: #fff;
    transform: scale(1.05);
}

.mode-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #2C3E50;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

/* Inline variant — slightly more compact to fit nicely in the timer bar */
.mode-dropdown-wrapper.inline .mode-dropdown-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.6);
}

.mode-dropdown-btn:hover {
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    transform: translateY(-1px);
}

.mode-dropdown-wrapper.open .mode-dropdown-btn {
    background: #fff;
    border-color: #76B7A9;
}

.mode-icon {
    font-size: 1rem;
    line-height: 1;
}

.mode-caret {
    font-size: 0.65rem;
    color: #94A3B8;
    transition: transform 0.2s;
}

.mode-dropdown-wrapper.open .mode-caret {
    transform: rotate(180deg);
}

.mode-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 0.85rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    overflow: hidden;
    animation: dropdownIn 0.15s ease forwards;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.mode-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid #F1F5F9;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.mode-item:last-child { border-bottom: none; }

.mode-item:hover {
    background: #F8FAFC;
}

.mode-item.active {
    background: #F0FDF4;
}

.mode-item-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.mode-item-text {
    display: flex;
    flex-direction: column;
}

.mode-item-text strong {
    font-size: 0.9rem;
    color: #1E293B;
    font-weight: 600;
}

.mode-item-text small {
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 1px;
}

/* Chat Area */
.chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    z-index: 1;
    position: relative;
}

/* Welcome state */
.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    opacity: 0.8;
}

.welcome-orb {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    animation: pulse-orb 3s ease-in-out infinite;
}

@keyframes pulse-orb {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.chat-welcome h2 {
    color: #2C3E50;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.chat-welcome p {
    color: #94A3B8;
    font-size: 1.05rem;
    margin: 0;
}

/* Chat Bubbles */
.chat-bubble {
    display: flex;
    gap: 0.75rem;
    max-width: 75%;
    animation: bubbleIn 0.3s ease forwards;
}

@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-bubble {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-bubble {
    align-self: flex-start;
}

.bubble-avatar {
    position: relative;
    min-width: 40px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.25);
}

.avatar-letter {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
}

.avatar-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    border: 1.5px solid #F8FAFC;
}

.bubble-content {
    border-radius: 18px;
    padding: 1rem 1.25rem;
    line-height: 1.6;
}

.user-bubble .bubble-content {
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.ai-bubble .bubble-content {
    background: white;
    color: #2C3E50;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border-bottom-left-radius: 4px;
    position: relative;
}

/* Star button on each AI bubble — quiet by default, gold when starred */
.bubble-star {
    position: absolute;
    bottom: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: #CBD5E1;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, transform 0.15s;
}

.ai-bubble:hover .bubble-star,
.bubble-star.starred {
    opacity: 1;
}

.bubble-star:hover {
    color: #E0A458;
    transform: scale(1.18);
}

.bubble-star.starred {
    color: #E0A458;
}

.bubble-star:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.bubble-content p {
    margin: 0;
    font-size: 0.95rem;
    white-space: pre-wrap;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 4px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #94A3B8;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Thinking Indicator (Discreet Web Search) */
.thinking-indicator {
    display: flex;
    gap: 6px;
    padding: 4px 2px;
}

.thinking-indicator span {
    width: 7px;
    height: 7px;
    background: #76B7A9;
    border-radius: 50%;
    animation: thinking-pulse 1.8s ease-in-out infinite;
    opacity: 0.3;
}

.thinking-indicator span:nth-child(2) { animation-delay: 0.3s; }
.thinking-indicator span:nth-child(3) { animation-delay: 0.6s; }

@keyframes thinking-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 0.85; transform: scale(1.2); background: #5B8C80; }
}

/* Text-mode: Speech feedback bubble (transcript + countdown) */
.text-speech-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 3rem;
    z-index: 1;
    position: relative;
    animation: fadeInUp 0.25s ease;
}

.text-speech-bubble {
    text-align: center;
    color: #475569;
    font-style: italic;
    font-size: 0.95rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    border: 2px solid #1e1e2f;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-speech-countdown {
    background: #c4b5fd;
    color: #1e1e2f;
    border: 2px solid #1e1e2f;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: bounceIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
}

/* Input Area */
.input-area {
    z-index: 1;
    position: relative;
    padding: 1rem 3rem 2rem 3rem;
    background: linear-gradient(0deg, #F8FAFC 60%, transparent);
}

.input-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.toolbar-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: white;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    opacity: 0.5;
    transition: all 0.2s;
}

.toolbar-btn:not(:disabled) {
    opacity: 1;
    cursor: pointer;
}

.toolbar-btn:not(:disabled):hover {
    background: #F1F5F9;
    color: #2C3E50;
    border-color: #CBD5E1;
}

.input-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.input-row textarea {
    flex: 1;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    color: #2C3E50;
    background: white;
    resize: none;
    min-height: 48px;
    max-height: 150px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.input-row textarea:focus {
    border-color: #76B7A9;
    box-shadow: 0 0 0 3px rgba(118, 183, 169, 0.15);
}

.btn-send {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.2);
}

.btn-send:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(44, 62, 80, 0.3);
}

.btn-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive */
@media (max-width: 768px) {
    .chat-area {
        padding: 1.5rem 1rem;
    }
    .input-area {
        padding: 1rem 1rem 1.5rem 1rem;
    }
    .chat-bubble {
        max-width: 90%;
    }
}

/* Session Setup Card */
.session-setup {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
    padding: 2rem;
    min-height: 0;
    overflow-y: auto;
}

.setup-card {
    background: rgba(255,255,255,0.95);
    border-radius: 1.5rem;
    padding: 3rem 3.5rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    flex-shrink: 0;
    animation: fadeInUp 0.4s ease;
}

/* Scrollbar on the far right edge of the screen */
.session-setup::-webkit-scrollbar {
    width: 8px;
}
.session-setup::-webkit-scrollbar-track {
    background: transparent;
}
.session-setup::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}
.session-setup::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.setup-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.setup-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 0.5rem;
}

.setup-card p {
    color: #64748B;
    margin-bottom: 2rem;
}

.duration-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.duration-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1.75rem;
    border: 2px solid #E2E8F0;
    border-radius: 1rem;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 90px;
}

.duration-btn:hover {
    border-color: #3B6B5D;
    background: #F0FDF4;
    transform: translateY(-2px);
}

.duration-btn.active {
    border-color: #3B6B5D;
    background: #3B6B5D;
    color: white;
}

.dur-time {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.dur-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.previous-session-hint {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #F0F9FF;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    color: #475569;
    text-align: left;
}

/* Resume card */
.setup-card.resume-card {
    border-top: 4px solid #76B7A9;
}

.resume-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
    align-items: stretch;
}

.resume-actions .duration-btn {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    padding: 0.85rem 1rem;
}

/* ──────────────────────────────────────────────────────────
   Closing Seal — "lantern dimming" between summary and wrap-up
   ────────────────────────────────────────────────────────── */
.closing-seal {
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: radial-gradient(ellipse at 50% 60%, rgba(20, 18, 40, 0.55) 0%, rgba(8, 7, 20, 0.95) 70%, rgba(0, 0, 0, 1) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    animation: sealVeilIn 0.8s ease forwards;
    pointer-events: none;
}

@keyframes sealVeilIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.closing-lantern {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        rgba(255, 215, 160, 1) 0%,
        rgba(255, 175, 95, 0.95) 35%,
        rgba(220, 130, 60, 0.7) 65%,
        rgba(180, 90, 40, 0.0) 100%);
    box-shadow:
        0 0 80px 20px rgba(255, 175, 95, 0.45),
        0 0 160px 60px rgba(255, 140, 70, 0.18);
    animation: lanternDim 3.2s ease-in-out forwards;
}

@keyframes lanternDim {
    0%   { transform: scale(1.0);   opacity: 1.0;   filter: blur(0);    box-shadow: 0 0 80px 20px rgba(255, 175, 95, 0.50), 0 0 160px 60px rgba(255, 140, 70, 0.22); }
    25%  { transform: scale(1.05);  opacity: 1.0;   filter: blur(0);    box-shadow: 0 0 90px 25px rgba(255, 175, 95, 0.55), 0 0 180px 70px rgba(255, 140, 70, 0.25); }
    65%  { transform: scale(0.85);  opacity: 0.55;  filter: blur(2px);  box-shadow: 0 0 50px 10px rgba(255, 175, 95, 0.30), 0 0 100px 30px rgba(255, 140, 70, 0.10); }
    100% { transform: scale(0.45);  opacity: 0.0;   filter: blur(8px);  box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

.closing-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    color: rgba(255, 245, 230, 0.95);
    letter-spacing: 0.06em;
    opacity: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    animation: closingTextIn 3.2s ease forwards;
}

@keyframes closingTextIn {
    0%   { opacity: 0; transform: translateY(6px); letter-spacing: 0.04em; }
    40%  { opacity: 0.6; }
    70%  { opacity: 0.9; transform: translateY(0); letter-spacing: 0.08em; }
    100% { opacity: 1; letter-spacing: 0.10em; }
}

/* ──────────────────────────────────────────────────────────
   Summary Preparing — quiet placeholder while the AI silently
   generates the end-of-session summary. The actual summary text
   surfaces on the GoalReview card; this view only covers the
   brief generation window so the screen doesn't go empty.
   ────────────────────────────────────────────────────────── */
.summary-preparing {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 3rem 1.5rem;
    text-align: center;
    animation: summaryPreparingFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.summary-preparing-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 2.75rem 2.5rem;
    max-width: 400px;
    width: 100%;
    box-shadow: 
        0 20px 40px rgba(26, 51, 43, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.preparing-svg {
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
}

.glowing-core {
    fill: rgba(118, 183, 169, 0.25);
    filter: blur(4px);
    animation: coreGlow 3s ease-in-out infinite;
    transform-origin: center;
}

.pulsing-inner {
    fill: #3B6B5D;
    animation: innerPulse 1.8s ease-in-out infinite;
    transform-origin: center;
}

.spinning-track {
    fill: none;
    stroke: rgba(59, 107, 93, 0.15);
    stroke-width: 2;
    stroke-dasharray: 6 18;
    stroke-linecap: round;
    animation: trackSpin 8s linear infinite;
    transform-origin: center;
}

.orbiting-dot {
    fill: #76B7A9;
    animation: dotOrbit 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: center;
}

.summary-preparing-text {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    color: #1A332B;
    line-height: 1.4;
}

.summary-preparing-subtext {
    margin: 0.5rem 0 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.88rem;
    color: #4A6B62;
    opacity: 0.85;
    line-height: 1.4;
}

@keyframes summaryPreparingFadeIn {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes coreGlow {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

@keyframes innerPulse {
    0%, 100% { transform: scale(0.88); opacity: 0.9; }
    50% { transform: scale(1.12); opacity: 1; }
}

@keyframes trackSpin {
    100% { transform: rotate(360deg); }
}

@keyframes dotOrbit {
    100% { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────────
   Mood Check-in (pre-session)
   ────────────────────────────────────────────────────────── */
.mood-card .mood-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin: 1.5rem 0 1.5rem;
}

.mood-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem 0.4rem;
    border: 2px solid #E2E8F0;
    border-radius: 1rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.18s ease;
}

.mood-btn:hover {
    border-color: #76B7A9;
    transform: translateY(-2px);
}

.mood-btn.selected {
    border-color: #3B6B5D;
    background: #F0FDF4;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(59, 107, 93, 0.18);
}

.mood-emoji {
    font-size: 2rem;
    line-height: 1;
}

.mood-label {
    font-size: 0.75rem;
    color: #475569;
    font-weight: 500;
}

.mood-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.link-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.15s, text-decoration-color 0.15s;
}

.link-btn:hover {
    color: #475569;
    text-decoration-color: currentColor;
}

/* ──────────────────────────────────────────────────────────
   Breath Ritual (pre-session)
   ────────────────────────────────────────────────────────── */
.ritual-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    max-width: 480px;
    width: 100%;
    animation: fadeInUp 0.5s ease;
}

.ritual-orb-wrap {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ritual-orb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #A2D9CE 0%, #76B7A9 60%, #3B6B5D 100%);
    box-shadow: 0 0 40px rgba(118, 183, 169, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.45);
    transition: transform 4s ease-in-out;
}

.ritual-orb-inner {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), rgba(255,255,255,0));
}

/* Phase classes drive the breath rhythm */
.ritual-orb.andas-in { transform: scale(1.0); }
.ritual-orb.håll { transform: scale(1.0); }
.ritual-orb.andas-ut { transform: scale(0.45); }

.ritual-text {
    text-align: center;
}

.ritual-phase {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}

.ritual-countdown {
    font-size: 0.85rem;
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}

.ritual-skip-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #94A3B8;
    cursor: pointer;
    user-select: none;
}

.ritual-skip-toggle input {
    accent-color: #76B7A9;
}

/* Timer Bar */
.session-timer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 2rem;
    background: rgba(255,255,255,0.9);
    border-bottom: 1px solid #E2E8F0;
    z-index: 2;
    position: relative;
    font-size: 0.85rem;
}

.timer-phase {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-weight: 600;
    color: #3B6B5D;
}

.timer-phase-icon {
    display: none;
    line-height: 1;
}

.timer-phase-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timer-bar-mid {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.soundscape-group {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(118, 183, 169, 0.08);
    border: 1px solid rgba(118, 183, 169, 0.22);
    border-radius: 999px;
    padding: 2px 3px;
}

.ambient-toggle-btn {
    font-size: 0.95rem;
    padding: 3px 8px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s, opacity 0.15s;
    display: inline-flex;
    align-items: center;
}

.ambient-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

.ambient-toggle-btn.muted {
    opacity: 0.5;
}

.timer-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-weight: 600;
    color: #64748B;
    letter-spacing: 0.05em;
}

.session-menu-toggle,
.session-mobile-menu {
    display: none;
}

/* Wrap-up Card */
.wrapup-card {
    text-align: left;
}

/* ── Wrap-up planting payoff ─────────────────────────────────────
   A seed visibly grows as the session closes. Stem draws upward, the
   two leaves unfurl, then the bud pops — once, on mount. */
.wrapup-plant {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0.25rem;
}

.wrapup-plant-svg {
    overflow: visible;
}

.wrapup-plant-svg .wp-soil {
    stroke: #C9B48F;
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0;
    animation: wp-soil-in 0.5s ease-out 0.05s forwards;
}

.wrapup-plant-svg .wp-stem {
    stroke: #3B6B5D;
    stroke-width: 3.5;
    stroke-linecap: round;
    fill: none;
    /* Length of the stem (101 - 50 = 51); draw it on with dashoffset. */
    stroke-dasharray: 52;
    stroke-dashoffset: 52;
    animation: wp-stem-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.wrapup-plant-svg .wp-leaf {
    fill: #5A8F6B;
    transform-box: fill-box;
    transform-origin: 60px 60px;
    transform: scale(0);
    opacity: 0;
}

.wrapup-plant-svg .wp-leaf-l {
    transform-origin: bottom right;
    animation: wp-leaf-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

.wrapup-plant-svg .wp-leaf-r {
    transform-origin: bottom left;
    fill: #76B7A9;
    animation: wp-leaf-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}

.wrapup-plant-svg .wp-bud {
    fill: #E0A458;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: wp-bud-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards;
}

@keyframes wp-soil-in   { to { opacity: 0.9; } }
@keyframes wp-stem-grow { to { stroke-dashoffset: 0; } }
@keyframes wp-leaf-in   { to { transform: scale(1); opacity: 1; } }
@keyframes wp-bud-pop   { to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .wrapup-plant-svg .wp-soil,
    .wrapup-plant-svg .wp-stem,
    .wrapup-plant-svg .wp-leaf,
    .wrapup-plant-svg .wp-bud {
        animation: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }
}

.wrapup-plant-caption {
    text-align: center;
    color: #3B6B5D;
    font-size: 0.95rem;
    margin: 0.25rem 0 0;
}

.wrapup-mood-thread {
    text-align: center;
    color: #4A6B62;
    font-size: 0.9rem;
    font-style: italic;
    margin: 0.6rem 0 0;
}

.wrapup-summary {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: #F8FAFC;
    border-radius: 0.75rem;
    border-left: 3px solid #3B6B5D;
}

.wrapup-summary h3, .wrapup-goals h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #3B6B5D;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wrapup-summary p {
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

.wrapup-goals {
    margin: 1.5rem 0;
}

/* ──────────────────────────────────────────────────────────
   Shared goal-list pattern — used in:
     • Dashboard "Senaste sessionen" card
     • Dashboard garden drill-down panel
     • SessionWrapUpCard (end-of-session)
   One pattern so a goal looks the same everywhere the user
   encounters it. Uses `color: inherit` so it adapts to the
   surrounding card's text colour (light or dark theme).
   ────────────────────────────────────────────────────────── */
.goal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.goal-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.75rem 0.95rem;
    background: rgba(118, 183, 169, 0.10);
    border-left: 3px solid rgba(118, 183, 169, 0.55);
    border-radius: 0.55rem;
    color: inherit;
    line-height: 1.5;
}

.goal-list-icon {
    font-size: 1rem;
    line-height: 1.45;
    flex-shrink: 0;
}

.goal-list-text {
    flex: 1 1 auto;
    color: inherit;
    font-size: 0.94rem;
    word-break: break-word;
}

/* Next Meeting Section */
.next-meeting-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E2E8F0;
}

.next-meeting-section h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #3B6B5D;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.meeting-picker {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.meeting-datetime {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #E2E8F0;
    border-radius: 0.75rem;
    font-size: 1rem;
    color: #1E293B;
    background: white;
    transition: border-color 0.2s;
}

.meeting-datetime:focus {
    outline: none;
    border-color: #3B6B5D;
}

.meeting-actions {
    display: flex;
    gap: 0.75rem;
}

.meeting-actions .duration-btn {
    flex: 1;
    padding: 0.9rem;
    font-size: 0.85rem;
}

.meeting-confirmed {
    padding: 1rem 1.25rem;
    background: #F0FDF4;
    border-radius: 0.75rem;
    border-left: 3px solid #22C55E;
}

.meeting-confirmed p {
    margin: 0;
    color: #166534;
    font-weight: 500;
}

/* ----------------------------------------------------------
   MIC BUTTON — text mode toolbar (active state)
   ---------------------------------------------------------- */
.toolbar-btn.active.listening {
    background: linear-gradient(135deg, #E5734F 0%, #E0A458 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(229, 115, 79, 0.18);
    animation: mic-pulse 1.6s ease-in-out infinite;
}

@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(229, 115, 79, 0.18); }
    50% { box-shadow: 0 0 0 8px rgba(229, 115, 79, 0.30); }
}

/* ----------------------------------------------------------
   ORB + VOICE MODE
   ---------------------------------------------------------- */
.session-container.mode-orb .session-timer-bar {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.orb-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem 2rem;
    z-index: 1;
    position: relative;
    gap: 1.5rem;
}

.orb-canvas-wrapper {
    width: min(64vh, 520px);
    height: min(64vh, 520px);
    max-width: 86vw;
    max-height: 64vh;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Soft radial mask so the canvas's rectangular edge fades to nothing.
       Inner 70% fully visible, then a smooth fade out. Guarantees the orb
       never reads as a "circle inside a square". */
    -webkit-mask-image: radial-gradient(circle at center, #000 60%, rgba(0,0,0,0.6) 78%, transparent 100%);
    mask-image: radial-gradient(circle at center, #000 60%, rgba(0,0,0,0.6) 78%, transparent 100%);
}

.orb-canvas-wrapper canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    filter: drop-shadow(0 8px 40px rgba(118, 183, 169, 0.30));
    animation: orbFadeIn 0.8s ease forwards;
}

@keyframes orbFadeIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.orb-subtitle {
    max-width: min(640px, 90vw);
    text-align: center;
    color: #1E293B;
    font-size: 1.05rem;
    line-height: 1.6;
    min-height: 3.2rem;
    transition: opacity 0.3s ease;
}

.orb-subtitle p {
    margin: 0;
    text-shadow: 0 1px 2px rgba(255,255,255,0.4);
    animation: subtitleIn 0.4s ease;
}

.orb-subtitle.streaming p::after {
    content: '▍';
    margin-left: 2px;
    animation: caret-blink 0.9s steps(1) infinite;
    opacity: 0.5;
}

@keyframes caret-blink {
    50% { opacity: 0; }
}

@keyframes subtitleIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.orb-thinking {
    color: #64748B;
    font-style: italic;
    font-size: 0.95rem;
}

/* Small "save this insight" button under the orb subtitle */
.orb-star-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding: 0.35rem 0.85rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    color: #64748B;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.15s;
}

.orb-star-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    color: #E0A458;
    transform: translateY(-1px);
}

.orb-star-btn.starred {
    background: rgba(224, 164, 88, 0.18);
    border-color: rgba(224, 164, 88, 0.35);
    color: #92400E;
}

.orb-star-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* When the mentor is sitting with a heavy moment — slower, softer fade */
.orb-thinking.pause-beat {
    color: #475569;
    font-size: 1.05rem;
    animation: pauseBreath 2.8s ease-in-out infinite;
}

@keyframes pauseBreath {
    0%, 100% { opacity: 0.55; letter-spacing: 0.01em; }
    50%      { opacity: 1.0;  letter-spacing: 0.06em; }
}

/* When the mentor is searching the web — shimmer gradient effect */
.orb-thinking.searching {
    color: transparent;
    background: linear-gradient(
        90deg,
        #64748B 0%,
        #76B7A9 25%,
        #A7D8CB 50%,
        #76B7A9 75%,
        #64748B 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.02em;
    animation: searchShimmer 2s ease-in-out infinite;
}

@keyframes searchShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.orb-subtitle.pausing {
    transition: opacity 0.5s ease;
}

.orb-speech-feedback {
    position: relative;
    max-width: min(640px, 90vw);
    margin: 0 auto;
}

.orb-countdown {
    position: absolute;
    top: -22px;
    right: -15px;
    background: #c4b5fd; /* Soft purple from the mock */
    color: #1e1e2f;
    border: 2px solid #1e1e2f;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10;
    animation: bounceIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.orb-interim {
    text-align: center;
    color: #475569;
    font-style: italic;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    border: 2px solid #1e1e2f;
}

.orb-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.orb-mic-btn {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(44, 62, 80, 0.30);
    transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}

.orb-mic-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 32px rgba(44, 62, 80, 0.40);
}

.orb-mic-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.orb-mic-btn.listening {
    background: linear-gradient(135deg, #E5734F 0%, #E0A458 100%);
    box-shadow: 0 0 0 0 rgba(229, 115, 79, 0.5);
    animation: mic-listen-pulse 1.4s ease-in-out infinite;
}

/* Available-but-different cue when AI is currently speaking — clicking
   interrupts and starts listening */
.orb-mic-btn.interrupt {
    background: linear-gradient(135deg, #5B7B8C 0%, #6E96A8 100%);
    opacity: 0.9;
}

.orb-mic-btn.interrupt:hover:not(:disabled) {
    opacity: 1;
}

@keyframes mic-listen-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(229, 115, 79, 0.55), 0 8px 24px rgba(229, 115, 79, 0.35);
    }
    50% {
        box-shadow: 0 0 0 16px rgba(229, 115, 79, 0), 0 8px 24px rgba(229, 115, 79, 0.35);
    }
}

.orb-stop-btn {
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.85);
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.2s;
}

.orb-stop-btn:hover {
    background: #fff;
    color: #1E293B;
}

.orb-error {
    color: #B91C1C;
    background: rgba(254, 226, 226, 0.85);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}

/* Mobile orb sizing */
@media (max-width: 768px) {
    .session-container {
        margin: -20px;
    }

    .session-timer-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 0.55rem;
        min-height: 48px;
        padding: 0.48rem 0.72rem;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 250, 0.82));
        border-bottom: 1px solid rgba(118, 183, 169, 0.18);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 12px 30px rgba(55, 95, 86, 0.08);
        z-index: 28;
    }

    .timer-phase {
        gap: 0.38rem;
        font-size: 0.78rem;
        letter-spacing: 0;
    }

    .timer-phase-icon {
        display: inline-flex;
        width: 1.45rem;
        height: 1.45rem;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(118, 183, 169, 0.12);
        box-shadow: 0 0 0 1px rgba(118, 183, 169, 0.10) inset;
        font-size: 0.92rem;
    }

    .desktop-session-controls {
        display: none;
    }

    .timer-clock {
        padding: 0.34rem 0.58rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.68);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.80) inset,
            0 0 0 1px rgba(118, 183, 169, 0.10);
        color: #58706D;
        font-size: 0.78rem;
        letter-spacing: 0.03em;
    }

    .timer-clock-icon {
        opacity: 0.72;
    }

    .session-menu-toggle {
        width: 34px;
        height: 34px;
        display: inline-grid;
        place-items: center;
        border: 1px solid rgba(118, 183, 169, 0.20);
        border-radius: 999px;
        background:
            radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.50)),
            rgba(118, 183, 169, 0.10);
        color: #3B6B5D;
        cursor: pointer;
        box-shadow:
            0 10px 24px rgba(55, 95, 86, 0.10),
            0 1px 0 rgba(255, 255, 255, 0.90) inset;
        transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .session-menu-toggle.open {
        background:
            radial-gradient(circle at 50% 18%, rgba(202, 246, 236, 0.86), rgba(118, 183, 169, 0.22)),
            rgba(255, 255, 255, 0.74);
        border-color: rgba(118, 183, 169, 0.42);
        box-shadow:
            0 14px 28px rgba(55, 95, 86, 0.16),
            0 0 0 3px rgba(118, 183, 169, 0.11);
    }

    .session-menu-toggle:active {
        transform: scale(0.95);
    }

    .session-menu-glyph {
        position: relative;
        width: 17px;
        height: 17px;
    }

    .glyph-line {
        position: absolute;
        top: 8px;
        width: 9px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition:
            left 0.42s cubic-bezier(0.16, 1, 0.3, 1),
            right 0.42s cubic-bezier(0.16, 1, 0.3, 1),
            width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .glyph-one {
        left: 1px;
        transform: rotate(42deg);
        transform-origin: right center;
    }

    .glyph-two {
        right: 1px;
        transform: rotate(-42deg);
        transform-origin: left center;
    }

    .session-menu-toggle.open .glyph-one {
        left: 3px;
        width: 12px;
        transform: rotate(45deg);
        transform-origin: center;
    }

    .session-menu-toggle.open .glyph-two {
        right: 2px;
        width: 12px;
        transform: rotate(-45deg);
        transform-origin: center;
    }

    .session-mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: block;
        height: calc(100dvh - 104px);
        min-height: 420px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-14px);
        z-index: 27;
        transition: opacity 0.26s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .session-mobile-menu::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 70% 0%, rgba(173, 232, 219, 0.32), transparent 38%),
            linear-gradient(180deg, rgba(242, 250, 248, 0.86), rgba(226, 241, 238, 0.94));
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    .session-mobile-menu.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .session-menu-panel {
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding: 1rem 1rem 1.35rem;
        transform: translateY(-10px) scale(0.985);
        transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .session-mobile-menu.open .session-menu-panel {
        transform: translateY(0) scale(1);
    }

    .session-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
        padding: 0.25rem 0.1rem 0;
    }

    .session-menu-kicker {
        display: block;
        color: #6D8B83;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .session-menu-head h2 {
        margin: 0.1rem 0 0;
        color: #173B31;
        font-size: 1.35rem;
        line-height: 1.15;
        letter-spacing: 0;
    }

    .session-menu-section {
        margin-bottom: 0.9rem;
        padding: 0.86rem;
        border: 1px solid rgba(118, 183, 169, 0.18);
        border-radius: 22px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46)),
            rgba(255, 255, 255, 0.34);
        box-shadow:
            0 16px 36px rgba(55, 95, 86, 0.10),
            0 1px 0 rgba(255, 255, 255, 0.74) inset;
    }

    .session-menu-section-head {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 0.72rem;
        align-items: center;
        margin-bottom: 0.8rem;
    }

    .session-menu-section-icon {
        width: 42px;
        height: 42px;
        display: inline-grid;
        place-items: center;
        border-radius: 16px;
        background: rgba(118, 183, 169, 0.13);
        color: #2F6D5E;
        font-size: 1.15rem;
        font-weight: 800;
        box-shadow: 0 0 0 1px rgba(118, 183, 169, 0.10) inset;
    }

    .session-menu-section-head h3 {
        margin: 0;
        color: #173B31;
        font-size: 0.98rem;
        line-height: 1.2;
    }

    .session-menu-section-head p {
        margin: 0.14rem 0 0;
        color: #64817A;
        font-size: 0.8rem;
        line-height: 1.35;
    }

    .mobile-mode-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.64rem;
    }

    .mobile-mode-card,
    .mobile-soundscape-item,
    .mobile-ambient-toggle {
        border: 1px solid rgba(118, 183, 169, 0.14);
        border-radius: 17px;
        background: rgba(255, 255, 255, 0.58);
        color: #1D3B34;
        cursor: pointer;
        text-align: left;
        box-shadow: 0 8px 18px rgba(55, 95, 86, 0.06);
        transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    }

    .mobile-mode-card {
        min-height: 106px;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.7rem;
    }

    .mobile-mode-card:hover,
    .mobile-soundscape-item:hover,
    .mobile-ambient-toggle:hover {
        transform: translateY(-1px);
        border-color: rgba(118, 183, 169, 0.28);
        background: rgba(255, 255, 255, 0.78);
    }

    .mobile-mode-card.active,
    .mobile-soundscape-item.active {
        border-color: rgba(59, 107, 93, 0.34);
        background:
            radial-gradient(circle at 90% 0%, rgba(173, 232, 219, 0.34), transparent 46%),
            rgba(236, 250, 246, 0.90);
        box-shadow:
            0 12px 28px rgba(55, 95, 86, 0.12),
            0 0 0 3px rgba(118, 183, 169, 0.09);
    }

    .mobile-mode-icon {
        width: 34px;
        height: 34px;
        display: inline-grid;
        place-items: center;
        border-radius: 13px;
        background: rgba(118, 183, 169, 0.12);
        font-size: 1rem;
    }

    .mobile-mode-card strong,
    .mobile-soundscape-item strong,
    .mobile-ambient-toggle strong {
        display: block;
        color: #173B31;
        font-size: 0.9rem;
        line-height: 1.22;
    }

    .mobile-mode-card small,
    .mobile-soundscape-item small,
    .mobile-ambient-toggle small {
        display: block;
        margin-top: 0.12rem;
        color: #69877F;
        font-size: 0.73rem;
        line-height: 1.28;
    }

    .mobile-ambient-toggle {
        width: 100%;
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 0.7rem;
        align-items: center;
        padding: 0.72rem;
        margin-bottom: 0.7rem;
    }

    .mobile-ambient-toggle.muted {
        opacity: 0.78;
        background: rgba(255, 255, 255, 0.40);
    }

    .mobile-ambient-icon {
        width: 38px;
        height: 38px;
        display: inline-grid;
        place-items: center;
        border-radius: 14px;
        background: rgba(118, 183, 169, 0.13);
        font-size: 1.02rem;
    }

    .mobile-soundscape-list {
        display: grid;
        gap: 0.55rem;
    }

    .mobile-soundscape-item {
        width: 100%;
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 0.7rem;
        align-items: center;
        padding: 0.66rem 0.72rem;
    }

    .mobile-soundscape-icon {
        width: 38px;
        height: 38px;
        display: inline-grid;
        place-items: center;
        border-radius: 14px;
        background: rgba(118, 183, 169, 0.10);
        font-size: 1.1rem;
    }

    .orb-canvas-wrapper {
        width: 75vw;
        height: 75vw;
        max-height: 50vh;
    }
    .orb-mic-btn {
        width: 72px;
        height: 72px;
    }
}

/* When backdrop is in Summary/WrapUp phase (now light pastels) — keep
   timer bar and subtitle using normal dark text for readability */
.session-backdrop[data-phase="summary"] ~ .session-timer-bar,
.session-backdrop[data-phase="wrapup"] ~ .session-timer-bar {
    background: rgba(255, 255, 255, 0.75);
    border-bottom-color: rgba(118, 183, 169, 0.15);
    backdrop-filter: blur(10px);
}

.session-backdrop[data-phase="summary"] ~ .session-timer-bar .timer-phase,
.session-backdrop[data-phase="wrapup"] ~ .session-timer-bar .timer-phase {
    color: #3B6B5D;
}

.session-backdrop[data-phase="summary"] ~ .session-timer-bar .timer-clock,
.session-backdrop[data-phase="wrapup"] ~ .session-timer-bar .timer-clock {
    color: #64748B;
}

.session-backdrop[data-phase="summary"] ~ .orb-stage .orb-subtitle,
.session-backdrop[data-phase="wrapup"] ~ .orb-stage .orb-subtitle {
    color: #1A2F2A;
}

.session-backdrop[data-phase="summary"] ~ .orb-stage .orb-subtitle p,
.session-backdrop[data-phase="wrapup"] ~ .orb-stage .orb-subtitle p {
    text-shadow: 0 1px 3px rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.35);
    padding: 0.8rem 1.2rem;
    border-radius: 0.75rem;
    backdrop-filter: blur(2px);
}

.session-backdrop[data-phase="summary"] ~ .orb-stage .orb-thinking,
.session-backdrop[data-phase="wrapup"] ~ .orb-stage .orb-thinking {
    color: #5A7B72;
}

/* ──────────────────────────────────────────────────────────
   End-of-session: Collaborative Goal Review card
   ────────────────────────────────────────────────────────── */
.goal-review-card {
    max-width: 580px;
    text-align: left;
}

.goal-review-card .setup-icon {
    font-size: 3.2rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.goal-review-card h2 {
    text-align: center;
}

.goal-review-summary {
    background: #F8FAFC;
    border-left: 3px solid #76B7A9;
    padding: 0.85rem 1.1rem;
    border-radius: 0.6rem;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1.5rem;
    max-height: 9rem;
    overflow-y: auto;
}

.goal-review-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
}

.goal-review-empty {
    color: #94A3B8;
    font-style: italic;
    font-size: 0.9rem;
    margin: 0.5rem 0;
    text-align: center;
}

.goal-proposal {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 0.7rem;
    transition: all 0.15s ease;
}

.goal-proposal.accepted {
    background: #F0FDF4;
    border-color: #76B7A9;
}

.goal-proposal.rejected {
    background: #FAFAFA;
    border-color: #E2E8F0;
    opacity: 0.55;
}

.goal-proposal.user-authored {
    border-left-width: 3px;
    border-left-color: #E0A458;
}

.goal-proposal-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.goal-proposal-text {
    color: #1E293B;
    font-size: 0.94rem;
    line-height: 1.45;
    word-wrap: break-word;
    min-width: 0;
}

.goal-proposal.rejected .goal-proposal-text {
    text-decoration: line-through;
}

.goal-proposal-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.goal-status-badge {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    margin-right: 0.3rem;
    white-space: nowrap;
}

.goal-status-badge.accepted {
    background: rgba(118, 183, 169, 0.18);
    color: #1F4F44;
}

.goal-status-badge.rejected {
    background: rgba(0, 0, 0, 0.06);
    color: #94A3B8;
}

.goal-proposal-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.13s ease;
}

.goal-proposal-btn:hover {
    background: #F1F5F9;
    transform: translateY(-1px);
}

.goal-proposal-btn.active {
    background: #76B7A9;
    border-color: #76B7A9;
    color: #fff;
}

.goal-proposal-edit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.goal-proposal-input {
    flex: 1;
    border: 1px solid #76B7A9;
    border-radius: 0.5rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.94rem;
    color: #1E293B;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(118, 183, 169, 0.15);
    min-width: 0;
}

.goal-proposal-edit-done {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #76B7A9;
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
}

.goal-proposal-add {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.goal-proposal-add-input {
    flex: 1;
    border: 1px dashed #CBD5E1;
    border-radius: 0.6rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    color: #1E293B;
    background: rgba(255, 255, 255, 0.6);
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.goal-proposal-add-input:focus {
    border-style: solid;
    border-color: #76B7A9;
    background: #fff;
}

.goal-proposal-add-btn {
    padding: 0.5rem 0.95rem;
    border-radius: 0.6rem;
    border: 1px solid #76B7A9;
    background: transparent;
    color: #3B6B5D;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.goal-proposal-add-btn:hover:not(:disabled) {
    background: #76B7A9;
    color: #fff;
}

.goal-proposal-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.goal-review-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Hint shown above the disabled "Avsluta sessionen" button when the user
   still has AI-proposed goals waiting for a ✓ or ✕ decision. The disabled
   state on the button itself is rendered via the native :disabled styling
   on .duration-btn — this row is just the explainer. */
.goal-review-pending-hint {
    margin: 0.5rem auto 0;
    padding: 0.6rem 0.95rem;
    max-width: 460px;
    background: rgba(224, 164, 88, 0.10);
    border: 1px solid rgba(224, 164, 88, 0.30);
    border-radius: 10px;
    color: #6B4A21;
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: center;
}

/* When the finish button is disabled because pending decisions remain,
   make it visually clear that it's not clickable. Without this the
   button still looks active and the hint feels less connected. */
.goal-review-actions .duration-btn.active:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.link-btn-disabled {
    color: #94A3B8;
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.35rem 0.5rem;
    cursor: not-allowed;
    user-select: none;
}

/* ── Goal review: section headers ── */
.goal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    margin-top: 0.5rem;
    border-bottom: 1px solid #E2E8F0;
}

.goal-section-header.new-section {
    margin-top: 1rem;
}

.goal-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #3B6B5D;
}

.goal-slots-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #4A6B62;
    background: rgba(118, 183, 169, 0.15);
    border: 1px solid rgba(118, 183, 169, 0.3);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

/* ── Existing big goals ── */
.existing-big-goal {
    padding: 0.7rem 0.85rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 0.7rem;
    transition: opacity 0.2s;
}

.existing-big-goal.removed {
    opacity: 0.45;
    border-style: dashed;
}

.existing-goal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.existing-goal-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.existing-goal-text {
    flex: 1;
    color: #1E293B;
    font-weight: 600;
    font-size: 0.95rem;
}

.goal-remove-btn,
.goal-restore-btn {
    border: none;
    background: transparent;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.goal-remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

.goal-restore-btn:hover {
    background: rgba(118, 183, 169, 0.15);
}

/* Existing sub-tasks list */
.existing-subtask-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.existing-subtask {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: #475569;
}

.existing-subtask.done {
    color: #94A3B8;
    text-decoration: line-through;
}

.subtask-check {
    font-size: 0.9rem;
    color: #3B6B5D;
}

.subtask-text {
    flex: 1;
}

.subtask-repeat-pill {
    font-size: 0.68rem;
    font-weight: 600;
    color: #3B6B5D;
    background: rgba(118, 183, 169, 0.15);
    border: 1px solid rgba(118, 183, 169, 0.3);
    border-radius: 999px;
    padding: 0.08rem 0.4rem;
    flex-shrink: 0;
}

/* ── Hierarchy assignment row (shown when a new proposal is accepted) ── */
.goal-hierarchy-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.4rem 0;
    border-top: 1px dashed rgba(118, 183, 169, 0.2);
    margin-top: 0.45rem;
}

.hierarchy-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #4A6B62;
    white-space: nowrap;
}

.hierarchy-label.repeat-label {
    margin-left: 0.5rem;
}

.hierarchy-select {
    border: 1px solid #CBD5E1;
    border-radius: 0.5rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    color: #1E293B;
    background: #fff;
    outline: none;
    cursor: pointer;
    max-width: 200px;
    transition: border-color 0.15s;
}

.hierarchy-select:focus {
    border-color: #76B7A9;
    box-shadow: 0 0 0 2px rgba(118, 183, 169, 0.15);
}

.repeat-select {
    max-width: 110px;
}

/* ── Cap warning banner ── */
.goal-cap-warning {
    background: rgba(255, 170, 0, 0.06);
    border: 1px solid rgba(255, 170, 0, 0.2);
    border-left: 3px solid #E0A458;
    border-radius: 0.6rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    color: #7A5C2E;
    line-height: 1.5;
    margin-top: 0.5rem;
}

/* ──────────────────────────────────────────────────────────
   Pre-session: Goal scaling check-in card
   ────────────────────────────────────────────────────────── */
.goal-checkin-card .setup-icon {
    font-size: 3.2rem;
    margin-bottom: 0.5rem;
}

.goal-checkin-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1.5rem 0 1.5rem;
    width: 100%;
}

.goal-checkin-row {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    text-align: left;
}

.goal-checkin-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.goal-checkin-text {
    color: #1E293B;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.goal-checkin-meta {
    color: #94A3B8;
    font-size: 0.75rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.goal-checkin-slider-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
}

.goal-scale-end {
    color: #94A3B8;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.goal-checkin-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #E0A458 0%, #76B7A9 60%, #3B6B5D 100%);
    outline: none;
    cursor: pointer;
}

.goal-checkin-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3B6B5D;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s;
}

.goal-checkin-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.goal-checkin-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.goal-checkin-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3B6B5D;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.goal-checkin-score {
    min-width: 24px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1E293B;
    font-size: 1.05rem;
}

.goal-checkin-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* ──────────────────────────────────────────────────────────
   Pre-session: Soundscape picker card
   ────────────────────────────────────────────────────────── */
.soundscape-card .setup-icon {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

.soundscape-current-desc {
    color: #475569;
    font-style: italic;
    font-size: 0.98rem;
    margin-bottom: 1.5rem !important;
}

.soundscape-chips {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin: 0 0 1.75rem;
}

.soundscape-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 0.35rem;
    border: 2px solid #E2E8F0;
    border-radius: 1rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.18s ease;
}

.soundscape-chip:hover {
    border-color: #76B7A9;
    transform: translateY(-2px);
    background: #F8FAFC;
}

.soundscape-chip.selected {
    border-color: #3B6B5D;
    background: #F0FDF4;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(59, 107, 93, 0.18);
}

.soundscape-chip-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.soundscape-chip-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

.soundscape-chip.selected .soundscape-chip-label {
    color: #1E293B;
}

.soundscape-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* ──────────────────────────────────────────────────────────
   In-session: Soundscape menu (inline in the timer bar)
   ────────────────────────────────────────────────────────── */
.soundscape-menu-wrapper {
    position: relative;
    z-index: 9;
}

.soundscape-menu-btn {
    font-size: 1rem;
    padding: 3px 8px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.soundscape-menu-btn:hover {
    background: rgba(255, 255, 255, 0.5);
}

.soundscape-menu-wrapper.open .soundscape-menu-btn {
    background: rgba(255, 255, 255, 0.7);
}

.soundscape-menu-icon {
    font-size: 1rem;
    line-height: 1;
}

.soundscape-menu-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 0.85rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    animation: soundscapePopoverIn 0.15s ease forwards;
}

@keyframes soundscapePopoverIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.soundscape-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid #F1F5F9;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.soundscape-menu-item:last-child { border-bottom: none; }

.soundscape-menu-item:hover {
    background: #F8FAFC;
}

.soundscape-menu-item.active {
    background: #F0FDF4;
}

.soundscape-menu-item-icon {
    font-size: 1.4rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.soundscape-menu-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.soundscape-menu-item-text strong {
    font-size: 0.92rem;
    color: #1E293B;
    font-weight: 600;
}

.soundscape-menu-item-text small {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.4;
}

@media (max-width: 700px) {
    .soundscape-chips {
        grid-template-columns: repeat(3, 1fr);
    }
    .soundscape-menu-popover {
        min-width: 220px;
        right: -40px;
    }
}

@media (max-width: 600px) {
    .session-setup {
        padding: 1rem;
    }
    .setup-card {
        padding: 2rem 1.25rem;
    }
    .setup-card h2 {
        font-size: 1.25rem;
    }
    .duration-buttons {
        gap: 0.5rem;
    }
    .duration-btn {
        padding: 1rem;
        min-width: 70px;
    }
}