@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


:root {
    --bg: #070e1c;
    --panel: #0d1930;
    --panel-2: #101e38;
    --panel-3: #13223e;

    --border: rgba(119, 151, 213, .17);
    --border-blue: rgba(64, 124, 255, .38);

    --text: #f6f8ff;
    --muted: #8492af;
    --soft: #657490;

    --blue: #4b86ff;
    --purple: #7354ff;

    --green: #54d98a;
    --orange: #f2a158;
    --teal: #55d6c0;

    --radius-xl: 28px;
    --radius-lg: 21px;
    --radius-md: 16px;
}


* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
}


body {
    position: fixed;
    inset: 0;

    overflow: hidden;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 75% -5%,
            rgba(45, 91, 196, .14),
            transparent 30%
        ),
        var(--bg);

    color: var(--text);
}


button,
input,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


.hidden {
    display: none !important;
}


.screen {
    position: fixed;
    inset: 0;
}



/* =========================================================
   AUTH
========================================================= */

.auth-screen {
    overflow-y: auto;

    padding:
        max(50px, env(safe-area-inset-top))
        22px
        max(30px, env(safe-area-inset-bottom));

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(57, 99, 204, .18),
            transparent 35%
        ),
        var(--bg);
}


.auth-shell {
    width: min(100%, 440px);

    margin: auto;
}


.auth-brand {
    padding: 30px 4px;

    text-align: center;
}


.auth-kavi-face {
    display: flex;
    justify-content: center;

    margin-bottom: 18px;
}


.auth-kavi-face .kavi-face {
    width: 74px;
    height: 74px;
}


.auth-brand h1 {
    margin: 0;

    font-size: 42px;
    letter-spacing: -.04em;
}


.auth-brand p {
    max-width: 320px;

    margin: 12px auto 0;

    color: var(--muted);

    line-height: 1.6;
}


.auth-card {
    padding: 19px;

    border: 1px solid var(--border);
    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(16, 30, 57, .96),
            rgba(9, 19, 37, .96)
        );
}


.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 5px;

    margin-bottom: 20px;

    padding: 4px;

    border-radius: 14px;

    background: rgba(255,255,255,.035);
}


.auth-tab {
    height: 42px;

    border: 0;
    border-radius: 11px;

    background: transparent;
    color: var(--muted);
}


.auth-tab.active {
    background: #172846;
    color: white;
}


.auth-card form {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.auth-card label {
    display: flex;
    flex-direction: column;

    gap: 7px;

    color: #a8b4cb;

    font-size: 12px;
}


.auth-card input,
.name-edit input {
    width: 100%;
    height: 50px;

    padding: 0 14px;

    border: 1px solid var(--border);
    border-radius: 14px;

    outline: none;

    background: #0b162b;
    color: white;
}


.primary-button {
    height: 51px;

    margin-top: 4px;

    border: 0;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    color: white;

    font-weight: 700;
}



/* =========================================================
   APP
========================================================= */

.app {
    height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}



/* =========================================================
   HEADER
========================================================= */

.app-header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        calc(18px + env(safe-area-inset-top))
        18px
        18px;
}


.brand {
    flex: 1 1 auto;

    min-width: 0;
}


.brand strong {
    display: block;

    font-size: 35px;
    line-height: 1;

    letter-spacing: -.045em;

    font-weight: 800;
}


.brand span {
    display: block;

    margin-top: 7px;

    overflow: hidden;

    color: #8c9ab7;

    font-size: 13px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.header-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 8px;
}


.icon-button {
    width: 47px;
    height: 47px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: rgba(15, 29, 53, .86);

    color: white;
}


.kavi-button {
    border-radius: 50%;

    border-color: var(--border-blue);

    background:
        radial-gradient(
            circle,
            rgba(55, 111, 238, .18),
            #091427 72%
        );

    box-shadow:
        0 0 0 4px rgba(59, 115, 245, .045),
        0 0 21px rgba(50, 109, 244, .15);
}


.account-button {
    height: 47px;

    padding: 0 15px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: rgba(15, 29, 53, .86);

    color: #d7e0f2;

    font-size: 13px;
}



/* =========================================================
   KAVI FACE
========================================================= */

.kavi-face {
    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(83, 142, 255, .38);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 35%,
            #192d54,
            #07101e 70%
        );

    box-shadow:
        inset 0 0 12px rgba(60, 121, 252, .15);
}


.kavi-head {
    position: relative;

    width: 26px;
    height: 21px;

    border: 1px solid rgba(107, 146, 220, .19);
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            #14223c,
            #070b13
        );
}


.kavi-head i {
    position: absolute;
    top: 7px;

    width: 4px;
    height: 5px;

    border-radius: 50%;

    background: #79a9ff;

    box-shadow:
        0 0 5px #4b80ff,
        0 0 9px rgba(75, 128, 255, .8);

    animation: blink 5.5s infinite;
}


.kavi-head i:first-child {
    left: 5px;
}


.kavi-head i:nth-child(2) {
    right: 5px;
}


.kavi-head b {
    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 7px;
    height: 2px;

    transform: translateX(-50%);

    border-radius: 5px;

    background: rgba(105, 158, 255, .58);
}


@keyframes blink {
    0%,
    92%,
    96%,
    100% {
        transform: scaleY(1);
    }

    94% {
        transform: scaleY(.1);
    }
}



/* =========================================================
   BELL
========================================================= */

.bell {
    position: relative;

    width: 16px;
    height: 17px;

    border: 2px solid #afbdd6;
    border-bottom: 0;
    border-radius: 9px 9px 4px 4px;
}


.bell::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -5px;

    width: 20px;
    height: 2px;

    transform: translateX(-50%);

    border-radius: 3px;

    background: #afbdd6;
}


.bell::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -9px;

    width: 4px;
    height: 4px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #afbdd6;
}



/* =========================================================
   VIEWS
========================================================= */

.view {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding:
        0 18px
        calc(30px + env(safe-area-inset-bottom));

    -webkit-overflow-scrolling: touch;
}


.active-view {
    display: block;
}



/* =========================================================
   ASSISTANT CARD
========================================================= */

.assistant-card {
    width: 100%;

    margin: 2px 0 18px;
    padding: 14px;

    display: grid;

    grid-template-columns:
        45px
        minmax(0,1fr)
        20px;

    align-items: center;

    gap: 12px;

    border: 1px solid rgba(65, 122, 234, .25);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(15, 30, 57, .96),
            rgba(9, 20, 39, .96)
        );

    color: white;

    text-align: left;
}


.assistant-avatar .kavi-face {
    width: 43px;
    height: 43px;
}


.assistant-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.assistant-copy strong {
    font-size: 13px;
    font-weight: 650;
}


.assistant-copy > span {
    color: var(--muted);

    font-size: 10.5px;
    line-height: 1.45;
}


.chevron {
    color: #68799c;

    font-size: 25px;
    font-weight: 300;
}



/* =========================================================
   DUMP
========================================================= */

.dump-card {
    position: relative;

    min-height: 300px;

    margin-bottom: 18px;
    padding: 26px 20px 20px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(68, 127, 242, .31);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 7% -10%,
            rgba(56, 113, 237, .16),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #101f3a,
            #0a162a
        );

    box-shadow:
        0 16px 43px rgba(0,0,0,.15);
}


.dump-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(83, 147, 255, .65),
            transparent
        );
}


#dumpInput {
    flex: 1 1 auto;

    width: 100%;
    min-height: 180px;

    margin: 0;
    padding: 0;

    resize: none;

    border: 0;
    outline: 0;

    background: transparent;
    color: white;

    font-size: 23px;
    line-height: 1.4;

    font-weight: 500;
}


#dumpInput::placeholder {
    color: #61718f;
}


.dump-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.dump-tools {
    display: flex;
    gap: 9px;
}


.soft-button {
    height: 48px;

    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 1px solid rgba(113, 148, 211, .16);
    border-radius: 16px;

    background: rgba(17, 31, 56, .82);

    color: #bdc8dd;

    font-size: 13px;
}


.send-button,
#chatSend {
    width: 58px;
    height: 58px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 1px solid rgba(105, 173, 255, .68);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #397ff5,
            #5039dd
        );

    color: white;

    font-size: 27px;

    box-shadow:
        0 0 0 5px rgba(58, 124, 255, .07),
        0 0 24px rgba(51, 117, 255, .27);
}


.mic-icon {
    position: relative;

    width: 12px;
    height: 18px;

    border: 2px solid #aec2e8;
    border-radius: 8px;
}


.attach-icon {
    color: #aec2e8;

    font-size: 21px;
}



/* =========================================================
   STATUS
========================================================= */

.status-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 10px;

    margin-bottom: 28px;
}


.status-card {
    position: relative;

    min-width: 0;
    min-height: 78px;

    padding: 13px 31px 13px 13px;

    display: grid;

    grid-template-columns:
        30px
        minmax(0,1fr);

    gap: 10px;

    align-items: center;

    border: 1px solid var(--border);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 29, 54, .94),
            rgba(9, 20, 39, .94)
        );

    color: white;

    text-align: left;
}


.status-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
}


.credits-icon {
    color: #ad8cff;
    background: rgba(126, 82, 229, .13);
}


.storage-icon {
    color: #68c5ff;
    background: rgba(54, 151, 220, .12);
}


.status-copy {
    min-width: 0;
}


.status-copy small {
    display: block;

    margin-bottom: 4px;

    color: var(--muted);

    font-size: 10px;
}


.status-copy strong {
    display: block;

    overflow: hidden;

    font-size: 13px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.status-card .chevron {
    position: absolute;

    right: 11px;
    top: 50%;

    transform: translateY(-50%);
}



/* =========================================================
   SECTIONS
========================================================= */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 13px;
}


.section-header h2 {
    margin: 0;

    font-size: 21px;
    line-height: 1;

    letter-spacing: -.025em;
}


.section-header span {
    color: var(--muted);

    font-size: 11px;
}



/* =========================================================
   CATEGORIES
========================================================= */

.category-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 10px;

    margin-bottom: 28px;
}


.category-card {
    position: relative;

    min-width: 0;
    min-height: 92px;

    padding: 14px 31px 14px 52px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    gap: 5px;

    overflow: hidden;

    border: 1px solid rgba(111, 145, 207, .15);
    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 29, 54, .96),
            rgba(10, 21, 40, .96)
        );

    color: white;

    text-align: left;
}


.category-card::after {
    content: "›";

    position: absolute;

    right: 11px;
    top: 50%;

    transform: translateY(-50%);

    color: #61708f;

    font-size: 23px;
}


.category-icon {
    position: absolute;

    left: 12px;
    top: 50%;

    width: 30px;
    height: 30px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 14px;
}


