/* =========================================================
   TST Chat Widget – Frontend CSS
   Traffic Signal Technology Factory (TST)

   Design tokens below are the single source of truth for the
   whole widget. Every colour, size, spacing, radius and motion
   value used further down references one of these variables,
   so a brand tweak is a one-line change at the top.
   ========================================================= */

:root {
    /* ---- Typeface ---- */
    --tst-font: Barlow, sans-serif;

    /* ---- Type scale ---- */
    --tst-fs-13-5: 13.5px;
    --tst-fs-14:   14px;
    --tst-fs-14-5: 14.5px;
    --tst-fs-15:   15px;
    --tst-fs-16:   16px;
    --tst-fs-18:   18px;
    --tst-fs-20:   20px;
    --tst-fs-22:   22px;

    --tst-fw-base: 400;
    --tst-fw-med:  500;
    --tst-fw-semi: 600;
    --tst-fw-bold: 700;
    --tst-lh-base: 25.6px;

    /* ---- Text colours ---- */
    --tst-text-primary:   #ffffff;
    --tst-text-secondary: #010101;
    --tst-text-tertiary:  #1a1a1a;
    --tst-text-inverse:   #aaaaaa;

    /* ---- Surfaces ---- */
    --tst-surface-base:   #000000;
    --tst-surface-raised: #03a550;
    --tst-surface-strong: #f5a800;

    /* Neutral support surfaces derived from the palette — needed for
       readable chat bubbles, inputs and borders. */
    --tst-surface-card:   #ffffff;
    --tst-surface-soft:   #f4f5f6;
    --tst-surface-tint:   rgba(3, 165, 80, .08);
    --tst-border:         #e2e5e7;
    --tst-border-strong:  #cfd4d7;

    /* ---- Spacing ---- */
    --tst-sp-5:  5px;
    --tst-sp-7:  7px;
    --tst-sp-8:  8px;
    --tst-sp-9:  9px;
    --tst-sp-10: 10px;
    --tst-sp-12: 12px;
    --tst-sp-13: 13px;
    --tst-sp-14: 14px;

    /* ---- Radius ---- */
    --tst-r-6:  6px;
    --tst-r-8:  8px;
    --tst-r-10: 10px;
    --tst-r-35: 35px;
    --tst-r-50: 50px;

    /* ---- Motion ---- */
    --tst-motion-200: 200ms;
    --tst-motion-220: 220ms;
    --tst-motion-300: 300ms;
    --tst-motion-400: 400ms;
    --tst-motion-800: 800ms;
}

/* Hide a theme-level back-to-top button so it can't sit on top of
   the widget's own one. */
#backToTop.show {
    opacity: 1;
    visibility: hidden;
    display: none !important;
}

/* =========================
   CHAT LAUNCHER ICON
   ========================= */
#tst-chat-icon {
    position: fixed;
    right: 20px;
    bottom: 40px;
    width: 60px;
    height: 60px;
    background: var(--tst-surface-raised);
    color: var(--tst-text-primary);
    border-radius: var(--tst-r-50);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--tst-fs-22);
    box-shadow: 0 8px 24px rgba(3, 165, 80, .35);
    z-index: 100000;
    transition: transform var(--tst-motion-200) ease, box-shadow var(--tst-motion-200) ease;
}
#tst-chat-icon:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 28px rgba(3, 165, 80, .5);
}

/* Soft pulsing glow rings behind the icon to draw the eye */
#tst-chat-icon::before,
#tst-chat-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--tst-r-50);
    background: var(--tst-surface-raised);
    opacity: .55;
    z-index: -1;
    animation: tst-icon-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
#tst-chat-icon::after { animation-delay: 1.2s; }

@keyframes tst-icon-pulse {
    0%   { transform: scale(1);   opacity: .55; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* =========================
   BACK-TO-TOP BUTTON
   Mirrors the chat icon on the opposite side. Icon sits on a
   white background per brand guidance.
   ========================= */
#tst-back-to-top {
    position: fixed;
    left: 20px;
    bottom: 40px;
    width: 48px;
    height: 48px;
    background: var(--tst-surface-card);
    color: var(--tst-surface-raised);
    border: 1px solid var(--tst-border-strong);
    border-radius: var(--tst-r-50);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--tst-fs-18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    z-index: 99998;
    transition: transform var(--tst-motion-200) ease, box-shadow var(--tst-motion-200) ease,
                background var(--tst-motion-200) ease, color var(--tst-motion-200) ease;
}
#tst-back-to-top.tst-visible { display: flex; }
#tst-back-to-top:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    background: var(--tst-surface-raised);
    color: var(--tst-text-primary);
    border-color: var(--tst-surface-raised);
}

