/* ── Root Tokens ── */
:root {
    --tn-navy: #0b1f45;
    --tn-navy-mid: #112358;
    --tn-navy-light: #1a3470;
    --tn-navy-card: #1c3068;
    --tn-blue-msg: #1e407a;
    --tn-user-msg: #2154a0;
    --tn-accent: #2563eb;
    --tn-gold: #e8a000;
    --tn-gold-hover: #c98900;
    --tn-green: #22c55e;
    --tn-white: #ffffff;
    --tn-text-dim: #7fa8d8;
    --tn-text-muted: #4f7ab0;
    --tn-border: rgba(255, 255, 255, 0.07);
    --tn-radius: 20px;
    --tn-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 4px 20px rgba(0, 0, 0, 0.3);
    --tn-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Launcher ── */

.tn-launcher-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    z-index: 9999;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.tn-launcher-chat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    /* margin-bottom: 10px; */
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
    border: none;
    background: var(--tn-navy-mid);
    color: #fff;
    box-shadow: 0 2px 8px #00000026;
}

.tn-launcher-chat:hover {
    background: #0b1f45f0;
    color: #fff;
    transform: translateY(-1px)
}

#tn-launcher {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Outer bar */
.tn-launcher-bar {
    width: 940px;
    max-width: calc(55vw - 24px);
    height: 56px;
    background: #071733;
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow:
        0 20px 45px rgba(0, 0, 0, .45),
        0 8px 20px rgba(0, 0, 0, .25);
}

/* Yellow circle */
.tn-launcher-circle {
    width: 40px;
    height: 40px;
    max-width: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--tn-navy-mid);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Inner search area */
.tn-launcher-search {
    flex: 1;
    height: 40px;
    border-radius: 999px;
    background: #1b2944;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
}

.tn-search-icon {
    width: 20px;
    height: 20px;
    color: #7e8daa;
    flex-shrink: 0;
}

.tn-launcher-search span {
    color: #8ea0c0c7;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── Bubble ── */
#tn-bubble {
    display: none;
    position: relative;
    /* position: fixed;
        bottom: 102px;
        right: 28px; */
    width: 300px;
    background: var(--tn-navy-mid);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    padding: 16px 20px;
    z-index: 9997;
    box-shadow: var(--tn-shadow);
    font-family: var(--tn-font);
    animation: tn-slide-up 0.3s cubic-bezier(.34, 1.56, .64, 1);
}

.tn-bubble-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--tn-text-dim);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 4px;
    transition: color 0.2s;
}

.tn-bubble-close:hover {
    color: var(--tn-white);
}

.tn-bubble-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.tn-bubble-info {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.tn-bubble-name {
    color: var(--tn-white);
    font-weight: 700;
    font-size: 14px;
}

.tn-bubble-status {
    font-size: 11px;
    color: var(--tn-text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.tn-bubble-msg {
    color: #c5d8f0;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

/* ── Avatar ── */
.tn-avatar {
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: var(--tn-navy-mid);
    font-size: 14px;
    font-family: var(--tn-font);
}

.tn-avatar-lg {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 17px;
}

/* ── Online dot ── */
.tn-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--tn-green);
    border-radius: 50%;
    vertical-align: middle;
}

.tn-dot-green {
    background: var(--tn-green);
}

/* ─────────────────────────────────────
   CHAT WINDOW - FULL UPDATED CSS
───────────────────────────────────── */

/* ── Main Window ── */
#tn-window{
    display:none;
    flex-direction:column;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:min(92vw, 1320px);
    height:min(86vh, 820px);
    background:#071633;
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    z-index:99999;
    overflow:hidden;
    box-shadow:
        0 40px 120px rgba(0,0,0,.55),
        0 10px 40px rgba(0,0,0,.35);
    font-family:var(--tn-font);
}

/* ── Open State ── */
#tn-window.tn-open{
    display:flex;
    animation:tnModal .28s ease;
}

@keyframes tnModal{
    from{
        opacity:0;
        transform:translate(-50%, -46%) scale(.96);
    }
    to{
        opacity:1;
        transform:translate(-50%, -50%) scale(1);
    }
}