.category-card strong {
    max-width: 100%;

    overflow: hidden;

    font-size: 14px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.category-card small {
    color: #7785a0;

    font-size: 11px;
}


.cat-blue {
    color: #68a0ff;
    background: rgba(62, 118, 230, .14);
}


.cat-purple {
    color: #a77cff;
    background: rgba(126, 79, 220, .14);
}


.cat-green {
    color: #67dc91;
    background: rgba(63, 179, 104, .12);
}


.cat-orange {
    color: #f1a15b;
    background: rgba(215, 129, 48, .12);
}


.cat-teal {
    color: #59d8bf;
    background: rgba(50, 182, 151, .12);
}



/* =========================================================
   ITEMS
========================================================= */

.recent-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.item-card {
    width: 100%;

    padding: 13px 14px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap: 10px;

    border: 1px solid rgba(111, 145, 207, .14);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 28, 52, .94),
            rgba(10, 20, 39, .95)
        );

    color: white;

    text-align: left;
}


.item-main {
    min-width: 0;
}


.item-main strong {
    display: block;

    overflow: hidden;

    font-size: 13px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.item-main small {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 10px;
}


.item-type {
    align-self: center;

    padding: 5px 8px;

    border: 1px solid var(--border);
    border-radius: 10px;

    color: #91a0bf;

    font-size: 9px;
}



/* =========================================================
   VIEW HEADER / DETAIL
========================================================= */

.view-header {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}


.back-button {
    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: #0e1b31;
    color: white;

    font-size: 20px;
}


.view-header small {
    color: var(--muted);

    font-size: 10px;
}


.view-header h2 {
    margin: 2px 0 0;

    font-size: 21px;
}


.detail-card {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #101e37,
            #0a162a
        );
}


.detail-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 17px;
}


.meta-chip {
    padding: 6px 8px;

    border-radius: 9px;

    background: rgba(255,255,255,.04);

    color: var(--muted);

    font-size: 9px;
}


.detail-content {
    color: #d8dfef;

    font-size: 13px;
    line-height: 1.65;

    white-space: pre-wrap;
}


.detail-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;
}


.detail-actions button {
    height: 42px;

    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: #14223d;
    color: white;
}



/* =========================================================
   OVERLAYS
========================================================= */

.overlay {
    position: fixed;
    inset: 0;

    z-index: 10000;

    padding:
        max(12px, env(safe-area-inset-top))
        12px
        max(12px, env(safe-area-inset-bottom));

    display: flex;
    align-items: flex-end;
    justify-content: center;

    background: rgba(2, 7, 17, .68);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.chat-panel,
.account-panel {
    width: min(100%, 540px);

    border: 1px solid rgba(78, 130, 232, .24);
    border-radius: 27px;

    background:
        radial-gradient(
            circle at 85% 0,
            rgba(49, 96, 201, .12),
            transparent 35%
        ),
        #0a1529;

    box-shadow:
        0 30px 100px rgba(0,0,0,.56);
}


.chat-panel {
    height:
        calc(
            100dvh
            - max(28px, env(safe-area-inset-top))
            - max(28px, env(safe-area-inset-bottom))
        );

    max-height: 760px;

    display: grid;
    grid-template-rows:
        auto minmax(0,1fr) auto;

    overflow: hidden;
}


.chat-header,
.panel-header {
    min-height: 75px;

    padding: 15px 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    border-bottom: 1px solid rgba(119,151,213,.10);
}


.chat-person {
    display: flex;
    align-items: center;

    gap: 11px;
}


.chat-person small,
.panel-header small {
    display: block;

    margin-bottom: 3px;

    color: var(--soft);

    font-size: 9px;
    letter-spacing: .14em;
}


.chat-person strong,
.panel-header strong {
    font-size: 14px;
}


.close-button {
    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: rgba(255,255,255,.04);
    color: white;

    font-size: 26px;
}


.conversation {
    min-height: 0;

    padding: 16px;

    display: flex;
    flex-direction: column;

    gap: 9px;

    overflow-y: auto;
}


.chat-message {
    width: fit-content;
    max-width: 86%;

    padding: 10px 13px;

    border-radius: 16px;

    font-size: 13px;
    line-height: 1.5;
}


.chat-assistant {
    align-self: flex-start;

    background: rgba(255,255,255,.06);
}


.chat-user {
    align-self: flex-end;

    background: #192b4d;
}


.chat-input-row {
    padding:
        12px
        13px
        max(12px, env(safe-area-inset-bottom));

    display: grid;

    grid-template-columns:
        minmax(0,1fr) 52px;

    align-items: center;

    gap: 8px;

    border-top: 1px solid rgba(119,151,213,.10);
}


.chat-input-row input {
    width: 100%;
    height: 51px;

    padding: 0 14px;

    border: 1px solid var(--border);
    border-radius: 15px;

    outline: 0;

    background: #111f38;
    color: white;

    font-size: 16px;
}


#chatSend {
    width: 51px;
    height: 51px;
}



/* =========================================================
   ACCOUNT PANEL
========================================================= */

.account-panel {
    max-height: 85dvh;

    overflow-y: auto;
}


.account-content {
    padding: 17px;
}


.account-row {
    padding: 15px 0;

    border-bottom: 1px solid rgba(119,151,213,.09);
}


.account-row > span {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 10px;
}


.account-row strong {
    font-size: 13px;
}


.name-edit {
    display: grid;

    grid-template-columns:
        minmax(0,1fr) auto;

    gap: 8px;
}


.name-edit button {
    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: #152642;
    color: white;
}


.logout-button {
    width: 100%;
    height: 48px;

    margin-top: 20px;

    border: 1px solid rgba(255, 111, 130, .2);
    border-radius: 14px;

    background: rgba(166, 48, 67, .12);
    color: #ff9caa;
}



/* =========================================================
   MESSAGES
========================================================= */

.form-message {
    min-height: 0;

    margin-top: 8px;

    color: #8f9db9;

    font-size: 10px;
}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .app-header {
        padding-left: 15px;
        padding-right: 15px;

        gap: 7px;
    }


    .brand strong {
        font-size: 31px;
    }


    .brand span {
        font-size: 11px;
    }


    .icon-button {
        width: 42px;
        height: 42px;
    }


    .account-button {
        height: 42px;

        padding: 0 11px;
    }


    .view {
        padding-left: 15px;
        padding-right: 15px;
    }


    .dump-card {
        min-height: 270px;
    }


    .soft-button {
        padding: 0 12px;
    }

}


/* =========================================================
   DETAIL MEDIA + ACTIONS
========================================================= */

.detail-image-wrap {
    width: 100%;

    margin-bottom: 16px;

    overflow: hidden;

    border: 1px solid rgba(119,151,213,.14);
    border-radius: 18px;

    background: #07101f;
}


.detail-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 48dvh;

    object-fit: contain;

    background: #07101f;
}


.detail-text {
    margin-top: 14px;

    color: #d8dfef;

    font-size: 13px;
    line-height: 1.65;

    white-space: pre-wrap;
}


.detail-action {
    min-height: 44px;

    padding: 0 14px !important;

    border: 1px solid rgba(119,151,213,.18) !important;
    border-radius: 14px !important;

    background: #14223d !important;

    color: #e8eefc !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}


.detail-action-primary {
    border-color: rgba(80,142,255,.42) !important;

    background:
        linear-gradient(
            135deg,
            #327cf2,
            #513add
        ) !important;

    color: white !important;

    box-shadow:
        0 0 20px rgba(55,115,245,.15);
}



/* =========================================================
   KAVI FILE PREVIEW
========================================================= */

.document-preview {
    width: 100%;

    margin-bottom: 18px;

    overflow: hidden;

    border:
        1px solid rgba(119,151,213,.16);

    border-radius: 19px;

    background: #081224;
}


.document-preview-head {
    min-height: 55px;

    padding: 11px 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-bottom:
        1px solid rgba(119,151,213,.12);

    background:
        linear-gradient(
            145deg,
            rgba(17,31,57,.96),
            rgba(10,21,40,.96)
        );
}


.document-type {
    min-width: 40px;
    height: 30px;

    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        rgba(84,91,255,.15);

    color: #aa9aff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .04em;
}


.document-name {
    min-width: 0;

    overflow: hidden;

    color: #eef3ff;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.pdf-preview {
    display: block;

    width: 100%;
    height: min(55dvh, 520px);

    border: 0;

    background: white;
}


.file-ai-label {
    margin:
        20px 0
        8px;

    color: #7182a4;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.document-file-card {
    position: relative;

    width: 100%;

    min-height: 83px;

    margin-bottom: 18px;

    padding:
        13px 37px
        13px 13px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0,1fr);

    align-items: center;

    gap: 12px;

    border:
        1px solid rgba(119,151,213,.16);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(16,30,56,.96),
            rgba(9,20,39,.96)
        );

    color: white;

    text-align: left;
}


.document-file-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(73,130,255,.18),
            rgba(113,78,255,.13)
        );

    color: #88adff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .04em;
}