/* =========================
   CHAT BOX
   ========================= */
#tst-chat-box {
    position: fixed;
    right: 20px;
    bottom: 110px;
    width: 370px;
    max-width: calc(100vw - 40px);
    height: 500px;
    max-height: 500px;
    display: none;
    flex-direction: column;
    background: var(--tst-surface-card);
    border-radius: var(--tst-r-10);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    overflow: hidden;
    z-index: 99999;
    font-family: var(--tst-font);
    font-size: var(--tst-fs-16);
    font-weight: var(--tst-fw-base);
    line-height: var(--tst-lh-base);
    color: var(--tst-text-tertiary);
}
#tst-chat-box.active { display: flex; }

/* Header — black base surface with white text/logo */
.tst-chatbox-header {
    background: var(--tst-surface-base);
    color: var(--tst-text-primary);
    padding: var(--tst-sp-12) 16px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--tst-r-10) var(--tst-r-10) 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--tst-sp-10);
    font-size: var(--tst-fs-15);
    font-weight: var(--tst-fw-semi);
    position: relative;
    z-index: 30;
}
.tst-chatbox-header span:nth-child(2) { flex: 1; }

/* Logo always renders on a white plate so it stays legible on black */
.tst-header-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: var(--tst-r-6);
    background: var(--tst-surface-card);
    padding: 2px;
}
#tst-header-whatsapp {
    color: var(--tst-text-primary);
    font-size: var(--tst-fs-18);
    opacity: .9;
    text-decoration: none !important;
    transition: color var(--tst-motion-200) ease, opacity var(--tst-motion-200) ease;
}
#tst-header-whatsapp:hover { opacity: 1; color: var(--tst-surface-raised); }
#tst-close {
    cursor: pointer;
    font-size: var(--tst-fs-16);
    transition: color var(--tst-motion-200) ease;
}
#tst-close:hover { color: var(--tst-surface-strong); }

/* Body */
.tst-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--tst-sp-10);
}

/* Chat area */
#tst-chat-area {
    flex: 1;
    overflow-y: auto;
    padding: var(--tst-sp-8) var(--tst-sp-5);
    margin-bottom: var(--tst-sp-7);
}

.tst-bot,
.tst-user {
    padding: var(--tst-sp-10) var(--tst-sp-12);
    border-radius: var(--tst-r-10);
    margin-bottom: var(--tst-sp-8);
    max-width: 90%;
    line-height: 1.55;
    font-size: var(--tst-fs-14);
    animation: tst-msg-in var(--tst-motion-220) ease;
}
.tst-bot {
    background: var(--tst-surface-soft);
    color: var(--tst-text-tertiary);
}
.tst-user {
    background: var(--tst-surface-raised);
    color: var(--tst-text-primary);
    margin-left: auto;
    text-align: right;
}

@keyframes tst-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================
   TYPING INDICATOR
   ========================= */
.tst-typing-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--tst-sp-8);
    padding: var(--tst-sp-10) var(--tst-sp-14);
}
.tst-typing-text {
    font-size: var(--tst-fs-13-5);
    color: var(--tst-text-inverse);
    font-style: italic;
}
.tst-typing {
    display: inline-flex;
    align-items: center;
    gap: var(--tst-sp-5);
}
.tst-typing span {
    width: 7px;
    height: 7px;
    border-radius: var(--tst-r-50);
    background: var(--tst-surface-raised);
    display: inline-block;
    animation: tst-bounce 1.2s infinite ease-in-out;
}
.tst-typing span:nth-child(1) { animation-delay: 0s; }
.tst-typing span:nth-child(2) { animation-delay: .15s; }
.tst-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes tst-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: .5; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

/* =========================
   SUGGESTIONS / QUICK REPLIES
   ========================= */
.tst-quick { list-style: none; padding: 0; margin: var(--tst-sp-7) 0; }
.tst-suggest {
    cursor: pointer;
    color: var(--tst-surface-raised);
    font-weight: var(--tst-fw-semi);
    font-size: var(--tst-fs-14);
    padding: var(--tst-sp-5) 0;
    transition: color var(--tst-motion-200) ease;
}
.tst-suggest:hover {
    text-decoration: underline;
    color: var(--tst-surface-strong);
}

/* Learn-more link button on FAQ answers */
.tst-link-btn {
    display: inline-block;
    margin-top: var(--tst-sp-7);
    padding: var(--tst-sp-7) var(--tst-sp-14);
    border-radius: var(--tst-r-50);
    background: var(--tst-surface-strong);
    color: var(--tst-text-secondary) !important;
    font-size: var(--tst-fs-13-5);
    font-weight: var(--tst-fw-semi);
    text-decoration: none !important;
    transition: filter var(--tst-motion-200) ease;
}
.tst-link-btn:hover { filter: brightness(.94); }

