#chatbot-toggle {
    position: fixed;
    bottom: 30px;
    right: 20px;
   /* background: #007bff;*/
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
   /* height: 50px;*/
    font-size: 24px;
    cursor: pointer;
    z-index:999;
}

#chatbot-container {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 350px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    display: none;
    z-index:999;
}

.chat-header {
    background: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
}

.close-btn {
    position: absolute;
    right: 10px;
    top: 5px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.chat-body {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.message-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.bot-message-container {
    justify-content: flex-start;
}

.user-message-container {
    justify-content: flex-end;
}

.bot-message {
    background: #e0e0e0;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 70%;
    font-size:15px;
}
    .bot-message img.message-icon {
        display: inline-flex;
        height: 22px;
        margin-left: 2px;
    }
.bot-message-with-links {
    background: none;
}
.bot-message .link {
    color: #3C3CE4;
    border: 1px solid #3C3CE4;
    cursor: pointer;
    background: none;
    padding: 5px 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    margin-right: 5px;
    font-size: 14px;
}
.bot-message a {
    color: #0a58ca;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 180px;
    white-space: nowrap;
}
    .bot-message a.detail-link {
        width: auto !important;
        white-space: normal;
    }
.user-message {
    background: #007bff;
    color: white;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 70%;
}

.bot-icon, .user-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 50%;
    margin: 5px;
}

.bot-icon {
    background: #e0e0e0;
}

.user-icon {
    background: #007bff;
    color: white;
}

.chat-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
}

    .chat-input input {
        flex: 1;
        padding: 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .chat-input button {
        background: #007bff;
        color: white;
        border: none;
        padding: 5px 10px;
        margin-left: 5px;
        border-radius: 5px;
        cursor: pointer;
    }






 :root{
      --primary:#3C3CE4;
      --bg:#0f1220;
      --panel:#14172a;
      --text:#e8e8f0;
      --muted:#9aa3b2;
      --accent:#2a2f45;
      --radius:18px;
      --shadow:0 12px 40px rgba(0,0,0,.35);
      --msg-user:#272b45;
      --msg-bot:#1e2240;
      --chip:#202541;
    }
    *{box-sizing:border-box}
    html,body{height:100%;}
    /*body{
      margin:0; background:linear-gradient(135deg, #0b0e1a, #121534 55%, #0b0e1a);
      color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
    }*/
    .launcher{position:fixed; right:24px; bottom:24px; z-index:5}
        .launcher button {
            background: var(--primary);
            */ color: #fff;
            border: none;
            /* padding: 14px 18px; */
            border-radius: 999px;
            cursor: pointer;
            font-weight: 600;
            box-shadow: var(--shadow);
            width: 50px;
        }
.chatbot {
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
    position: fixed;
    inset: auto 24px 24px auto;
    width: 380px;
    height: 560px;
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    z-index: 999;
    color: var(--text);
}
    @media (max-width: 768px){
      .chatbot{ inset:0; width:100vw; height:100vh; border-radius:0; }
    }
    .cb-header{display:flex; align-items:center; gap:10px; padding:14px 16px; background:linear-gradient(180deg, rgba(60,60,228,.15), rgba(60,60,228,.03)); border-bottom:1px solid rgba(255,255,255,.06);}
    .cb-dot{width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 6px rgba(60,60,228,.15)}
    .cb-title{font-weight:700}
    .cb-actions{margin-left:auto; display:flex; gap:8px; align-items:center}
    .cb-actions button{background:var(--accent); color:var(--text); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px 10px; cursor:pointer;}
    .cb-actions button:hover{filter:brightness(1.1)}
    .cb-close{background:#1f233a; color:#fff; border:1px solid rgba(255,255,255,.08); padding:8px 12px; border-radius:12px; cursor:pointer; font-weight:600;}
    .cb-close:hover{background:#252a46}
    .cb-body{flex:1; overflow:auto; padding:16px; background:radial-gradient(1200px 800px at 100% 0%, rgba(60,60,228,.15), transparent 50%), radial-gradient(900px 600px at 0% 100%, rgba(60,60,228,.1), transparent 45%)}
    .msg{display:flex; gap:10px; margin-bottom:14px; align-items:flex-end}
    .msg.bot .bubble{background:var(--msg-bot); border:1px solid rgba(255,255,255,.06)}
    .msg.user{justify-content:flex-end}
    .msg.user .bubble{background:var(--msg-user); border:1px solid rgba(255,255,255,.06)}
    .avatar{width:32px; height:32px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700}
.bubble {
    max-width: 74%;
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
    font-size: var(--dynamic-font, 16px);
    overflow-wrap: break-word;
}
    .meta{display:block; margin-top:6px; font-size:.78em; color:var(--muted)}
    .cb-composer{padding:12px; border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(60,60,228,.06), transparent)}
    .composer{display:flex; align-items:center; gap:10px; background:#0e1327; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:8px;}
    .composer textarea{flex:1; resize:none; height:48px; max-height:120px; border:none; outline:none; background:transparent; color:var(--text); font-size:var(--dynamic-font, 16px);}
    .btn-icon{width:42px; height:42px; display:grid; place-items:center; border:none; background:var(--primary); color:#fff; border-radius:14px; cursor:pointer}
    .btn-icon:hover{filter:brightness(1.05)}
    .font-ctrls{display:flex; gap:6px}
    .font-ctrls button{width:36px; height:36px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#1b2040; color:#fff; cursor:pointer}
    .phrases{position:fixed; left:24px; bottom:24px; background:rgba(20,23,42,.88); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); border-radius:16px; padding:10px; max-width:420px; display:flex; flex-wrap:wrap; gap:8px;}
    .phrase-chip{padding:8px 10px; border-radius:999px; background:var(--chip); border:1px solid rgba(255,255,255,.07); color:#dfe4ff; cursor:pointer; font-size:14px;}
    .phrase-chip:hover{filter:brightness(1.05)}
    @media (max-width: 1024px){.phrases{display:none}}
    .fade-in{animation:fade .35s ease-out}
    @keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
    .cb-body::-webkit-scrollbar{width:10px}
    .cb-body::-webkit-scrollbar-thumb{background:#2a2f45; border-radius:999px}
.chatbot .detail-link:hover {
    color: #d3d3d5 !important;
}