.document-file-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.document-file-copy strong {
    overflow: hidden;

    color: #f2f5ff;

    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.document-file-copy small {
    color: #7c8aa7;

    font-size: 10px;
}


.document-file-arrow {
    position: absolute;

    right: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: #677899;

    font-size: 24px;
}



/* =========================================================
   DOCUMENT VIEWER
========================================================= */

.document-viewer {
    position: fixed;
    inset: 0;

    z-index: 20000;

    display: grid;

    grid-template-rows:
        auto
        minmax(0,1fr);

    background: #07101f;
}


.document-viewer-bar {
    min-height: 66px;

    padding:
        calc(12px + env(safe-area-inset-top))
        16px
        12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border-bottom:
        1px solid rgba(119,151,213,.14);

    background:
        rgba(9,20,39,.98);
}


.document-viewer-bar strong {
    min-width: 0;

    overflow: hidden;

    color: #f5f7ff;

    font-size: 13px;
    font-weight: 650;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.document-viewer-close {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(119,151,213,.20);

    border-radius: 50%;

    background:
        rgba(255,255,255,.05);

    color: white;

    font-size: 27px;
    line-height: 1;
}


.document-viewer-frame {
    width: 100%;
    height: 100%;

    border: 0;

    background: white;
}


/* kleine previewkaart */

.pdf-preview-button {
    position: relative;

    width: 100%;

    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius: 0 0 18px 18px;

    background: transparent;

    text-align: left;
}


.pdf-preview-button .pdf-preview {
    pointer-events: none;
}


.pdf-preview-open {
    position: absolute;

    left: 50%;
    bottom: 14px;

    transform: translateX(-50%);

    padding: 9px 13px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 12px;

    background:
        rgba(7,16,31,.84);

    color: white;

    font-size: 11px;
    font-weight: 600;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}



/* =========================================================
   KAVI ITEM TRASH
========================================================= */

.kavi-item-card {
    position: relative;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        48px !important;

    align-items: stretch;

    overflow: hidden;
}


.item-open {
    min-width: 0;
    min-height: 70px;

    padding: 13px 8px 13px 14px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 10px;

    border: 0;

    background: transparent;

    color: inherit;

    text-align: left;
}


.item-trash {
    width: 48px;
    min-height: 100%;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-left:
        1px solid rgba(119,151,213,.08);

    background: transparent;

    -webkit-tap-highlight-color:
        transparent;
}


/* simpele premium prullenbak zonder emoji */

.trash-icon {
    position: relative;

    width: 14px;
    height: 15px;

    display: block;

    border:
        1.6px solid #71809d;

    border-top: 0;

    border-radius:
        0 0 4px 4px;
}


.trash-icon::before {
    content: "";

    position: absolute;

    left: -3px;
    top: -5px;

    width: 18px;
    height: 2px;

    border-radius: 3px;

    background: #71809d;
}


.trash-icon::after {
    content: "";

    position: absolute;

    left: 4px;
    top: -8px;

    width: 6px;
    height: 3px;

    border:
        1.5px solid #71809d;

    border-bottom: 0;

    border-radius:
        3px 3px 0 0;
}


.trash-icon span::before,
.trash-icon span::after {
    content: "";

    position: absolute;

    top: 3px;

    width: 1px;
    height: 7px;

    background: #71809d;
}


.trash-icon span::before {
    left: 4px;
}


.trash-icon span::after {
    right: 4px;
}


.item-trash:active {
    background:
        rgba(180,55,73,.10);
}


.item-trash:active .trash-icon {
    border-color: #ff8495;
}


.item-trash:active .trash-icon::before,
.item-trash:active .trash-icon span::before,
.item-trash:active .trash-icon span::after {
    background: #ff8495;
}


.item-trash:active .trash-icon::after {
    border-color: #ff8495;
}


.item-card-removing {
    opacity: 0;

    transform:
        translateX(12px);

    transition:
        opacity .16s ease,
        transform .16s ease;
}


.item-card-empty {
    padding: 13px 14px !important;

    display: block !important;
}



/* =========================================================
   KAVI IMAGE VIEWER FIX
========================================================= */

.document-viewer-bar {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}

.document-viewer-close {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    touch-action: manipulation;
}

.document-viewer-body {
    position: relative;
    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #07101f;
}

.document-viewer-frame {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    border: 0;
}

.document-viewer-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    margin: auto;

    user-select: none;
    -webkit-user-select: none;

    -webkit-touch-callout: none;
}

.document-viewer-image.hidden,
.document-viewer-frame.hidden {
    display: none !important;
}



/* =========================================================
   KAVI VIEWER CLOSE FIX
========================================================= */

.document-viewer.hidden {
    display: none !important;
}

.document-viewer-bar {
    position: relative !important;
    z-index: 100001 !important;
    pointer-events: auto !important;
}

.document-viewer-close {
    position: relative !important;
    z-index: 100002 !important;

    pointer-events: auto !important;
    touch-action: manipulation !important;

    cursor: pointer;
}

.document-viewer-body,
.document-viewer-image {
    z-index: 1;
}



/* =========================================================
   KAVI DUMP TOOLS MOBILE FIT
========================================================= */

.dump-actions {
    width: 100%;
    min-width: 0;
    gap: 8px;
}

.dump-tools {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
}

.dump-tools .soft-button {
    min-width: 0;
    height: 44px;

    padding-left: 10px;
    padding-right: 10px;

    gap: 5px;

    font-size: 12px;

    white-space: nowrap;
}

.send-button {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
}



/* =========================================================
   KAVI COMPACT HOME
   Alleen startscherm
========================================================= */

/* Kavi kaart compacter */
#homeView .assistant-card {
    min-height: 60px;
    margin-bottom: 9px;
    padding: 9px 12px;
    border-radius: 17px;
}

#homeView .assistant-copy {
    gap: 2px;
}

#homeView .assistant-copy > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* Dumpbox veel kleiner */
#homeView .dump-card {
    min-height: 148px !important;
    height: 148px;

    margin-bottom: 9px;
    padding: 13px 13px 11px;

    border-radius: 20px;
}

#homeView #dumpInput {
    min-height: 65px;
    height: 65px;

    font-size: 18px;
    line-height: 1.35;
}


/* Acties compact houden */
#homeView .dump-actions {
    gap: 7px;
}

#homeView .dump-tools {
    gap: 5px;
}

#homeView .dump-tools .soft-button {
    height: 40px;

    padding-left: 8px;
    padding-right: 8px;

    font-size: 11px;
}

#homeView .send-button {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
}


/* Credits + opslag lager */
#homeView .status-grid {
    gap: 7px;
    margin-bottom: 12px;
}

#homeView .status-card {
    min-height: 58px;
    padding-top: 8px;
    padding-bottom: 8px;
}


/* Categorie titel */
#homeView .section-header {
    margin-bottom: 8px;
}

#homeView .section-header h2 {
    font-size: 17px;
}


/* 3 compacte categorieën naast elkaar */
#homeView .category-grid {
    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 6px;
    margin-bottom: 10px;
}

#homeView .category-card {
    min-height: 57px;

    padding: 6px 15px 6px 6px;

    align-items: center;
    justify-content: center;

    gap: 3px;

    border-radius: 14px;

    text-align: center;
}

#homeView .category-icon {
    position: static;

    width: 23px;
    height: 23px;

    transform: none;

    border-radius: 8px;

    font-size: 11px;
}

#homeView .category-card strong {
    width: 100%;

    font-size: 11px;

    text-align: center;
}

#homeView .category-card small {
    display: none;
}

#homeView .category-card::after {
    right: 5px;
    font-size: 16px;
}


/* Oude recente lijst niet meer op home tonen */
#homeView .home-recent-cache {
    display: none !important;
}


/* Recente items = één knop */
#homeView .recent-button {
    width: 100%;
    min-height: 50px;

    padding: 8px 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border:
        1px solid rgba(111,145,207,.15);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.96),
            rgba(10,21,40,.96)
        );

    color: white;

    text-align: left;
}

.recent-button-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.recent-button-copy strong {
    font-size: 13px;
}

.recent-button-copy small {
    color: #7785a0;
    font-size: 10px;
}


/* =========================================================
   RECENTE ITEMS PANEEL
========================================================= */

.recent-panel {
    width: 100%;
    max-width: 560px;

    height: min(82dvh, 760px);

    display: grid;
    grid-template-rows:
        auto minmax(0,1fr);

    overflow: hidden;

    border:
        1px solid rgba(111,145,207,.16);

    border-radius: 24px 24px 18px 18px;

    background: #081426;
}

.recent-overlay-list {
    min-height: 0;

    padding: 12px;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}


/* Zeer kleine iPhone: ook hier dumpbox niet weer groot maken */
@media (max-width: 390px) {

    #homeView .dump-card {
        min-height: 142px !important;
        height: 142px;
    }

    #homeView #dumpInput {
        min-height: 60px;
        height: 60px;
    }

}



/* =========================================================
   KAVI SMART HOME — 12 VASTE POSITIES
========================================================= */

#homeView .home-grid-header {
    margin: 0 0 7px;
}

#homeView .home-grid-header h2 {
    font-size: 16px;
}


/* 4 x 3 */
#homeView .home-smart-grid {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 6px;

    margin: 0;
}


#homeView .home-smart-tile {
    position: relative;

    min-width: 0;
    height: 64px;

    padding: 6px 3px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;

    overflow: hidden;

    border:
        1px solid rgba(111,145,207,.15);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.96),
            rgba(10,21,40,.96)
        );

    color: white;

    text-align: center;
}


#homeView .home-smart-icon,
.all-categories-grid .home-smart-icon {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 24px;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 700;
}


#homeView .home-smart-tile strong,
.all-categories-grid .home-smart-tile strong {
    display: block;

    width: 100%;

    overflow: hidden;

    font-size: 9px;
    line-height: 1.05;

    white-space: nowrap;
    text-overflow: ellipsis;
}


#homeView .home-smart-tile small,
.all-categories-grid .home-smart-tile small {
    position: absolute;

    top: 4px;
    right: 5px;

    min-width: 14px;
    height: 14px;

    padding: 0 3px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
        rgba(255,255,255,.06);

    color: #7d8ba6;

    font-size: 8px;
}


/* oude home categorieën definitief weg */
#homeView #categories,
#homeView .recent-button,
#homeView .home-recent-cache,
#homeView .home-hidden-count {
    display: none !important;
}


/* Alles-scherm */
.all-categories-grid {
    min-height: 0;

    padding: 12px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 8px;

    overflow-y: auto;
}


.all-categories-grid .home-smart-tile {
    position: relative;

    min-width: 0;
    height: 68px;

    padding: 7px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    border:
        1px solid rgba(111,145,207,.15);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.96),
            rgba(10,21,40,.96)
        );

    color: white;
}


@media (max-width: 390px) {

    #homeView .home-smart-grid {
        gap: 5px;
    }

    #homeView .home-smart-tile {
        height: 60px;
    }

    #homeView .home-smart-tile strong {
        font-size: 8.5px;
    }
}



/* =========================================================
   KAVI HOME — FINAL POLISH
========================================================= */

/* chat-gezicht uit header weg
   assistantCard boven de dump blijft bestaan */
#chatButton {
    display: none !important;
}


/* iets meer ruimte in de header nu chat-knop weg is */
.app-header .header-actions {
    gap: 9px;
}


/* titel boven categorieën duidelijker */
#homeView .home-grid-header h2 {
    font-size: 18px !important;
    line-height: 1.2;
}


/* 12 tegels benutten de beschikbare hoogte beter */
#homeView .home-smart-grid {
    gap: 8px !important;
}


/* grotere tegels */
#homeView .home-smart-tile {
    height: 76px !important;
    padding: 8px 4px !important;
    gap: 5px !important;
    border-radius: 16px !important;
}


/* grotere iconen */
#homeView .home-smart-icon {
    width: 29px !important;
    height: 29px !important;
    flex-basis: 29px !important;
    font-size: 13px !important;
}


/* categorienaam veel beter leesbaar */
#homeView .home-smart-tile strong {
    font-size: 11px !important;
    line-height: 1.15 !important;
}


/* telling rechtsboven */
#homeView .home-smart-tile small {
    min-width: 17px !important;
    height: 17px !important;
    font-size: 9px !important;
}


/* ALLE CATEGORIEËN ook beter leesbaar */
.all-categories-grid {
    align-content: start !important;
    gap: 9px !important;
}

.all-categories-grid .home-smart-tile {
    height: 76px !important;
}

.all-categories-grid .home-smart-tile strong {
    font-size: 12px !important;
    line-height: 1.15 !important;
}

.all-categories-grid .home-smart-icon {
    width: 29px !important;
    height: 29px !important;
    flex-basis: 29px !important;
    font-size: 13px !important;
}