/* =========================
   INPUT ROW
   ========================= */
.tst-input-wrap {
    display: flex;
    gap: var(--tst-sp-8);
    margin-top: var(--tst-sp-7);
    flex-shrink: 0;
    align-items: center;
}
#tst-user-input {
    flex: 1;
    height: 80px;
    border-radius: var(--tst-r-8);
    border: 1px solid var(--tst-border);
    padding: 0 var(--tst-sp-10);
    font-family: var(--tst-font);
    font-size: var(--tst-fs-14);
    color: var(--tst-text-tertiary);
    transition: border-color var(--tst-motion-200) ease;
}
#tst-user-input:focus {
    outline: none;
    border-color: var(--tst-surface-raised);
}

/* Attach button — icon on a white background */
#tst-attach-btn {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    padding: 0;
    border-radius: var(--tst-r-8);
    border: 1px solid var(--tst-border);
    background: var(--tst-surface-card);
    color: var(--tst-surface-raised);
    cursor: pointer;
    font-size: var(--tst-fs-15);
    transition: background var(--tst-motion-200) ease, border-color var(--tst-motion-200) ease;
}
#tst-attach-btn:hover {
    background: var(--tst-surface-tint);
    border-color: var(--tst-surface-raised);
}
#tst-send-btn {
    height: 40px;
    width: 44px;
    flex-shrink: 0;
    padding: 0;
    border-radius: var(--tst-r-8);
    border: 1px solid var(--tst-surface-raised);
    background: var(--tst-surface-raised);
    color: var(--tst-text-primary);
    cursor: pointer;
    font-size: var(--tst-fs-14);
    transition: filter var(--tst-motion-200) ease;
}
#tst-send-btn:hover { filter: brightness(1.06); }
#tst-send-btn:disabled,
#tst-user-input:disabled { opacity: .5; cursor: not-allowed; }

/* Pending file preview — shown after picking a file, before it's sent */
.tst-pending-file {
    display: flex;
    align-items: center;
    gap: var(--tst-sp-8);
    background: var(--tst-surface-tint);
    border: 1px solid var(--tst-border);
    border-radius: var(--tst-r-8);
    padding: var(--tst-sp-7) var(--tst-sp-10);
    margin-top: var(--tst-sp-8);
    font-size: var(--tst-fs-13-5);
    color: var(--tst-text-tertiary);
}
.tst-pending-file span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tst-pending-file .tst-pending-file-remove {
    cursor: pointer;
    color: var(--tst-text-inverse);
    font-size: var(--tst-fs-15);
    line-height: 1;
    padding: 2px var(--tst-sp-5);
    transition: color var(--tst-motion-200) ease;
}
.tst-pending-file .tst-pending-file-remove:hover { color: #c0392b; }

#tst-user-input.tst-input-required {
    border-color: #c0392b;
    animation: tst-shake var(--tst-motion-300);
}
@keyframes tst-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Attachment bubble (user-sent file) */
.tst-attachment {
    display: flex;
    align-items: center;
    gap: var(--tst-sp-8);
    background: rgba(255, 255, 255, .18);
    border-radius: var(--tst-r-8);
    padding: var(--tst-sp-8) var(--tst-sp-10);
    text-decoration: none !important;
    color: var(--tst-text-primary) !important;
    font-size: var(--tst-fs-13-5);
    font-weight: var(--tst-fw-semi);
}
.tst-attachment .tst-icon { width: 16px; height: 16px; }

/* Quick-action chips (file upload / complaint shortcuts) */
.tst-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tst-sp-8);
    margin: var(--tst-sp-10) 0 var(--tst-sp-5);
}
.tst-action-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tst-sp-7);
    background: var(--tst-surface-card);
    border: 1px solid var(--tst-border-strong);
    color: var(--tst-text-tertiary);
    padding: var(--tst-sp-7) var(--tst-sp-13);
    border-radius: var(--tst-r-35);
    font-size: var(--tst-fs-13-5);
    font-weight: var(--tst-fw-semi);
    cursor: pointer;
    transition: background var(--tst-motion-200) ease, color var(--tst-motion-200) ease,
                border-color var(--tst-motion-200) ease;
}
.tst-action-chip:hover {
    background: var(--tst-surface-raised);
    color: var(--tst-text-primary);
    border-color: var(--tst-surface-raised);
}

