@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Luckiest+Guy&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&display=swap');

/* ---------- Palette ---------- */
:root {
    --ink: #0f2533;
    /* text from 133C55 */
    --p1: #133C55;
    /* deep navy */
    --p2: #386FA4;
    /* blue */
    --p3: #59A5D8;
    /* sky */
    --p4: #84D2F6;
    /* light */
    --p5: #91E5F6;
    /* lightest */

    --radius: 22px;
    --shadow: 0 20px 60px rgba(19, 60, 85, .18);

    /* Glass tokens */
    --glass-bg: rgba(255, 255, 255, .22);
    --glass-bg-strong: rgba(255, 255, 255, .28);
    --glass-border: rgba(255, 255, 255, .60);
    --glass-inner: rgba(255, 255, 255, .16);
    --glass-shadow: 0 22px 70px rgba(19, 60, 85, .22), 0 2px 6px rgba(19, 60, 85, .08);
}

/* ---------- Base ---------- */
* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

.logo p {
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
}

h1 {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: <700>;
    font-style: normal;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    background: linear-gradient(160deg, var(--p5), var(--p4));
    overflow-x: hidden;
}

p {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

button,
a {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: .8rem;
}

/* Background */
.bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden
}

.blob {
    position: absolute;
    filter: blur(40px);
    opacity: .45;
    transform: translateZ(0)
}

.blob-a {
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--p3), var(--p2));
    left: -10vmax;
    top: -12vmax;
    animation: floatA 18s ease-in-out infinite alternate;
}

.blob-b {
    width: 42vmax;
    height: 42vmax;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 70%, var(--p4), var(--p2));
    right: -12vmax;
    bottom: -16vmax;
    animation: floatB 22s ease-in-out infinite alternate;
}

@keyframes floatA {
    to {
        transform: translate(4vmax, 3vmax) scale(1.05)
    }
}

@keyframes floatB {
    to {
        transform: translate(-3vmax, -2vmax) scale(1.03)
    }
}

.grain {
    position: absolute;
    inset: 0;
    opacity: .06;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' opacity='0.6' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' /></svg>");
    mix-blend-mode: multiply;
    z-index: -1;
}

/* ---------- Header ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: linear-gradient(to bottom, rgba(19, 60, 85, .06), rgba(19, 60, 85, 0));
}

.logo {
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    letter-spacing: .2px;
    font-family: "Nunito", sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

/* HIGH-CONTRAST nav links (glassy pills) */
.topbar nav a {
    margin-left: 12px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(255, 255, 255, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .2s ease, transform .1s ease, color .2s ease;
}

.topbar nav a[aria-current="page"] {
    background: rgba(255, 255, 255, .9)
}

.topbar nav a:hover {
    background: rgba(255, 255, 255, .92);
    transform: translateY(-1px);
    color: var(--p1)
}

/* ---------- Layout ---------- */
.layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 14px;
    max-width: 1100px;
    margin: 18px auto;
    padding: 0 14px;
}

/* ---------- Glass surfaces ---------- */
.menu,
.panel,
.chat {
    position: relative;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    isolation: isolate;
}

.menu::after,
.panel::after,
.chat::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 var(--glass-inner), inset 0 -1px 0 rgba(255, 255, 255, .10);
}

/* Menu */
.menu {
    padding: 14px;
    height: fit-content;
    position: sticky;
    top: 72px
}

.menu-title {
    margin: 4px 0 10px;
    font-family: "Nunito", sans-serif
}

.menu-btn {
    width: 100%;
    padding: .7rem .8rem;
    margin: .35rem 0;
    cursor: pointer;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    color: #0b2a3a;
    background: linear-gradient(180deg, rgba(145, 229, 246, .45), rgba(132, 210, 246, .28));
    border: 1px solid rgba(19, 60, 85, .10);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 8px 20px rgba(56, 111, 164, .18);
    transition: transform .1s ease, box-shadow .15s ease, background .2s ease;
}

.menu-btn.active {
    background: linear-gradient(180deg, rgba(132, 210, 246, .65), rgba(89, 165, 216, .42))
}

.menu-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(56, 111, 164, .24)
}

.menu-link.subtle {
    display: inline-block;
    margin-top: .5rem;
    color: rgba(15, 37, 51, .70);
    text-decoration: none
}

.sep {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    margin: .8rem 0
}

/* Panel (router outlet) */
.panel {
    min-height: 62vh;
    padding: 16px
}

.page-title {
    font-size: 1.9rem;
    margin: .1rem 0;
    font-family: "Nunito", sans-serif
}

.page-subtitle {
    color: rgba(15, 37, 51, .70);
    margin: .2rem 0 1rem
}

/* Choice grid on placeholder */
.choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

@media (max-width:900px) {
    .layout {
        grid-template-columns: 1fr
    }

    .choices {
        grid-template-columns: 1fr
    }

    .menu {
        position: static
    }
}

/* Tiles */
.choice {
    border: 1px solid rgba(19, 60, 85, .10);
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .86));
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(19, 60, 85, .12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.choice:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(19, 60, 85, .16);
    border-color: rgba(19, 60, 85, .16)
}

.choice .icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .95);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(19, 60, 85, .06);
}