/* ook kleine iPhones niet terug naar piepkleine tegels */
@media (max-width: 390px) {

    #homeView .home-smart-tile {
        height: 72px !important;
    }

    #homeView .home-smart-tile strong {
        font-size: 10.5px !important;
    }
}



/* =========================================================
   KAVI HOME — MEER RUIMTE TUSSEN SECTIES
========================================================= */

#homeView .assistant-card {
    margin-bottom: 14px !important;
}

#homeView .dump-card {
    margin-bottom: 14px !important;
}

#homeView .status-grid {
    margin-bottom: 16px !important;
}

#homeView .home-grid-header {
    margin-top: 2px !important;
    margin-bottom: 10px !important;
}



/* =========================================================
   KAVI GLOBAL FOOTER
========================================================= */

.kavi-global-footer {
    width: 100%;

    margin-top: 24px;
    padding: 22px 12px 18px;

    text-align: center;

    border-top:
        1px solid rgba(125,151,202,.12);

    background:
        linear-gradient(
            180deg,
            rgba(8,17,32,0),
            rgba(8,17,32,.55)
        );
}


.kavi-footer-brand {
    margin-bottom: 8px;

    color: #f4f7ff;

    font-size: 28px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: -.04em;
}


.kavi-footer-copy {
    color: #77869f;

    font-size: 11px;
    line-height: 1.5;
}


.kavi-footer-powered {
    margin-top: 5px;

    color: #5f6f88;

    font-size: 10px;
    line-height: 1.5;
}


.kavi-footer-powered strong {
    color: #94a2ba;
    font-weight: 600;
}


.kavi-footer-powered span {
    margin: 0 5px;
    opacity: .55;
}



/* =========================================================
   KAVI GLOBAL FOOTER — APP LAYOUT FIX
========================================================= */

.kavi-global-footer {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin-top: 10px !important;

    padding:
        12px
        12px
        calc(10px + env(safe-area-inset-bottom))
        !important;

    text-align: center;

    border-top:
        1px solid rgba(125,151,202,.12);
}

.kavi-footer-brand {
    margin-bottom: 5px !important;

    font-size: 24px !important;
    line-height: 1 !important;

    font-weight: 750;
}

.kavi-footer-copy {
    font-size: 10px !important;
    line-height: 1.35 !important;
}

.kavi-footer-powered {
    margin-top: 3px !important;

    font-size: 9px !important;
    line-height: 1.35 !important;
}



/* =========================================================
   KAVI FOOTER — COMPACTER
========================================================= */

.kavi-global-footer {
    margin-top: 6px !important;

    padding:
        8px
        12px
        calc(7px + env(safe-area-inset-bottom))
        !important;
}

.kavi-footer-brand {
    margin-bottom: 3px !important;
    font-size: 22px !important;
}

.kavi-footer-copy {
    font-size: 9.5px !important;
}

.kavi-footer-powered {
    margin-top: 2px !important;
    font-size: 8.5px !important;
}



/* =========================================================
   KAVI FOOTER — ONDERAAN APP FRAME
========================================================= */

.app {
    position: relative !important;
}


/* footer neemt geen hoogte meer weg van de app-content */
.kavi-global-footer {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 5;

    margin: 0 !important;

    padding:
        5px
        10px
        calc(5px + env(safe-area-inset-bottom))
        !important;

    background:
        linear-gradient(
            180deg,
            rgba(8,17,32,.15),
            rgba(8,17,32,.98)
        );
}


/* Kavi mag weer iets duidelijker */
.kavi-footer-brand {
    font-size: 20px !important;
    margin: 0 0 2px !important;
}

.kavi-footer-copy {
    font-size: 9px !important;
}

.kavi-footer-powered {
    font-size: 8.5px !important;
    margin-top: 2px !important;
}



/* =========================================================
   KAVI — DEFINITIEVE APP FRAME + BOTTOM FOOTER
========================================================= */

/*
 * Hele app bestaat uit:
 * header
 * actieve view
 * footer
 */
.app {
    position: relative !important;

    height: 100dvh !important;
    min-height: 100dvh !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* Header blijft bovenin */
.app-header {
    flex: 0 0 auto !important;
}


/*
 * Alleen de actieve pagina neemt
 * alle vrije ruimte in beslag.
 */
.view {
    flex: 1 1 0 !important;

    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding-bottom:
        12px !important;
}


/*
 * Footer is nu de echte onderste rij
 * van het app-frame.
 *
 * BELANGRIJK:
 * hiermee overschrijven we de eerdere
 * position:absolute footer.
 */
.kavi-global-footer {
    position: static !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        7px
        12px
        calc(7px + env(safe-area-inset-bottom))
        !important;

    border-top:
        1px solid rgba(125,151,202,.12);

    background:
        #081120 !important;

    text-align: center;

    z-index: auto !important;
}


/* Kavi blijft duidelijk aanwezig */
.kavi-footer-brand {
    margin: 0 0 2px !important;

    font-size: 20px !important;
    line-height: 1 !important;

    font-weight: 750 !important;
}


/* Copyright */
.kavi-footer-copy {
    margin: 0 !important;

    font-size: 9px !important;
    line-height: 1.2 !important;
}


/* Powered by */
.kavi-footer-powered {
    margin: 2px 0 0 !important;

    font-size: 8.5px !important;
    line-height: 1.2 !important;
}



/* =========================================================
   KAVI — FOOTER / HOME FIT FIX
========================================================= */

/* footer echt laag houden */
.kavi-global-footer {
    padding:
        4px
        10px
        calc(4px + env(safe-area-inset-bottom))
        !important;

    margin: 0 !important;
}

.kavi-footer-brand {
    margin: 0 0 1px !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

.kavi-footer-copy {
    font-size: 8px !important;
    line-height: 1.1 !important;
}

.kavi-footer-powered {
    margin-top: 1px !important;
    font-size: 7.5px !important;
    line-height: 1.1 !important;
}


/* home gebruikt de beschikbare ruimte efficiënter */
#homeView {
    padding-bottom: 4px !important;
}


/* onderste rij niet tegen footer aan */
#homeView .home-smart-grid {
    margin-bottom: 4px !important;
}



/* =========================================================
   KAVI — DUMP BOX KLEINER
========================================================= */

#homeView .dump-card {
    min-height: 122px !important;
    height: 122px !important;
}

#homeView #dumpInput {
    min-height: 48px !important;
    height: 48px !important;
}

#homeView .dump-actions {
    margin-top: 4px !important;
}



/* =========================================================
   KAVI LIVE FACE — EMOTIES
========================================================= */

#assistantCard .kavi-face {
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

#assistantCard .kavi-head i,
#assistantCard .kavi-head b {
    transition:
        all .22s ease;
}


/* RUSTIG / NORMAAL */
#assistantCard .kavi-state-idle {
    transform: scale(1);
}


/* LUISTEREN — grote alerte ogen */
#assistantCard .kavi-state-listening {
    border-color:
        rgba(83, 175, 255, .7);

    box-shadow:
        inset 0 0 14px rgba(60,121,252,.2),
        0 0 18px rgba(58,137,255,.2);

    transform: scale(1.04);
}

#assistantCard .kavi-state-listening .kavi-head i {
    animation: none !important;

    width: 5px;
    height: 7px;

    background: #8fd4ff;

    box-shadow:
        0 0 6px #56a9ff,
        0 0 12px rgba(86,169,255,.85);
}

#assistantCard .kavi-state-listening .kavi-head b {
    width: 5px;
    height: 4px;

    border-radius: 50%;

    background: rgba(117,187,255,.72);
}


/* DENKEN — één oog iets smaller */
#assistantCard .kavi-state-thinking .kavi-head i {
    animation: none !important;
}

#assistantCard .kavi-state-thinking .kavi-head i:first-child {
    height: 3px;
    top: 8px;
}

#assistantCard .kavi-state-thinking .kavi-head i:nth-child(2) {
    height: 6px;
    top: 6px;
}

#assistantCard .kavi-state-thinking .kavi-head b {
    width: 5px;
    transform:
        translateX(-50%)
        rotate(-8deg);
}


/* BEZIG / ANALYSEREN — subtiele puls */
#assistantCard .kavi-state-working {
    animation:
        kaviWorkingPulse
        1.15s ease-in-out infinite;
}

#assistantCard .kavi-state-working .kavi-head i {
    animation: none !important;

    background: #9b8cff;

    box-shadow:
        0 0 6px #775cff,
        0 0 11px rgba(119,92,255,.75);
}


/* KLAAR — glimlach */
#assistantCard .kavi-state-done {
    border-color:
        rgba(88, 211, 166, .5);

    box-shadow:
        inset 0 0 13px rgba(62,191,144,.13),
        0 0 15px rgba(62,191,144,.12);
}

#assistantCard .kavi-state-done .kavi-head i {
    animation: none !important;

    height: 4px;
}

#assistantCard .kavi-state-done .kavi-head b {
    width: 9px;
    height: 5px;

    bottom: 3px;

    border-bottom:
        2px solid rgba(115,225,185,.85);

    border-radius:
        0 0 10px 10px;

    background: transparent;
}


/* FOUT / BEZORGD */
#assistantCard .kavi-state-error {
    border-color:
        rgba(255, 115, 125, .45);

    box-shadow:
        inset 0 0 12px rgba(255,88,101,.1);
}

#assistantCard .kavi-state-error .kavi-head i {
    animation: none !important;

    height: 3px;
    top: 8px;
}

#assistantCard .kavi-state-error .kavi-head b {
    width: 9px;
    height: 5px;

    bottom: 1px;

    border-top:
        2px solid rgba(255,139,148,.76);

    border-radius:
        10px 10px 0 0;

    background: transparent;
}


#chatOverlay .kavi-face {
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

#chatOverlay .kavi-head i,
#chatOverlay .kavi-head b {
    transition:
        all .22s ease;
}


/* RUSTIG / NORMAAL */
#chatOverlay .kavi-state-idle {
    transform: scale(1);
}


/* LUISTEREN — grote alerte ogen */
#chatOverlay .kavi-state-listening {
    border-color:
        rgba(83, 175, 255, .7);

    box-shadow:
        inset 0 0 14px rgba(60,121,252,.2),
        0 0 18px rgba(58,137,255,.2);

    transform: scale(1.04);
}

#chatOverlay .kavi-state-listening .kavi-head i {
    animation: none !important;

    width: 5px;
    height: 7px;

    background: #8fd4ff;

    box-shadow:
        0 0 6px #56a9ff,
        0 0 12px rgba(86,169,255,.85);
}

#chatOverlay .kavi-state-listening .kavi-head b {
    width: 5px;
    height: 4px;

    border-radius: 50%;

    background: rgba(117,187,255,.72);
}