/* ── Header ── */
.tn-header{
    height:88px;
    padding:0 24px;
    background:#071633;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
}

.tn-header-left{
    display:flex;
    align-items:center;
    gap:14px;
}

.tn-header-name{
    color:#ffffff;
    font-size:24px;
    font-weight:700;
    line-height:1;
    display:block;
}

.tn-header-sub{
    margin-top:6px;
    color:#8aa3d1;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:6px;
}

.tn-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.tn-header-actions button{
    width:38px;
    height:38px;
    border:none;
    border-radius:10px;
    background:transparent;
    color:#8aa3d1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s ease;
}

.tn-header-actions button:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

/* ── Avatar ── */
.tn-avatar{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:50%;
    background:#fff;
    color: var(--tn-navy-mid);
    font-weight:800;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.tn-avatar-lg{
    width:44px;
    height:44px;
    min-width:44px;
    font-size:18px;
}

/* ── Status Dot ── */
.tn-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
    background:#22c55e;
}

/* ── Messages Area ── */
#tn-messages{
    flex:1;
    overflow-y:auto;
    padding:24px;
    background:#081a3d;
    display:flex;
    flex-direction:column;
    gap:18px;
    scrollbar-width:thin;
    scrollbar-color:#31486f transparent;
}

#tn-messages::-webkit-scrollbar{
    width:6px;
}

#tn-messages::-webkit-scrollbar-thumb{
    background:#31486f;
    border-radius:10px;
}

/* ── Message Rows ── */
.tn-msg-row{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.tn-msg-row.tn-user{
    flex-direction:row-reverse;
}

.tn-msg-body{
    display:flex;
    flex-direction:column;
    max-width:72%;
}

.tn-msg-row.tn-user .tn-msg-body{
    align-items:flex-end;
}

.tn-msg-name{
    font-size:12px;
    color:#8aa3d1;
    margin-bottom:6px;
    font-weight:600;
}

/* ── Message Bubble ── */
.tn-msg-bubble{
    padding:14px 18px;
    border-radius:18px;
    font-size:16px;
    line-height:1.6;
    color:#e6f0ff;
    word-break:break-word;
}

.tn-msg-row.tn-bot .tn-msg-bubble{
    background:#1a2948;
    border-bottom-left-radius:6px;
}

.tn-msg-row.tn-user .tn-msg-bubble{
    background:#31486f;
    border-bottom-right-radius:6px;
    color:#fff;
}

.tn-msg-bubble a{
    color:#facc15;
    text-decoration:none;
}

.tn-msg-bubble a:hover{
    text-decoration:underline;
}

/* ── Typing Indicator ── */
.tn-typing{
    display:flex;
    align-items:center;
    gap:5px;
    padding:12px 14px;
}

.tn-typing span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#8aa3d1;
    animation:tnBounce 1.3s infinite;
}

.tn-typing span:nth-child(2){ animation-delay:.18s; }
.tn-typing span:nth-child(3){ animation-delay:.36s; }

@keyframes tnBounce{
    0%,80%,100%{
        transform:translateY(0);
        opacity:.5;
    }
    40%{
        transform:translateY(-6px);
        opacity:1;
    }
}

/* ── Suggestions ── */
#tn-suggestions{
    padding:12px 24px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    background:#081a3d;
    border-top:1px solid rgba(255,255,255,.04);
}

.tn-sugg{
    background:transparent;
    border:1px solid rgba(255,255,255,.14);
    color:#cfe0ff;
    padding:10px 16px;
    border-radius:999px;
    font-size:14px;
    cursor:pointer;
    transition:.2s ease;
    white-space:nowrap;
}

.tn-sugg:hover{
    background:#1a2948;
    border-color:#3b82f6;
    transform:translateY(-1px);
}

/* ── Input Area ── */
.tn-input-wrap{
    padding:18px 24px 20px;
    background:#071633;
    border-top:1px solid rgba(255,255,255,.08);
    flex-shrink:0;
}