.choice .txt {
    display: flex;
    flex-direction: column
}

.choice .txt strong {
    font-size: 16px
}

.choice .txt em {
    font-style: normal;
    opacity: .75;
    font-size: 13px
}

.choice .arrow {
    margin-left: auto;
    opacity: .5;
    font-weight: 700
}

/* Circle sizing & containment (with headroom for inhale scale) */
.circle {
    /* Big, responsive, but never larger than the card's free space */
    width: clamp(160px, 35vmin, 280px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin: 0 auto;
    background: radial-gradient(circle at 30% 30%, #cfe9fb, #9fd1f0);
    box-shadow: inset 0 0 40px rgba(27, 90, 117, .25), 0 10px 25px rgba(0, 0, 0, .08);
    transform-origin: 50% 50%;
    transform: scale(1);
    transition: transform .9s ease-in-out;
}

/* Shared layout bits */
.row {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-top: 1rem;
}

.row.end {
    justify-content: flex-end
}

/* Buttons & inputs */
.btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    background: linear-gradient(90deg, var(--p2), var(--p3));
    color: #fff;
    padding: .58rem .9rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(56, 111, 164, .22);
    transition: transform .1s ease, box-shadow .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(56, 111, 164, .28)
}

.btn.ghost {
    background: #eef6fb;
    color: #1b4c72;
    box-shadow: none
}

.btn.small {
    padding: .45rem .7rem;
    font-size: .9rem
}

.btn.tiny {
    padding: .35rem .55rem;
    font-size: .8rem
}

label {
    font-weight: 700
}

input[type="number"],
input[type="text"],
textarea {
    width: 100%;
    border: 1px solid #e4eef6;
    border-radius: 12px;
    background: #fbfdff;
    padding: .55rem .65rem;
}

/* 5-4-3-2-1 */
.senses {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr)
}

@media (max-width:720px) {
    .senses {
        grid-template-columns: 1fr
    }
}

.sense {
    background: #fcfeff;
    border: 1px solid #eaf3fa;
    border-radius: 12px;
    padding: .8rem;
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .45rem
}

.list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid #eef3f8;
    border-radius: 10px;
    padding: .45rem .55rem;
}

.list li input[type="text"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit
}

.list li .x {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #b14c4c;
    font-weight: 700
}

/* Floating Worry FAB */
.fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--p2), var(--p3));
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 16px 36px rgba(56, 111, 164, .35);
}

.fab:hover {
    transform: translateY(-1px)
}

.badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    font-size: .75rem;
    border-radius: 999px;
    background: #ff6b6b;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

/* Floating Chat */
.chat {
    position: fixed;
    right: 20px;
    bottom: 86px;
    z-index: 49;
    width: 320px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.chat[aria-hidden="false"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto
}

.chat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .8rem;
    background: #eaf6ff;
    border-bottom: 1px solid #d9ecfb;
}

.chat-actions {
    display: flex;
    gap: .4rem
}

.chat-note {
    padding: .5rem .8rem .2rem
}

.inbox {
    display: flex;
    gap: .4rem;
    margin: .4rem .8rem
}

.inbox input {
    flex: 1
}

.list.compact {
    padding: .4rem .8rem;
    overflow: auto
}

.chat-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem .8rem .7rem
}

/* Footer */
.footer {
    text-align: center;
    padding: 22px 14px;
    color: rgba(15, 37, 51, .70)
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce) {

    .blob-a,
    .blob-b,
    .menu-btn:hover,
    .choice:hover,
    .fab:hover {
        animation: none;
        transform: none;
        transition: none
    }
}

/* Fallback for no backdrop-filter support */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {

    .menu,
    .panel,
    .chat {
        background: rgba(255, 255, 255, .92)
    }
}

/* ---------- Breathing exercise card (GLASS + proper layout) ---------- */
.panel .card {
    position: relative;
    border-radius: 20px;
    padding: clamp(16px, 3vw, 24px);
    /* TRUE liquid glass (not white) */
    background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .24));
    border: 1px solid rgba(255, 255, 255, .60);
    box-shadow: 0 16px 40px rgba(19, 60, 85, .14), 0 2px 6px rgba(19, 60, 85, .06);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    isolation: isolate;
    overflow: hidden;
    /* keep the circle inside */
    line-height: 1.8rem;
}

/* subtle rim */
.panel .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}

/* === Layout fix: circle gets the big column, settings a slim rail === */
/* !important beats the old 320px/1fr rule */
.panel .card .breath-shell {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

/* place the circle in col 1, everything else in col 2 */
.panel .card .breath-shell>.circle {
    grid-column: 1;
    justify-self: center;
}

.panel .card .breath-shell>*:not(.circle) {
    grid-column: 2;
    align-self: center;
}

/* stack on small screens */
@media (max-width: 900px) {
    .panel .card .breath-shell {
        grid-template-columns: 1fr !important;
    }

    .panel .card .breath-shell>*:not(.circle) {
        grid-column: 1;
        justify-self: center;
        width: min(440px, 100%);
        margin-top: 8px;
    }
}

@media (max-width: 900px) {
    .panel .card .circle {
        max-width: 100%;
    }
}