:root {
    --scrollbar-track: rgba(255,255,255,.05);
    --scrollbar-thumb: rgba(255,255,255,.18);
}

/* Dark page background to showcase the panel */
html, body {
    height: 100%;
}

body {
    margin: 0;
    background: radial-gradient(1200px 800px at 10% -20%, #121826 0, transparent 60%), radial-gradient(1000px 600px at 110% -15%, #0d1220 0, transparent 60%), linear-gradient(180deg, #0a0d12 0%, #070a0f 100%);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color: #e7edf5;
}

/* Full viewport helper (accounts for mobile dynamic viewport) */
.full-viewport {
    height: 100dvh;
    min-height: 100vh;
}

.chat-root {
    --bg: var(--chat-bg, #0a0d12);
    --panel: var(--chat-panel, rgba(255,255,255,.045));
    --panel-brd: var(--chat-panel-brd, rgba(255,255,255,.09));
    --text: var(--chat-text, #e7edf5);
    --muted: var(--chat-muted, #98a2b3);
    --me-bg: var(--chat-me, linear-gradient(135deg,#7b5cff,#5a89ff));
    --you-bg: var(--chat-you, rgba(255,255,255,.06));
    --accent: var(--chat-accent,#7b5cff);
    --radius: 18px;
    --shadow: 0 10px 40px rgba(0,0,0,.35);
    color: var(--text);
    min-height: 0; /* allow children to shrink */
}

    .chat-root * {
        box-sizing: border-box;
    }

/* ===== Panel ===== */
.chat-panel {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid var(--panel-brd);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow);
    width: 100%;
    height: 100%; /* fill parent height */
    max-width: none; /* width controlled by Bootstrap cols */
    overflow: hidden;
    display: grid; /* ensure composer stays at bottom */
    grid-template-rows: auto 1fr auto;
    min-height: 0; /* allow middle row to shrink */
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #111!important; /*linear-gradient(90deg, rgba(10,13,18,.85), rgba(10,13,18,.55));*/
    border-bottom: 1px solid var(--panel-brd);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.sub {
    font-size: .8rem;
    color: var(--muted);
}

.title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.icon-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text);
    border-radius: 10px;
    padding: 4px 10px;
    cursor: default;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(80% 80% at 30% 20%, #4c56a8, #232a4a);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    flex: 0 0 32px;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* ===== Messages ===== */
.chat-messages {
    list-style: none;
    margin: 0;
    padding: 16px 14px;
    overflow: auto;
    background: linear-gradient(180deg, var(--bg), #00070a0f);
    scroll-behavior: smooth;
    min-height: 0; /* critical for proper scroll area in grid */
}

    /* custom scrollbar (webkit) */
    .chat-messages::-webkit-scrollbar {
        width: 10px;
    }

    .chat-messages::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }

    .chat-messages::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 8px;
    }

.msg {
    display: grid;
    gap: 6px 10px;
    align-items: end;
    margin: 10px 0;
}

    /* YOU (left) layout: [avatar][bubble] */
    .msg.you {
        grid-template-columns: 32px 1fr;
    }

        .msg.you .avatar {
            grid-column: 1;
            grid-row: 1;
        }

        .msg.you .bubble {
            grid-column: 2;
            grid-row: 1;
            justify-self: start;
            color: #ccc;
        }

        .msg.you .meta {
            grid-column: 2;
            grid-row: 2;
            justify-self: start;
        }

    /* ME (right) layout: [bubble][avatar] */
    .msg.me {
        grid-template-columns: 1fr 32px;
    }

        .msg.me .avatar {
            grid-column: 2;
            grid-row: 1;
        }

        .msg.me .bubble {
            grid-column: 1;
            grid-row: 1;
            justify-self: end;
        }

        .msg.me .meta {
            grid-column: 1;
            grid-row: 2;
            justify-self: end;
        }

.bubble {
    position: relative;
    max-width: min(78%, 620px);
    padding: 10px 12px;
    line-height: 1.35;
    border-radius: var(--radius);
    border: 1px solid var(--panel-brd);
    background: var(--you-bg);
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Left bubble tweaks */
.msg.you .bubble {
    border-top-left-radius: 6px;
}

/* ME bubble */
.msg.me .bubble {
    color: #fff;
    border: 1px solid transparent;
    background: var(--me-bg);
    background-clip: padding-box;
    border-top-right-radius: 6px;
}

    /* Hide tails entirely (requested) */
    .msg.you .bubble::after,
    .msg.me .bubble::after {
        display: none !important;
        content: none !important;
    }

.meta {
    font-size: .75rem;
    color: var(--muted);
    margin-top: 2px;
}

/* Day separator */
.day-sep {
    display: grid;
    place-items: center;
    margin: 8px 0 12px;
}

    .day-sep > span {
        font-size: .75rem;
        color: var(--muted);
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        border: 1px solid var(--panel-brd);
    }

/* Typing dots */
.typing .bubble {
    width: auto;
    min-width: 56px;
    padding: 8px 12px;
}

.typing-dots {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    height: 12px;
}

    .typing-dots i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255,255,255,0.85);
        opacity: 0.25;
        transform: translateY(0);
        animation: typingDots 1.2s infinite;
    }

        .typing-dots i:nth-child(2) {
            animation-delay: .15s;
        }

        .typing-dots i:nth-child(3) {
            animation-delay: .3s;
        }

@keyframes typingDots {
    0% { opacity: .25; transform: translateY(0); }
    25% { opacity: 0.6; transform: translateY(-3px); }
    50% { opacity: 1; transform: translateY(0); }
    100% { opacity: .25; transform: translateY(0); }
}

/* ===== Composer ===== */
.chat-composer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--panel-brd);
    background-color: #111!important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* iOS safe-area */
}

.input {
    width: 100%;
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--panel-brd);
    color: #fff!important; /*var(--text);*/
    font-weight: bold;    
}

    .input::placeholder {
        color: color-mix(in srgb, var(--muted) 85%, white 15%);
    }

    .input:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--accent) 55%, white 15%);
        outline-offset: 1px;
    }