/* DENKEN — één oog iets smaller */
#chatOverlay .kavi-state-thinking .kavi-head i {
    animation: none !important;
}

#chatOverlay .kavi-state-thinking .kavi-head i:first-child {
    height: 3px;
    top: 8px;
}

#chatOverlay .kavi-state-thinking .kavi-head i:nth-child(2) {
    height: 6px;
    top: 6px;
}

#chatOverlay .kavi-state-thinking .kavi-head b {
    width: 5px;
    transform:
        translateX(-50%)
        rotate(-8deg);
}


/* BEZIG / ANALYSEREN — subtiele puls */
#chatOverlay .kavi-state-working {
    animation:
        kaviWorkingPulse
        1.15s ease-in-out infinite;
}

#chatOverlay .kavi-state-working .kavi-head i {
    animation: none !important;

    background: #9b8cff;

    box-shadow:
        0 0 6px #775cff,
        0 0 11px rgba(119,92,255,.75);
}


/* KLAAR — glimlach */
#chatOverlay .kavi-state-done {
    border-color:
        rgba(88, 211, 166, .5);

    box-shadow:
        inset 0 0 13px rgba(62,191,144,.13),
        0 0 15px rgba(62,191,144,.12);
}

#chatOverlay .kavi-state-done .kavi-head i {
    animation: none !important;

    height: 4px;
}

#chatOverlay .kavi-state-done .kavi-head b {
    width: 9px;
    height: 5px;

    bottom: 3px;

    border-bottom:
        2px solid rgba(115,225,185,.85);

    border-radius:
        0 0 10px 10px;

    background: transparent;
}


/* FOUT / BEZORGD */
#chatOverlay .kavi-state-error {
    border-color:
        rgba(255, 115, 125, .45);

    box-shadow:
        inset 0 0 12px rgba(255,88,101,.1);
}

#chatOverlay .kavi-state-error .kavi-head i {
    animation: none !important;

    height: 3px;
    top: 8px;
}

#chatOverlay .kavi-state-error .kavi-head b {
    width: 9px;
    height: 5px;

    bottom: 1px;

    border-top:
        2px solid rgba(255,139,148,.76);

    border-radius:
        10px 10px 0 0;

    background: transparent;
}




@keyframes kaviWorkingPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.055);
    }
}



/* =========================================================
   KAVI HOME — 8 CONSUMENTENCATEGORIEËN
========================================================= */

#homeView .home-smart-grid {
    gap: 7px !important;
}

#homeView .home-smart-tile {
    height: 64px !important;
    padding: 5px 4px !important;
    gap: 3px !important;
    border-radius: 14px !important;
}

#homeView .home-smart-icon {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
}

#homeView .home-smart-tile strong {
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 650 !important;
}

#homeView .home-smart-tile small {
    min-width: 15px !important;
    height: 15px !important;
    font-size: 8px !important;
}

@media (max-width:390px) {

    #homeView .home-smart-tile {
        height: 62px !important;
    }

    #homeView .home-smart-tile strong {
        font-size: 12.5px !important;
    }
}


/* =========================================================
   KAVI HOME — LEESBAARHEID POLISH
========================================================= */

/* begroeting */
.app-header .greeting,
.app-header .header-greeting,
#homeView .greeting {
    font-size: 17px !important;
    line-height: 1.35 !important;
    color: #9aa9c4 !important;
}

/* Kavi statuskaart */
#assistantCard .assistant-copy strong {
    font-size: 16px !important;
    line-height: 1.25 !important;
}

#assistantCard .assistant-copy > span {
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: #9eabc2 !important;
}

/* dump placeholder */
#dumpInput,
#dumpInput::placeholder {
    font-size: 16px !important;
}

/* Voice / Attach / Scan */
#homeView .dump-actions button,
#homeView .dump-actions .soft-button {
    font-size: 14px !important;
}

/* AI credits / opslag labels */
#homeView .status-card small,
#homeView .status-card .label,
#homeView .status-grid small {
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: #9aa8c0 !important;
}

/* AI credits / opslag waarden */
#homeView .status-card strong,
#homeView .status-grid strong {
    font-size: 17px !important;
    line-height: 1.15 !important;
}

/* Snel naar */
#homeView .home-grid-header h2 {
    font-size: 18px !important;
    line-height: 1.2 !important;
}

/* categorienamen */
#homeView .home-smart-tile strong {
    font-size: 13.5px !important;
    line-height: 1.1 !important;
}

/* tellers bewust klein maar wel leesbaar */
#homeView .home-smart-tile small {
    font-size: 9px !important;
    color: #9aa8c0 !important;
}

/* footer bewust klein houden */
.kavi-global-footer {
    font-size: 10px !important;
    line-height: 1.25 !important;
}


/* =========================================================
   KAVI — GLOBAAL TYPOGRAFIESYSTEEM
========================================================= */

/* Basis */
html,
body,
button,
input,
textarea,
select {
    font-family: inherit !important;
}

body {
    font-size: 15px !important;
    line-height: 1.45 !important;
}

/* Gewone tekst */
p,
span,
label,
input,
textarea,
button {
    font-size: 15px;
}

/* Secundaire tekst */
small,
.item-main small,
.panel-header small,
.chat-person small,
.assistant-copy > span,
.status-card small {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    color: #9aa8c0 !important;
}

/* Normale sterke tekst */
strong {
    line-height: 1.25;
}

/* Hoofdtitels */
h1 {
    font-size: 30px !important;
    line-height: 1.1 !important;
}

h2 {
    font-size: 19px !important;
    line-height: 1.2 !important;
}

h3 {
    font-size: 17px !important;
    line-height: 1.25 !important;
}

/* Header */
.app-header .greeting,
.app-header .header-greeting {
    font-size: 17px !important;
    line-height: 1.35 !important;
}

/* Knoppen */
button,
.soft-button,
.icon-button,
.close-button {
    font-size: 14.5px !important;
}

/* Inputs */
input,
textarea {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* Chat */
.chat-message {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.chat-person strong {
    font-size: 16px !important;
}

/* Kavi statuskaart */
.assistant-copy strong {
    font-size: 16px !important;
}

.assistant-copy > span {
    font-size: 14px !important;
}

/* Categorie / item kaarten */
.item-main strong {
    font-size: 15px !important;
    line-height: 1.3 !important;
}

.item-main small {
    font-size: 13.5px !important;
}

/* Account / meldingen / overlays */
.panel-header strong {
    font-size: 17px !important;
}

.panel-header small {
    font-size: 13px !important;
}

/* Statusblokken */
.status-card strong {
    font-size: 17px !important;
}

.status-card small {
    font-size: 13px !important;
}

/* Home categorieën */
#homeView .home-smart-tile strong {
    font-size: 13.5px !important;
}

#homeView .home-smart-tile small {
    font-size: 9px !important;
}

/* Footer bewust klein */
.kavi-global-footer,
.kavi-global-footer * {
    font-size: 10px !important;
    line-height: 1.3 !important;
}


/* =========================================================
   KAVI — DEFINITIEF GLOBAAL FONT
========================================================= */

html,
body,
.app,
.screen,
.view,
.overlay,
button,
input,
textarea,
select,
option {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;
}


/* =========================================================
   KAVI — OPSLAG WAARDE VOLLEDIG TONEN
========================================================= */

#homeView .status-grid .status-card {
    min-width: 0 !important;
}

#homeView .status-grid .status-card strong {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 16px !important;
}

#homeView #storageValue {
    font-size: 15.5px !important;
    letter-spacing: -0.02em !important;
}


/* =========================================================
   KAVI — STATUSKAART WAARDE + PIJL
========================================================= */

#homeView .status-card {
    position: relative !important;
}

#homeView .status-card .status-copy,
#homeView .status-card > div {
    min-width: 0 !important;
    padding-right: 24px !important;
}

#homeView .status-card .chevron,
#homeView .status-card > span:last-child {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    flex: 0 0 auto !important;
}

#homeView #storageValue {
    display: block !important;
    max-width: calc(100% - 4px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: 15px !important;
    letter-spacing: -0.025em !important;
}


/* =========================================================
   KAVI — STATUSKAARTEN DEFINITIEVE VERDELING
========================================================= */

/* Opslag krijgt meer ruimte dan AI-credits */
#homeView .status-grid {
    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr) !important;

    gap: 8px !important;
}

/* eerdere absolute pijl-fix terugdraaien */
#homeView .status-card .chevron,
#homeView .status-card > span:last-child {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
}

/* tekstblok mag beschikbare ruimte gebruiken */
#homeView .status-card .status-copy,
#homeView .status-card > div {
    min-width: 0 !important;
    padding-right: 0 !important;
}

/* opslagwaarde leesbaar én volledig */
#homeView #storageValue {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;

    font-size: 15px !important;
    letter-spacing: -0.02em !important;
}

/* =========================================================
   KAVI — COMPACTE STATUSKAARTEN
========================================================= */

#homeView .status-grid {
    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr) !important;

    gap: 8px !important;
}

#homeView .status-card {
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 10px !important;
}

/* label */
#homeView .status-card small,
#homeView .status-card .label {
    font-size: 12.5px !important;
    line-height: 1.1 !important;
}

/* waarde */
#homeView .status-card strong,
#homeView #storageValue,
#homeView #creditsValue {
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
}

/* icon iets compacter */
#homeView .status-card .status-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
}

/* pijl gewoon klein rechts */
#homeView .status-card .chevron,
#homeView .status-card > span:last-child {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
    font-size: 18px !important;
}

/* =========================================================
   KAVI — STATUS PIJLTJES TERUG IN KAART
========================================================= */

#homeView .status-card {
    position: relative !important;
}

#homeView .status-card .chevron,
#homeView .status-card > span:last-child {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

#homeView .status-card .status-copy,
#homeView .status-card > div {
    padding-right: 22px !important;
}


/* =========================================================
   KAVI — ACTIVITEIT PLACEHOLDER
========================================================= */

#homeView .activity-placeholder {
    margin-top: 18px;
}

#homeView .activity-placeholder__header {
    margin-bottom: 9px;
}

#homeView .activity-placeholder__header h2 {
    margin: 0;

    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700;
}

#homeView .activity-placeholder__card {
    min-height: 58px;

    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid rgba(111,145,207,.13);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.72),
            rgba(10,21,40,.72)
        );
}

#homeView .activity-placeholder__dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: rgba(111,145,207,.45);
}

#homeView .activity-placeholder__card div {
    min-width: 0;
}

#homeView .activity-placeholder__card strong {
    display: block;

    font-size: 14px !important;
    line-height: 1.25 !important;
}

#homeView .activity-placeholder__card small {
    display: block;

    margin-top: 2px;

    font-size: 13px !important;
    line-height: 1.35 !important;

    color: #8998b2 !important;
}


/* =========================================================
   KAVI — MELDINGEN
========================================================= */

.notification-button {
    position: relative;
}