.tn-input-inner{
    height:58px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 18px;
    border-radius:999px;
    background:#1a2948;
    border:1px solid rgba(255,255,255,.08);
    transition:.2s ease;
}

.tn-input-inner:focus-within{
    border-color:#3b82f6;
}

.tn-input-icon{
    color:#8aa3d1;
    flex-shrink:0;
}

#tn-input{
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    color:#ffffff;
    font-size:16px;
    font-family:var(--tn-font);
}

#tn-input::placeholder{
    color:#8aa3d1;
}

#tn-send-btn{
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s ease;
}

#tn-send-btn:hover{
    background:#1d4ed8;
    transform:scale(1.05);
}

#tn-send-btn:disabled{
    background:#334155;
    cursor:not-allowed;
    transform:none;
}

/* ── Footer Note ── */
.tn-footer-note{
    margin-top:10px;
    text-align:center;
    font-size:12px;
    color:#8aa3d1;
}

.tn-footer-note a{
    color:#8aa3d1;
    text-decoration:underline;
}

.tn-footer-note a:hover{
    color:#fff;
}



/* =========================================================
   RESPONSIVE
========================================================= */

/* Tablet */
@media (max-width:1024px){

    #tn-window{
        width:min(96vw, 900px);
        height:min(88vh, 760px);
    }

    .tn-launcher-bar{
        width:720px;
        max-width:calc(90vw - 24px);
    }

    .tn-header-name{
        font-size:20px;
    }

    .tn-msg-body{
        max-width:80%;
    }
}


/* Mobile */
@media (max-width:768px){

    /* ── Launcher ── */

    .tn-launcher-container{
        bottom:14px;
        width:100%;
        padding:0 14px;
    }

    .tn-launcher-chat{
        font-size:12px;
        padding:8px 16px;
    }

    .tn-launcher-bar{
        width:100%;
        max-width:100%;
        height:56px;
        padding:8px;
        gap:10px;
        border-radius:999px;
    }

    .tn-launcher-circle{
        width:40px;
        height:40px;
        min-width:40px;
        font-size:18px;
    }

    .tn-launcher-search{
        height:40px;
        padding:0 14px;
        gap:8px;
    }

    .tn-search-icon{
        width:16px;
        height:16px;
    }

    .tn-launcher-search span{
        font-size:13px;
    }

    /* ── Bubble ── */

    #tn-bubble{
        width:calc(100vw - 28px);
        max-width:320px;
        padding:14px;
    }

    /* ── Chat Window ── */

    #tn-window{
        width:100vw;
        height:100vh;
        top:0;
        left:0;
        transform:none;
        border-radius:0;
    }

    #tn-window.tn-open{
        transform:none;
    }

    .tn-header{
        height:72px;
        padding:0 14px;
    }

    .tn-header-left{
        gap:10px;
    }

    .tn-header-name{
        font-size:18px;
    }

    .tn-header-sub{
        font-size:12px;
    }

    .tn-header-actions button{
        width:34px;
        height:34px;
    }

    /* ── Messages ── */

    #tn-messages{
        padding:14px;
        gap:14px;
    }

    .tn-msg-body{
        max-width:88%;
    }

    .tn-msg-bubble{
        font-size:14px;
        line-height:1.5;
        padding:12px 14px;
    }

    /* ── Suggestions ── */

    #tn-suggestions{
        padding:10px 14px;
        gap:8px;
        overflow-x:auto;
        flex-wrap:nowrap;
        scrollbar-width:none;
    }

    #tn-suggestions::-webkit-scrollbar{
        display:none;
    }

    .tn-sugg{
        font-size:13px;
        padding:9px 14px;
        flex-shrink:0;
    }

    /* ── Input ── */

    .tn-input-wrap{
        padding:12px 14px 16px;
    }

    .tn-input-inner{
        height:52px;
        padding:0 14px;
    }

    #tn-input{
        font-size:15px;
    }

    #tn-send-btn{
        width:38px;
        height:38px;
    }

    .tn-footer-note{
        font-size:11px;
        line-height:1.4;
    }
}