.send-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(135deg, var(--accent), #5a89ff);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(91,125,255,.28);
}

    .send-btn .send-ic {
        fill: currentColor;
        display: block;
    }

    .send-btn:active {
        transform: translateY(1px);
    }

    .send-btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

/* ===== Mobile tweaks ===== */
@media (max-width: 576px) {
    .chat-panel {
        border-radius: 0;
    }

    .bubble {
        max-width: 90%;
    }
}

/* Tarot embed container inside chat messages */
.tarot-embed {
    display: flex;
    justify-content: center;
    padding: 12px;
    width: 100%;
}

/* Limit visual width of tarot UI and center it */
.tarot-embed .tarot-root {
    width: min(980px, 100%);
    max-width: 100%;
    transform-origin: top center;
    transition: transform 160ms ease;
}

/* When scaled, make sure surrounding chat messages allow overflow if needed */
.chat-messages {
    overflow: auto;
}

/* Embedded tarot message wrapper */
.msg.embed {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.msg.embed .tarot-embed {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Ensure tarot-root transform originates from top center when embedded */
.msg.embed .tarot-root {
    transform-origin: top center;
}

/* --- New: adjust sizes for embedded mode --- */

/* Remove overflow:auto for embedded tarot; prefer compact rendering */
.msg.embed .tarot-root.embedded {
    width: 100%;
    max-width: 760px;
    max-height: none; /* allow natural height but compact view will be small */
    overflow: visible; /* no scrollbars */
    padding: 8px;
}

/* Embedded compact board (simplified DOM when IsEmbedded=true) */
.embedded-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 18px;
    justify-items: center;
    align-items: start;
    width: 100%;
    padding: 6px 8px;
}
.embedded-board .card-slot {
    width: 92px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    display: flex;
    align-items: center;
    justify-content: center;
}
.embedded-board img {
    width: 84px;
    height: auto;
    object-fit: cover;
}

/* Hide large controller parts when embedded to avoid taking space */
.tarot-root.embedded nav.navbar,
.tarot-root.embedded .glass,
.tarot-root.embedded .modal {
    display: none !important;
}

/* Reduce margins and paddings in embedded main content */
.tarot-root.embedded main.container {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Ensure card slot img classes adapt when embedded */
.tarot-root.embedded .card-slot .card-face {
    display: none; /* existing full UI images hidden when using compact embedded view */
}

/* Slight adjustments to bubble sizes */
.bubble { font-size: 1rem; font-size:22px!important;}
.input { font-size: 1.15rem; }


/* ===== iPad/desktop: centrera chatten och begränsa bredd ===== */
:root {
    /* Justera dessa två om du vill ha smalare/bredare */
    --chat-max-ipad: 900px; /* ~iPad liggande + små laptops */
    --chat-max-desktop: 1040px; /* större skärmar */
}

/* Från iPad-storlek och uppåt: centrera och sätt max-width */
@media (min-width: 768px) {
    .chat-root {
        /* .chat-root är redan flex (Bootstrap .d-flex), centrera innehållet horisontellt */
        justify-content: center;
        padding-inline: 16px; /* lite sid-marginal så panelen inte klistrar mot kanten */
    }

    .chat-panel {
        max-width: var(--chat-max-ipad);
        margin-inline: auto; /* centrera panelen inom .chat-root */
        width: 100%;
        height: 100%; /* behåll full höjd så composer ligger fast i botten */
    }
}

/* På ännu bredare skärmar kan vi ge panelen lite mer andrum */
@media (min-width: 1200px) {
    .chat-panel {
        max-width: var(--chat-max-desktop);
    }
}


/* === ClassicTarot.AI — glasig chat med tydlig, justerbar transparens === */

/* 1) Mjukare, halvtransparent meddelandeyta (syns mot bakgrunden/waves) */
.chat-messages {
    /* tidigare var helt opaka hex-färger; gör dem semitransparenta */
    background: linear-gradient( 180deg, rgba(10,13,18,0.82) 0%, rgba(7,10,15,0.90) 100% );
}

/* 2) Header/composer: lite ljusare glas för bättre separation */
.chat-header,
.chat-composer {
    /*background: linear-gradient( 180deg, rgba(10,13,18,0.35) 0%, rgba(10,13,18,0.20) 100% );*/
    /*backdrop-filter: blur(8px);*/
}

/* 3) Diskret inre skugga upptill i message-ytan för djup */
.chat-messages {
    box-shadow: inset 0 12px 24px rgba(0,0,0,0.24);
}

/* 4) Bubbla-kontrast: aningen ljusare text i AI-bubblan */
.msg.you .bubble {
    color: #dce4f0;
}

/* 5) Liten highlight på panelens kant så den “lyfter” från bakgrunden */
.chat-panel {
    border: 1px solid rgba(255,255,255,0.08); /* redan hos dig, men lite ljusare */
    box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(123,92,255,0.06); /* svag accentglow */
}

.chat-textarea {
    resize: none; /* disables drag handle */
    min-height: 44px; /* your desired minimum */
    max-height: 40vh; /* keep in sync with JS */
    overflow-y: hidden; /* becomes auto when max reached (set in JS) */
}


/* Dark modal that matches your chat look */
.modal.modal-dark .modal-content,
.modal .modal-content.dark {
    background: #111;
    color: #e7edf5;
    border: 1px solid var(--panel-brd);
    box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

.modal.modal-dark .modal-header,
.modal.modal-dark .modal-footer {
    border-color: var(--panel-brd);
}

/* Inputs inside modal */
.modal.modal-dark .form-control {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--panel-brd);
    color: #fff;
}

    .modal.modal-dark .form-control::placeholder {
        color: color-mix(in srgb, var(--muted) 85%, white 15%);
    }

.modal.modal-dark .form-text {
    color: var(--chat-muted);
}

/* Close button visible on dark */
.modal.modal-dark .btn-close {
    filter: invert(1) grayscale(100%);
}

/* Backdrop a bit darker */
.modal-backdrop.show {
    opacity: .65;
}


/*Enhancements*/

/* ========== COMPACT + AIRY OVERRIDES ========== */
:root {
    /* Fonts & sizing */
    --font-base: 14px; /* global (was effectively much larger) */
    --font-small: 12px;
    --avatar: 26px; /* smaller avatars */
    --radius: 12px; /* tighter corners */
    --bubble-max: 86%; /* widen bubbles on large screens */
    /* Wider panel on desktop so it doesn't feel "mobile" */
    --chat-max-ipad: 980px;
    --chat-max-desktop: 1280px;
}

/* Global text + breathing room */
body {
    font-size: var(--font-base);
    line-height: 1.45; /* more vertical air */
}

/* Header compact */
.chat-header {
    padding: 8px 12px;
}

.title {
    font-size: .95rem;
}

.sub {
    font-size: .8rem;
}

/* Avatars smaller */
.avatar {
    width: var(--avatar);
    height: var(--avatar);
    font-size: .8rem;
    box-shadow: 0 3px 12px rgba(0,0,0,.28);
}

/* Messages area: slimmer padding but wider bubbles */
.chat-messages {
    padding: 12px 12px;
    box-shadow: inset 0 10px 22px rgba(0,0,0,.22);
}

.msg {
    gap: 6px 8px;
    margin: 8px 0;
}

    .msg.you {
        grid-template-columns: var(--avatar) 1fr;
    }

    .msg.me {
        grid-template-columns: 1fr var(--avatar);
    }

/* Bubbles: smaller text, taller line-height, wider max; lighter shadow */
.bubble {
    max-width: min(var(--bubble-max), 720px);
    padding: 8px 10px;
    font-size: .92rem; /* smaller type */
    line-height: 1.5; /* easier to read */
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.msg.you .bubble {
    border-top-left-radius: 6px;
}

.msg.me .bubble {
    border-top-right-radius: 6px;
}

/* Meta/timestamps */
.meta {
    font-size: .75rem;
    margin-top: 2px;
}

/* Day separator smaller */
.day-sep {
    margin: 6px 0 10px;
}

    .day-sep > span {
        font-size: .75rem;
        padding: 3px 8px;
    }

/* Typing bubble compact */
.typing .bubble {
    min-width: 48px;
    padding: 6px 10px;
}

.typing-dots {
    gap: 5px;
    height: 10px;
}

    .typing-dots i {
        width: 5px;
        height: 5px;
    }

/* Composer: compact input + button */
.chat-composer {
    gap: 8px;
    padding: 10px 12px;
}

.input {
    padding: 10px 12px;
    font-size: .95rem;
    font-weight: 600;
}

.send-btn {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: .9rem;
    gap: 6px;
}

/* Remove the previous forced huge bubble font if it exists */
.bubble {
    font-size: .92rem !important;
}
/* overrides old 22px !important */

/* Mobile: keep bubbles roomy but not edge-to-edge */
@media (max-width: 576px) {
    .bubble {
        max-width: 92%;
    }
}

/* iPad/desktop: center and allow wider panel so it feels less "small" */
@media (min-width: 768px) {
    .chat-root {
        justify-content: center;
        padding-inline: 16px;
    }

    .chat-panel {
        max-width: var(--chat-max-ipad);
        margin-inline: auto;
    }
}

@media (min-width: 1200px) {
    .chat-panel {
        max-width: var(--chat-max-desktop);
    }
}

/* Keep the translucent feel you added */
.chat-messages {
    background: linear-gradient(180deg, rgba(10,13,18,0.82) 0%, rgba(7,10,15,0.90) 100%);
}

.chat-panel {
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(123,92,255,0.06);
}

/* === Composer input: smaller + not bold === */
.chat-composer .input,
.chat-composer textarea.input,
.chat-composer .chat-textarea {
    font-size: .9rem !important; /* smaller */
    font-weight: 400 !important; /* not bold */
    line-height: 1.4;
}

    /* Optional: slightly lighter placeholder, normal weight */
    .chat-composer .input::placeholder,
    .chat-composer .chat-textarea::placeholder {
        font-weight: 400;
        opacity: .85;
    }
    



/* ==== Celtic Cross: fixa top-gap & bredd i embedded-läge ==== */

/* ===== Celtic Cross (embedded) – layout without container scale ===== */
:root {
    --cc-card-w: clamp(78px, 9vw, 120px);
    --cc-aspect: 1.5; /* tarot card ~92x140 */
    --cc-gap: 18px;
}

/* bring it closer to the "Tarot Reading" heading */
.board-celtic {
    margin-top: 6px !important;
    padding-top: 6px !important;
}

    /* Grid for positions (5x4 cells) */
    .board-celtic .celtic-grid {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(var(--cc-card-w), 1fr));
        grid-auto-rows: calc(var(--cc-card-w) * var(--cc-aspect));
        gap: var(--cc-gap);
        justify-content: center;
        justify-items: center;
        align-items: start;
        width: 100%;
        max-width: 980px; /* same visual width as other spreads */
        margin-inline: auto;
    }

    /* Card slots (shared) */
    .board-celtic .card-slot {
        width: var(--cc-card-w);
        height: calc(var(--cc-card-w) * var(--cc-aspect));
        border-radius: 8px;
        overflow: hidden;
        position: relative; /* needed for cross overlay */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 24px rgba(0,0,0,.35);
        background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    }

        .board-celtic .card-slot img {
            width: calc(var(--cc-card-w) - 8px);
            height: auto;
            object-fit: cover;
        }

    /* Labels */
    .board-celtic .slot-label {
        margin-top: 6px;
        font-size: .8rem;
        opacity: .9;
    }

    /* ---- Positioning on the grid ----
   We use a 5x4 grid. Center of the cross is (col 3, row 2). */
    .board-celtic .cc-pos1 {
        grid-column: 3;
        grid-row: 2;
    }
    /* Present */
    .board-celtic .cc-pos5 {
        grid-column: 3;
        grid-row: 1;
    }
    /* Conscious (top) */
    .board-celtic .cc-pos3 {
        grid-column: 3;
        grid-row: 3;
    }
    /* Subconscious (bottom) */
    .board-celtic .cc-pos4 {
        grid-column: 2;
        grid-row: 2;
        left:-30px;
    }
    /* Past (left) */
    .board-celtic .cc-pos6 {
        grid-column: 4;
        grid-row: 2;
    }
    /* Near Future (right) */

    /* Crossing card: stack on top of #1 inside the same grid cell */
    .board-celtic .cc-pos2 {
        grid-column: 3;
        grid-row: 2;
    }

        .board-celtic .cc-pos2 .card-slot {
            position: absolute; /* overlay over pos1 */
            inset: 0; /* fill parent cell */
            margin: auto;
            width: var(--cc-card-w);
            height: calc(var(--cc-card-w) * var(--cc-aspect));
            pointer-events: none;
        }

        .board-celtic .cc-pos2 img.cross-rot {
            transform: rotate(90deg);
        }

    /* Right-hand column (7–10) */
    .board-celtic .cc-pos7 {
        grid-column: 5;
        grid-row: 1;
    }
    /* You */
    .board-celtic .cc-pos8 {
        grid-column: 5;
        grid-row: 2;
    }
    /* Environment */
    .board-celtic .cc-pos9 {
        grid-column: 5;
        grid-row: 3;
    }
    /* Hopes & Fears */
    .board-celtic .cc-pos10 {
        grid-column: 5;
        grid-row: 4;
    }
/* Outcome */

/* Ensure the right column doesn't squeeze on small screens */
@media (max-width: 520px) {
    .board-celtic .celtic-grid {
        grid-template-columns: repeat(3, minmax(var(--cc-card-w), 1fr));
        grid-auto-rows: calc(var(--cc-card-w) * var(--cc-aspect));
    }
    /* Stack right column under the cross on very small screens */
    .board-celtic .cc-pos7 {
        grid-column: 1;
        grid-row: 4;
    }

    .board-celtic .cc-pos8 {
        grid-column: 2;
        grid-row: 4;
    }

    .board-celtic .cc-pos9 {
        grid-column: 3;
        grid-row: 4;
    }

    .board-celtic .cc-pos10 {
        grid-column: 2;
        grid-row: 5;
    }
}