.notification-badge {
    position: absolute;

    top: -3px;
    right: -4px;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #081426;
    border-radius: 10px;

    background: #e96578;
    color: #fff;

    font-size: 9px !important;
    font-weight: 750;
    line-height: 1;
}

.notification-badge.hidden {
    display: none !important;
}


.notifications-panel {
    width: 100%;
    max-width: 560px;

    height: min(82dvh,760px);

    display: grid;
    grid-template-rows:
        auto minmax(0,1fr);

    overflow: hidden;

    border: 1px solid rgba(111,145,207,.16);
    border-radius: 24px 24px 18px 18px;

    background: #081426;
}


.notifications-content {
    min-height: 0;

    padding: 14px;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}


.notification-setting {
    padding: 13px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr) auto;

    align-items: center;

    gap: 12px;

    border: 1px solid rgba(111,145,207,.13);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.86),
            rgba(10,21,40,.86)
        );
}


.notification-setting-copy {
    min-width: 0;
}


.notification-setting-copy strong {
    display: block;

    font-size: 14px !important;
}


.notification-setting-copy small {
    display: block;

    margin-top: 3px;

    font-size: 12.5px !important;
    line-height: 1.35 !important;

    color: #8998b2 !important;
}


.push-toggle {
    min-width: 76px;
    height: 36px;

    padding: 0 11px;

    border: 1px solid rgba(111,145,207,.18);
    border-radius: 12px;

    background: #142744;
    color: #c9d6ed;

    font-size: 12.5px !important;
    font-weight: 700;
}


.push-toggle[data-state="on"] {
    background: rgba(54,156,113,.14);
    border-color: rgba(77,197,143,.25);
    color: #8ee0b7;
}


.push-toggle[data-state="blocked"] {
    color: #d79ca7;
}


.push-permission-hint {
    margin-top: 8px;
    padding: 9px 11px;

    border-radius: 12px;

    background: rgba(255,255,255,.035);

    color: #9aa8c0;

    font-size: 12px !important;
    line-height: 1.4;
}


.push-permission-hint.hidden {
    display: none !important;
}


.notifications-list-header {
    margin: 18px 2px 9px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


.notifications-list-header strong {
    font-size: 15px !important;
}


.notifications-list-header button {
    padding: 5px 8px;

    border: 0;

    background: transparent;
    color: #8090ad;

    font-size: 11.5px !important;
}


.notifications-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.notification-item {
    position: relative;

    padding: 12px;

    display: grid;

    grid-template-columns:
        8px minmax(0,1fr);

    gap: 9px;

    border: 1px solid rgba(111,145,207,.11);
    border-radius: 15px;

    background: rgba(255,255,255,.025);
}


.notification-item-unread {
    border-color: rgba(82,132,229,.25);

    background:
        linear-gradient(
            145deg,
            rgba(18,38,70,.80),
            rgba(10,23,43,.80)
        );
}


.notification-unread-dot {
    width: 7px;
    height: 7px;

    margin-top: 7px;

    border-radius: 50%;

    background: transparent;
}


.notification-item-unread
.notification-unread-dot {
    background: #6f91cf;

    box-shadow:
        0 0 10px rgba(111,145,207,.5);
}


.notification-item-body {
    min-width: 0;
}


.notification-item-meta {
    margin-bottom: 3px;

    color: #72819d;

    font-size: 10.5px !important;
}


.notification-item-body > strong {
    display: block;

    font-size: 14px !important;
    line-height: 1.3;
}


.notification-item-body p {
    margin: 4px 0 0;

    color: #a0aec5;

    font-size: 13px !important;
    line-height: 1.4;
}


.notification-item-actions {
    margin-top: 9px;

    display: flex;

    gap: 7px;
}


.notification-item-actions button {
    padding: 5px 8px;

    border: 1px solid rgba(111,145,207,.12);
    border-radius: 9px;

    background: rgba(255,255,255,.035);
    color: #92a1ba;

    font-size: 10.5px !important;
}


.notification-item-actions
.notification-delete {
    color: #d2939e;
}


.notifications-empty {
    padding: 28px 12px;

    color: #7f8da6;

    text-align: center;

    font-size: 13px !important;
    line-height: 1.45;
}


/* =========================================================
   KAVI — EIGEN PDF PAGINAVIEWER
========================================================= */

.document-pdf-pages {
    width: 100%;
    height: 100%;

    padding: 12px;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;

    background: #111827;
}

.document-pdf-pages.hidden {
    display: none !important;
}

.document-pdf-loading {
    padding: 40px 20px;

    color: #9aa8c0;

    text-align: center;

    font-size: 14px !important;
}

.document-pdf-page {
    width: 100%;

    margin: 0 auto 14px;

    overflow: hidden;

    border-radius: 8px;

    background: #fff;

    box-shadow:
        0 5px 18px rgba(0,0,0,.28);
}

.document-pdf-page-number {
    padding: 6px 8px;

    background: #0d192c;
    color: #8f9db5;

    font-size: 10px !important;
    text-align: center;
}

.document-pdf-page img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    background: white;
}

.document-viewer-bar {
    position: relative !important;
    z-index: 100001 !important;
    flex: 0 0 auto !important;
}

.document-viewer-close {
    position: relative !important;
    z-index: 100002 !important;
}


/* =========================================================
   KAVI — COMPACT PDF DETAIL
========================================================= */

#detailContent.detail-content-pdf {
    min-height: 0 !important;
    height: auto !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}


/* oude dubbele PDF-kop weg */
#detailContent.detail-content-pdf
.document-preview-head {
    display: none !important;
}


#detailContent.detail-content-pdf
.document-preview {
    width: 100%;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
}


/* hoofdkaart PDF bekijken */
#detailContent.detail-content-pdf
.document-file-card {
    width: 100% !important;
    min-height: 82px !important;

    margin: 0 !important;
    padding: 14px 15px !important;

    border:
        1px solid rgba(111,145,207,.18) !important;

    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(18,35,64,.96),
            rgba(11,24,45,.96)
        ) !important;
}


/* PDF icoon */
#detailContent.detail-content-pdf
.document-file-icon {
    width: 46px !important;
    height: 46px !important;

    border-radius: 13px !important;

    font-size: 11px !important;
}


/* titel */
#detailContent.detail-content-pdf
.document-file-copy strong {
    font-size: 14px !important;
    line-height: 1.25 !important;

    white-space: normal !important;
}


/* subtitel */
#detailContent.detail-content-pdf
.document-file-copy small {
    margin-top: 4px !important;

    color: #98a8c2 !important;

    font-size: 13px !important;
}


/* pijl */
#detailContent.detail-content-pdf
.document-file-arrow {
    right: 15px !important;

    color: #7487aa !important;

    font-size: 26px !important;
}


/* download direct onder kaart */
#detailContent.detail-content-pdf
.pdf-download-action {
    width: 100% !important;
    height: 50px !important;

    margin: 10px 0 0 !important;

    border:
        1px solid rgba(111,145,207,.16) !important;

    border-radius: 15px !important;

    background:
        rgba(17,34,61,.78) !important;

    color: #dce5f5 !important;

    font-size: 13px !important;
    font-weight: 650 !important;
}


/* geen enorme lege ruimte rondom */
#detailContent.detail-content-pdf
.document-preview > * {
    max-width: none !important;
}


/* =========================================================
   GOOGLE CALENDAR — ACCOUNT
========================================================= */

.calendar-account-status {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.calendar-account-status strong {
    font-size: 13px;
}

.calendar-account-email {
    color: var(--muted);
    font-size: 11px;
}

.calendar-account-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.calendar-account-actions button {
    min-height: 38px;
    padding: 0 12px;

    border-radius: 12px;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.calendar-connect-button {
    border: 1px solid var(--border);
    background: #152642;
    color: white;
}

.calendar-disconnect-button {
    border: 1px solid rgba(255,111,130,.2);
    background: rgba(166,48,67,.10);
    color: #ff9caa;
}



/* =========================================================
   KAVI PLANNING — LIJST + DETAIL
========================================================= */

.planning-detail-row {
    padding: 13px 0;
    border-bottom:
        1px solid rgba(119,151,213,.10);
}

.planning-detail-row:first-child {
    padding-top: 0;
}

.planning-detail-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.planning-detail-row small {
    display: block;
    margin-bottom: 5px;

    color: #8999b6 !important;

    font-size: 12px !important;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .05em;
}

.planning-detail-row strong {
    display: block;

    color: #eef3ff;

    font-size: 16px;
    line-height: 1.35;
}

.planning-detail-row div {
    color: #d8dfef;

    font-size: 15px;
    line-height: 1.55;
}

.kavi-item-card .item-main small {
    line-height: 1.45 !important;
    white-space: normal;
}


/* =========================================================
   KAVI PLANNING — COMPACT DETAIL
========================================================= */

#detailView .detail-card {
    padding: 14px !important;
}

#detailView .detail-meta {
    margin-bottom: 10px !important;
    gap: 6px !important;
}

#detailView .planning-detail-row {
    padding: 7px 0 !important;
}

#detailView .planning-detail-row small {
    margin-bottom: 2px !important;
}

#detailView .planning-detail-row strong {
    line-height: 1.25 !important;
}

#detailView .detail-actions {
    margin-top: 10px !important;
    gap: 7px !important;
}

#detailView .view-header {
    margin-bottom: 12px !important;
}


/* =========================================================
   KAVI PLANNING — GEEN VOLLE SCHERMHOOGTE
========================================================= */

#detailView {
    min-height: 0 !important;
    height: auto !important;
}

#detailView .detail-card {
    min-height: 0 !important;
    height: auto !important;

    display: block !important;

    padding: 14px !important;
}

#detailView .detail-content {
    min-height: 0 !important;
    height: auto !important;

    display: block !important;
}

#detailView .planning-detail-row {
    min-height: 0 !important;
    height: auto !important;

    padding: 8px 0 !important;
    margin: 0 !important;
}

#detailView .planning-detail-row + .planning-detail-row {
    margin-top: 2px !important;
}

#detailView .detail-meta {
    margin-bottom: 10px !important;
}

#detailView .detail-actions {
    margin-top: 12px !important;
}


/* =========================================================
   KAVI — DETAIL VIEW NIET VOLLEDIG UITREKKEN
========================================================= */

#detailView.view {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

#detailView .detail-card {
    height: auto !important;
    min-height: 0 !important;
}


/* KAVI PLANNING DETAIL — GEEN TEMPLATE-WITRUIMTE */
#detailView .detail-content {
    white-space: normal !important;
}

#detailView .planning-detail-row {
    margin: 0 !important;
    padding: 7px 0 !important;
}

#detailView .planning-detail-row div {
    white-space: pre-wrap;
}


/* =========================================================
   KAVI — ECHTE AGENDA
========================================================= */