/* Small Mobile */
@media (max-width:480px){

    .tn-launcher-search span{
        font-size:12px;
    }

    .tn-header-name{
        font-size:16px;
    }

    .tn-msg-bubble{
        font-size:13.5px;
    }

    .tn-avatar{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:15px;
    }

    .tn-avatar-lg{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:15px;
    }
}


@media (max-width:768px){

    /* ─────────────────────────────
       FLOATING CHAT ICON
    ───────────────────────────── */

    .tn-launcher-container{
        position: fixed;
        bottom: 18px;
        right: 18px;
        left: auto;
        transform: none;
        width: auto;
        z-index: 99999;
    }

    /* Hide bubble message */
    #tn-bubble{
        display:none !important;
    }

    /* Hide text */
    .tn-launcher-chat{
        display:none !important;
    }

    /* Hide long search bar */
    .tn-launcher-bar{
        width:65px;
        height:65px;
        border-radius:50%;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#071733;
        border:1px solid rgba(255,255,255,.08);
        box-shadow:
            0 10px 25px rgba(0,0,0,.35),
            0 4px 12px rgba(0,0,0,.25);
    }

    /* Hide search area */
    .tn-launcher-search{
        display:none;
    }

    /* Chat Icon Circle */
    .tn-launcher-circle{
        width:48px;
        height:48px;
        min-width:48px;
        border-radius:50%;
        background:#ffffff;
        color:var(--tn-navy-mid);
        font-size:20px;
        font-weight:700;
        display:flex;
        align-items:center;
        justify-content:center;
    }

}


/* ─────────────────────────────
   LAUNCHER EFFECTS
───────────────────────────── */

.tn-launcher-bar{
    position: relative;
    overflow: visible;
}

/* Glow Ring */
.tn-launcher-bar::before{
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(37,99,235,.7),
        rgba(96,165,250,.4),
        rgba(37,99,235,.7)
    );
    z-index: -2;
    filter: blur(14px);
    opacity: .8;
    animation: tnGlowMove 4s linear infinite;
}

/* Soft Pulse */
.tn-launcher-bar::after{
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    background: rgba(37,99,235,.18);
    z-index: -3;
    animation: tnPulse 2.5s ease-out infinite;
}

/* Hover Effect */
/* .tn-launcher-container:hover .tn-launcher-bar{
    transform: translateY(-2px) scale(1.01);
    transition: 0.25s ease;
} */

/* Glow Animation */
@keyframes tnGlowMove{
    0%{
        opacity:.5;
        transform:scale(1);
    }
    50%{
        opacity:1;
        transform:scale(1.02);
    }
    100%{
        opacity:.5;
        transform:scale(1);
    }
}

/* Pulse Animation */
@keyframes tnPulse{
    0%{
        transform:scale(.95);
        opacity:.6;
    }
    70%{
        transform:scale(1.08);
        opacity:0;
    }
    100%{
        transform:scale(1.08);
        opacity:0;
    }
}

@media (max-width:768px){

    .tn-launcher-bar::before{
        border-radius:50%;
    }

    .tn-launcher-bar::after{
        border-radius:50%;
    }

}

.tn-chat-form-wrap{
    margin-top:10px;
}

.tn-chat-form-title{
    font-size:18px;
    margin-bottom:14px;
    color:#fff;
}

.tn-form-group{
    margin-bottom:12px;
}

.tn-form-group input,
.tn-form-group textarea{
    width:100%;
    background:#0f2347;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:12px 14px;
    color:#fff;
    font-size:14px;
    outline:none;
}

.tn-form-group textarea{
    min-height:90px;
    resize:none;
}

.tn-form-group input::placeholder,
.tn-form-group textarea::placeholder{
    color:#8aa3d1;
}

.tn-chat-submit-btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:12px;
    background:#2563eb;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.2s ease;
}

.tn-chat-submit-btn:hover{
    background:#1d4ed8;
}

.tn-chat-success{
    margin-top:12px;
    color:#22c55e;
    font-size:14px;
}