/* Links inside chat */
#tst-chat-box a { font-weight: var(--tst-fw-semi); text-decoration: none; }
#tst-chat-box a:hover { text-decoration: underline; }

/* =========================
   CONTACT FORM FALLBACK
   ========================= */
.tst-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--tst-sp-8);
    margin-top: var(--tst-sp-8);
}
.tst-contact-form input,
.tst-contact-form textarea {
    border: 1px solid var(--tst-border);
    border-radius: var(--tst-r-8);
    padding: var(--tst-sp-8) var(--tst-sp-10);
    font-size: var(--tst-fs-14);
    font-family: var(--tst-font);
    color: var(--tst-text-tertiary);
    transition: border-color var(--tst-motion-200) ease;
}
.tst-contact-form input:focus,
.tst-contact-form textarea:focus {
    outline: none;
    border-color: var(--tst-surface-raised);
}
.tst-contact-form textarea { min-height: 70px; resize: vertical; }
.tst-contact-submit {
    background: var(--tst-surface-strong);
    color: var(--tst-text-secondary);
    border: none;
    border-radius: var(--tst-r-8);
    padding: var(--tst-sp-10);
    font-family: var(--tst-font);
    font-size: var(--tst-fs-14);
    font-weight: var(--tst-fw-bold);
    cursor: pointer;
    transition: filter var(--tst-motion-200) ease;
}
.tst-contact-submit:hover { filter: brightness(.94); }
.tst-contact-submit:disabled { opacity: .6; cursor: not-allowed; }
.tst-success {
    color: var(--tst-surface-raised);
    font-weight: var(--tst-fw-semi);
    font-size: var(--tst-fs-14);
}
.tst-sla-note { font-size: var(--tst-fs-13-5); color: var(--tst-text-inverse); }

/* File attach row inside contact form */
.tst-file-label {
    display: flex;
    align-items: center;
    gap: var(--tst-sp-8);
    border: 1px dashed var(--tst-border-strong);
    border-radius: var(--tst-r-8);
    padding: var(--tst-sp-9) var(--tst-sp-12);
    font-size: var(--tst-fs-13-5);
    color: var(--tst-text-tertiary);
    cursor: pointer;
    transition: background var(--tst-motion-200) ease, border-color var(--tst-motion-200) ease;
}
.tst-file-label:hover {
    background: var(--tst-surface-tint);
    border-color: var(--tst-surface-raised);
}
.tst-file-label-text { flex: 1; line-height: 1.3; }
.tst-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.tst-file-chosen {
    display: flex;
    align-items: center;
    gap: var(--tst-sp-7);
    background: var(--tst-surface-tint);
    border-radius: var(--tst-r-6);
    padding: var(--tst-sp-7) var(--tst-sp-10);
    font-size: var(--tst-fs-13-5);
    color: var(--tst-text-tertiary);
    overflow: hidden;
}

/* =========================
   RTL SUPPORT (Arabic)
   Applied automatically once the widget detects an Arabic
   message — no manual language switch needed.
   ========================= */
.tst-rtl { direction: rtl; text-align: right; }
.tst-rtl .tst-user { margin-left: 0; margin-right: auto; text-align: left; }
.tst-rtl .tst-chatbox-header { flex-direction: row-reverse; }
.tst-rtl #tst-chat-icon { right: auto; left: 20px; }
.tst-rtl #tst-chat-box  { right: auto; left: 20px; }

/* Mobile */
@media (max-width: 480px) {
    #tst-chat-box { left: 10px; right: 10px; width: auto; }
    .tst-rtl #tst-chat-box { left: 10px; right: 10px; }
    #tst-back-to-top { left: 10px; bottom: 20px; width: 42px; height: 42px; font-size: var(--tst-fs-16); }
}

/* AI reply links rendered as pill-style buttons instead of raw URLs */
.tst-chat-link-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--tst-sp-7);
    margin: var(--tst-sp-7) var(--tst-sp-5) 2px 0;
    padding: var(--tst-sp-7) var(--tst-sp-14);
    background: var(--tst-surface-raised);
    color: var(--tst-text-primary) !important;
    border-radius: var(--tst-r-50);
    font-size: var(--tst-fs-13-5);
    font-weight: var(--tst-fw-semi);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tst-motion-200) ease;
}
.tst-chat-link-btn:hover {
    background: var(--tst-surface-base);
    color: var(--tst-text-primary) !important;
}

/* =====================================================
   INLINE SVG ICONS
   em-based sizing keeps each icon proportional to its
   surrounding text, and vertical-align keeps it lined up
   with the text baseline.
   ===================================================== */
.tst-icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}
.tst-chat-link-btn .tst-icon { width: 11px; height: 11px; }