.kavi-agenda {
    width: 100%;
}

.kavi-agenda-top {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 38px;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;
}

.kavi-agenda-top strong {
    text-align: center;
    text-transform: capitalize;

    font-size: 16px !important;
}

.kavi-agenda-nav {
    width: 38px;
    height: 38px;

    padding: 0;

    border: 1px solid rgba(111,145,207,.14);
    border-radius: 12px;

    background: #0e1b31;
    color: #dce6f8;

    font-size: 25px !important;
}

.kavi-agenda-week {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));

    gap: 5px;

    margin-bottom: 18px;
}

.kavi-agenda-day {
    min-width: 0;
    height: 61px;

    padding: 7px 2px 5px;

    position: relative;

    border: 1px solid rgba(111,145,207,.10);
    border-radius: 14px;

    background: rgba(12,26,48,.72);
    color: #8798b6;
}

.kavi-agenda-day span {
    display: block;

    font-size: 9px !important;
    text-transform: uppercase;
}

.kavi-agenda-day strong {
    display: block;

    margin-top: 3px;

    font-size: 16px !important;
    color: #dbe5f6;
}

.kavi-agenda-day i {
    width: 4px;
    height: 4px;

    position: absolute;
    left: 50%;
    bottom: 5px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: currentColor;
}

.kavi-agenda-day.is-selected {
    border-color: rgba(89,137,232,.46);

    background:
        linear-gradient(
            145deg,
            rgba(40,83,165,.42),
            rgba(17,42,83,.72)
        );

    color: #8fb6ff;
}

.kavi-agenda-day.is-today:not(.is-selected) {
    border-color: rgba(111,145,207,.28);
}

.kavi-agenda-date-title {
    margin: 0 2px 10px;
}

.kavi-agenda-date-title strong {
    font-size: 14px !important;

    text-transform: capitalize;

    color: #e6edfa;
}

.kavi-agenda-timeline {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.kavi-agenda-event {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0,1fr) auto;

    align-items: stretch;

    border: 1px solid rgba(111,145,207,.13);
    border-radius: 17px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.94),
            rgba(9,20,39,.96)
        );
}

.kavi-agenda-event-open {
    min-width: 0;

    padding: 12px 8px 12px 13px;

    display: grid;
    grid-template-columns: 68px minmax(0,1fr) 16px;

    align-items: center;

    gap: 10px;

    border: 0;

    background: transparent;
    color: white;

    text-align: left;
}

.kavi-agenda-time {
    align-self: start;

    color: #8fabda;

    font-size: 11px !important;
    font-weight: 700;

    line-height: 1.35;
}

.kavi-agenda-event-copy {
    min-width: 0;
}

.kavi-agenda-event-copy strong {
    display: block;

    font-size: 14px !important;
    line-height: 1.25 !important;

    color: #edf3ff;
}

.kavi-agenda-event-copy small {
    display: block;

    margin-top: 4px;

    color: #8d9db8;

    font-size: 11px !important;
    line-height: 1.3 !important;
}

.kavi-agenda-arrow {
    color: #5f7399;

    font-size: 20px !important;
}

.kavi-agenda-trash {
    align-self: stretch;

    margin: 0 !important;

    border-left:
        1px solid rgba(111,145,207,.08) !important;

    border-radius: 0 !important;
}

.kavi-agenda-empty {
    padding: 22px 15px;

    border: 1px dashed rgba(111,145,207,.15);
    border-radius: 17px;

    text-align: center;

    color: #8091ae;
}

.kavi-agenda-empty strong {
    display: block;

    color: #c7d2e6;

    font-size: 14px !important;
}

.kavi-agenda-empty small {
    display: block;

    margin-top: 4px;

    font-size: 11px !important;
}


/* =========================================================
   KAVI AGENDA V2 — DAG / WEEK / MAAND / JAAR
========================================================= */

.kavi-agenda-heading {
    min-width: 0;
    text-align: center;
}

.kavi-agenda-heading strong {
    display: block;
    text-transform: capitalize;
    color: #edf3ff;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

.kavi-agenda-heading small {
    display: block;
    margin-top: 3px;
    color: #8093b4;
    font-size: 10px !important;
}

.kavi-agenda-controls {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 5px;
    margin-bottom: 8px;
    padding: 4px;
    border: 1px solid rgba(111,145,207,.10);
    border-radius: 14px;
    background: rgba(7,17,33,.58);
}

.kavi-agenda-mode {
    height: 34px;
    padding: 0 5px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #8496b5;
    font-size: 11px !important;
    font-weight: 650;
}

.kavi-agenda-mode.is-active {
    background: #172a49;
    color: #e8effc;
    box-shadow:
        inset 0 0 0 1px
        rgba(111,145,207,.16);
}

.kavi-agenda-today {
    display: block;
    margin: 0 0 14px auto;
    padding: 6px 10px;
    border: 1px solid rgba(111,145,207,.13);
    border-radius: 10px;
    background: transparent;
    color: #8197bc;
    font-size: 10px !important;
}


/* MAAND */

.kavi-agenda-month-weekdays,
.kavi-agenda-month-grid {
    display: grid;
    grid-template-columns:
        repeat(7,minmax(0,1fr));
    gap: 5px;
}

.kavi-agenda-month-weekdays {
    margin-bottom: 5px;
}

.kavi-agenda-month-weekdays span {
    padding: 3px 0;
    text-align: center;
    color: #6f82a2;
    font-size: 9px !important;
    font-weight: 700;
    text-transform: uppercase;
}

.kavi-agenda-month-day,
.kavi-agenda-month-blank {
    min-width: 0;
    height: 47px;
}

.kavi-agenda-month-day {
    position: relative;
    padding: 5px 2px;
    border: 1px solid rgba(111,145,207,.08);
    border-radius: 11px;
    background: rgba(10,23,43,.66);
    color: #d7e0f1;
}

.kavi-agenda-month-day strong {
    display: block;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.kavi-agenda-month-day span {
    display: block;
    margin-top: 3px;
    color: #739ae4;
    font-size: 9px !important;
    font-weight: 750;
}

.kavi-agenda-month-day.is-today {
    border-color:
        rgba(105,151,238,.45);
}

.kavi-agenda-month-day.is-selected {
    background:
        linear-gradient(
            145deg,
            rgba(43,88,178,.45),
            rgba(18,43,83,.75)
        );
    border-color:
        rgba(105,151,238,.48);
}


/* JAAR */

.kavi-agenda-year-grid {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap: 8px;
}

.kavi-agenda-year-month {
    min-width: 0;
    min-height: 74px;
    padding: 12px;
    border: 1px solid rgba(111,145,207,.11);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(14,28,52,.88),
            rgba(9,20,39,.92)
        );
    text-align: left;
}

.kavi-agenda-year-month strong {
    display: block;
    color: #e7eefb;
    font-size: 13px !important;
    text-transform: capitalize;
}

.kavi-agenda-year-month small {
    display: block;
    margin-top: 5px;
    color: #7588a7;
    font-size: 10px !important;
}

.kavi-agenda-year-month.is-current {
    border-color:
        rgba(105,151,238,.38);
    background:
        linear-gradient(
            145deg,
            rgba(37,76,151,.34),
            rgba(15,37,72,.76)
        );
}


/* =========================================================
   KAVI — TAKEN GEGROEPEERD
========================================================= */

.kavi-task-group {
    margin-bottom: 20px;
}

.kavi-task-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 3px 8px;
}

.kavi-task-group-header strong {
    color: #dce6f7;

    font-size: 13px !important;
    font-weight: 700;
}

.kavi-task-group-header span {
    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: rgba(111,145,207,.09);
    color: #8294b2;

    font-size: 9px !important;
    font-weight: 700;
}

.kavi-task-group-overdue
.kavi-task-group-header strong {
    color: #df8e9b;
}

.kavi-task-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.kavi-task-card {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0,1fr) auto;

    align-items: stretch;

    border:
        1px solid rgba(111,145,207,.12);

    border-radius: 16px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.92),
            rgba(9,20,39,.95)
        );
}

.kavi-task-open {
    min-width: 0;

    padding: 11px 8px 11px 12px;

    display: grid;

    grid-template-columns:
        26px
        minmax(0,1fr)
        16px;

    align-items: center;

    gap: 9px;

    border: 0;

    background: transparent;
    color: white;

    text-align: left;
}

.kavi-task-check {
    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(119,151,213,.26);

    border-radius: 7px;

    background:
        rgba(255,255,255,.025);
}

.kavi-task-check span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #5279be;

    opacity: .65;
}

.kavi-task-copy {
    min-width: 0;
}

.kavi-task-copy strong {
    display: block;

    overflow: hidden;

    color: #edf3ff;

    font-size: 13.5px !important;
    font-weight: 650;

    line-height: 1.25 !important;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.kavi-task-copy small {
    display: block;

    margin-top: 4px;

    color: #8091ad;

    font-size: 10.5px !important;
    line-height: 1.25 !important;
}

.kavi-task-arrow {
    color: #586c90;

    font-size: 19px !important;
}

.kavi-task-trash {
    align-self: stretch;

    margin: 0 !important;

    border-left:
        1px solid rgba(111,145,207,.07)
        !important;

    border-radius: 0 !important;
}

.kavi-task-empty {
    padding: 25px 15px;

    border:
        1px dashed rgba(111,145,207,.14);

    border-radius: 17px;

    text-align: center;
}

.kavi-task-empty strong {
    display: block;

    color: #cdd8eb;

    font-size: 14px !important;
}

.kavi-task-empty small {
    display: block;

    margin-top: 4px;

    color: #7889a6;

    font-size: 11px !important;
}


/* =========================================================
   KAVI BIBLIOTHEEK V1
   FRONTEND ONLY
========================================================= */

.kavi-library {
    width: 100%;
}

.kavi-library-search {
    height: 43px;

    margin-bottom: 17px;
    padding: 0 13px;

    display: flex;
    align-items: center;

    gap: 8px;

    border:
        1px solid rgba(111,145,207,.14);

    border-radius: 14px;

    background:
        rgba(10,23,43,.78);
}

.kavi-library-search > span {
    color: #7086aa;

    font-size: 18px !important;
}

.kavi-library-search input {
    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #e8eef9;

    font-size: 12px !important;
}

.kavi-library-search input::placeholder {
    color: #687a98;
}

.kavi-library-results {
    width: 100%;
}

.kavi-library-section {
    margin-bottom: 22px;
}

.kavi-library-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 3px 8px;
}

.kavi-library-section-title strong {
    color: #dce5f5;

    font-size: 13px !important;
    font-weight: 700;

    text-transform: capitalize;
}

.kavi-library-section-title span {
    min-width: 22px;
    height: 22px;

    padding: 0 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
        rgba(111,145,207,.09);

    color: #8192ae;

    font-size: 9px !important;
    font-weight: 700;
}


/* =========================
   COMPACTE LIJST
========================= */

.kavi-library-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.kavi-library-card {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    overflow: hidden;

    border:
        1px solid rgba(111,145,207,.11);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,53,.91),
            rgba(9,20,39,.95)
        );
}

.kavi-library-card-open {
    min-width: 0;

    padding: 11px 8px 11px 13px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        16px;

    align-items: center;

    gap: 8px;

    border: 0;

    background: transparent;
    color: white;

    text-align: left;
}

.kavi-library-card-copy {
    min-width: 0;
}

.kavi-library-card-copy strong {
    display: block;

    overflow: hidden;

    color: #edf3ff;

    font-size: 13px !important;
    line-height: 1.25 !important;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.kavi-library-card-copy small {
    display: block;

    margin-top: 4px;

    overflow: hidden;

    color: #7f91ad;

    font-size: 10px !important;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.kavi-library-arrow {
    color: #586d91;

    font-size: 19px !important;
}

.kavi-library-trash {
    align-self: stretch;

    margin: 0 !important;

    border-left:
        1px solid rgba(111,145,207,.07)
        !important;

    border-radius: 0 !important;
}


/* =========================
   FOTO'S / SCREENSHOTS
========================= */

.kavi-media-grid {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 7px;
}

.kavi-media-card {
    min-width: 0;

    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border:
        1px solid rgba(111,145,207,.10);

    border-radius: 14px;

    background:
        #0b172b;
}

.kavi-media-open {
    width: 100%;
    height: 100%;

    padding: 0;

    position: relative;

    overflow: hidden;

    border: 0;

    background:
        linear-gradient(
            145deg,
            #11203a,
            #0a162a
        );

    color: white;
}

.kavi-media-open img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.kavi-media-placeholder {
    position: absolute;

    left: 50%;
    top: 45%;

    transform:
        translate(-50%,-50%);

    color: #50698f;

    font-size: 28px !important;
}

.kavi-media-open img
+ .kavi-media-placeholder {
    display: none;
}

.kavi-media-title {
    max-width:
        calc(100% - 12px);

    position: absolute;

    left: 6px;
    right: 6px;
    bottom: 6px;

    padding: 5px 6px;

    overflow: hidden;

    border-radius: 7px;

    background:
        rgba(3,9,18,.72);

    color: #e9effa;

    font-size: 8px !important;
    line-height: 1.15 !important;

    white-space: nowrap;
    text-overflow: ellipsis;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}

.kavi-media-card
.kavi-library-trash {
    width: 29px;
    height: 29px;

    position: absolute;

    top: 5px;
    right: 5px;

    z-index: 4;

    border: 0 !important;
    border-radius: 9px !important;

    background:
        rgba(4,10,20,.76) !important;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


/* =========================
   LIJSTJES
========================= */

.kavi-list-card-grid {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.kavi-list-card {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    overflow: hidden;

    border:
        1px solid rgba(111,145,207,.11);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.92),
            rgba(9,20,39,.95)
        );
}

.kavi-list-card-open {
    min-width: 0;

    padding: 12px 8px 12px 12px;

    display: grid;

    grid-template-columns:
        31px
        minmax(0,1fr)
        16px;

    gap: 9px;

    align-items: center;

    border: 0;

    background: transparent;
    color: white;

    text-align: left;
}

.kavi-list-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        rgba(73,111,185,.14);

    color: #7799da;

    font-size: 14px !important;
}

.kavi-list-copy {
    min-width: 0;
}

.kavi-list-copy strong {
    display: block;

    overflow: hidden;

    color: #edf3ff;

    font-size: 13px !important;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.kavi-list-copy small {
    display: block;

    margin-top: 4px;

    color: #7c8eaa;

    font-size: 10px !important;
}


/* =========================
   RECEPTEN
========================= */

.kavi-recipe-grid {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 8px;
}

.kavi-recipe-card {
    min-width: 0;

    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(111,145,207,.11);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(16,31,57,.94),
            rgba(9,20,39,.96)
        );
}

.kavi-recipe-open {
    width: 100%;

    min-height: 126px;

    padding: 0;

    display: flex;
    flex-direction: column;

    position: relative;

    border: 0;

    background: transparent;
    color: white;

    text-align: left;
}

.kavi-recipe-open img {
    width: 100%;
    height: 82px;

    display: block;

    object-fit: cover;
}

.kavi-recipe-visual {
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #617da9;

    font-size: 31px !important;
}

.kavi-recipe-open img
~ .kavi-recipe-visual {
    display: none;
}

.kavi-recipe-copy {
    min-width: 0;

    padding: 10px 11px 11px;
}

.kavi-recipe-copy strong {
    display: block;

    overflow: hidden;

    color: #edf3ff;

    font-size: 12px !important;
    line-height: 1.25 !important;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.kavi-recipe-copy small {
    display: block;

    margin-top: 4px;

    color: #798ba8;

    font-size: 9px !important;
}

.kavi-recipe-card
.kavi-library-trash {
    width: 30px;
    height: 30px;

    position: absolute;

    top: 5px;
    right: 5px;

    z-index: 3;

    border: 0 !important;
    border-radius: 9px !important;

    background:
        rgba(4,10,20,.77) !important;
}


/* =========================
   EMPTY
========================= */

.kavi-library-empty {
    padding: 26px 14px;

    border:
        1px dashed rgba(111,145,207,.14);

    border-radius: 17px;

    text-align: center;
}

.kavi-library-empty strong {
    display: block;

    color: #ccd7e9;

    font-size: 14px !important;
}

.kavi-library-empty small {
    display: block;

    margin-top: 4px;

    color: #7889a5;

    font-size: 11px !important;
}


/* KAVI DOCUMENT VIEWER — SAFE AREA FIX */
.document-viewer-bar {
    padding-right:
        calc(16px + env(safe-area-inset-right)) !important;

    padding-left:
        calc(16px + env(safe-area-inset-left)) !important;
}

.document-viewer-close {
    flex-shrink: 0 !important;
    margin-right: 0 !important;
}



/* =========================================================
   KAVI — MOBILE ONLY
   Tablets, laptops en desktops krijgen alleen een melding.
   Telefoons, ook liggend, blijven bruikbaar.
========================================================= */

.mobile-only-screen {
    display: none;
}


/* Alleen grotere schermen blokkeren */
@media (min-width: 600px) and (min-height: 600px) {

    #authScreen,
    #appScreen {
        display: none !important;
    }


    .mobile-only-screen {
        position: fixed;
        inset: 0;
        z-index: 999999;

        display: flex !important;
        align-items: center;
        justify-content: center;

        min-height: 100dvh;
        padding: 32px;

        background:
            radial-gradient(
                circle at 50% 15%,
                rgba(65, 105, 225, .12),
                transparent 38%
            ),
            #07101f;

        color: #fff;
        text-align: center;
    }


    .mobile-only-card {
        width: min(100%, 440px);

        padding: 48px 40px;

        border: 1px solid rgba(255,255,255,.08);
        border-radius: 28px;

        background: rgba(255,255,255,.045);

        box-shadow:
            0 30px 80px rgba(0,0,0,.28);
    }


    .mobile-only-face {
        display: flex;
        justify-content: center;

        margin-bottom: 22px;

        transform: scale(1.25);
    }


    .mobile-only-card h1 {
        margin: 0 0 10px;

        font-size: 42px;
        line-height: 1;

        color: #fff;
    }


    .mobile-only-card h2 {
        margin: 0 0 16px;

        font-size: 21px;
        font-weight: 650;

        color: #fff;
    }


    .mobile-only-card p {
        margin: 0;

        font-size: 15px;
        line-height: 1.65;

        color: rgba(255,255,255,.68);
    }


    .mobile-only-card strong {
        color: #fff;
    }
}


/* =========================================================
   KAVI ACTION SUGGESTIONS
========================================================= */

.suggestions-section {
    margin-bottom: 24px;
}

.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.suggestion-card {
    padding: 15px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    border: 1px solid rgba(111,145,207,.16);
    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.96),
            rgba(10,21,40,.96)
        );
}

.suggestion-card__top {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.suggestion-card__icon {
    width: 34px;
    height: 34px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(54,151,220,.12);

    font-size: 17px;
}

.suggestion-card__copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.suggestion-card__copy strong {
    color: white;

    font-size: 14px;
    font-weight: 650;
}

.suggestion-card__copy small {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

.suggestion-card__actions {
    display: flex;
    gap: 9px;
}

.suggestion-action {
    min-height: 42px;

    padding: 0 15px;

    border: 1px solid rgba(113,148,211,.16);
    border-radius: 14px;

    background: rgba(17,31,56,.82);

    color: #bdc8dd;

    font-size: 12px;
    font-weight: 600;
}

.suggestion-action--primary {
    border-color: rgba(105,173,255,.55);

    background:
        linear-gradient(
            135deg,
            rgba(49,117,235,.95),
            rgba(46,94,202,.95)
        );

    color: white;
}


/* =========================================================
   KAVI SUGGESTIONS DROPDOWN
========================================================= */

.suggestions-toggle {
    width: 100%;

    padding: 14px 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border: 1px solid rgba(111,145,207,.16);
    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(15,29,54,.96),
            rgba(10,21,40,.96)
        );

    color: white;

    text-align: left;

    font-size: 14px;
    font-weight: 650;
}

.suggestions-toggle__meta {
    display: flex;
    align-items: center;

    gap: 10px;
}

#suggestionsCount {
    min-width: 24px;
    height: 24px;

    padding: 0 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: rgba(68,127,242,.16);
    color: #9fc0ff;

    font-size: 11px;
}

.suggestions-chevron {
    display: inline-block;

    color: #68799c;

    font-size: 24px;
    line-height: 1;

    transition: transform .18s ease;
}

.suggestions-toggle[aria-expanded="true"]
.suggestions-chevron {
    transform: rotate(90deg);
}

.suggestions-section .suggestions-list {
    margin-top: 10px;
}


/* =========================================================
   KAVI SUGGESTION CONTACT INPUT
========================================================= */

.suggestion-contact-form {
    padding-top: 12px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    border-top: 1px solid rgba(111,145,207,.12);
}

.suggestion-contact-form small {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;
}

.suggestion-contact-form small strong {
    color: white;
}

.suggestion-phone-input {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    border: 1px solid rgba(113,148,211,.22);
    border-radius: 14px;
    outline: none;

    background: rgba(7,16,31,.72);
    color: white;

    font-size: 16px;
}

.suggestion-phone-input:focus {
    border-color: rgba(105,173,255,.65);
}


/* =========================================================
   KAVI CONTACT PICKER
========================================================= */

.suggestion-contact-picker {
    width: 100%;
}

.suggestion-contact-or {
    display: block;

    color: var(--muted);

    font-size: 10px;
    text-align: center;
}