/* ============================================================
   TBM Assist – Widget v2.0.2
   Black & white UI, one accent (default #fa3105) for the orb and actions.
   Every property is !important so themes can't bleed in.
   Author: TBM – Two Brothers Media (https://twobrothersmedia.in/)
============================================================ */

#tbma-root {
    --tbma-ink: #000000;
    --tbma-paper: #ffffff;
    --tbma-mute: #6b6b6b;
    --tbma-faint: #9a9a9a;
    --tbma-line: #ebebeb;
    --tbma-tint: #f5f5f5;
    --tbma-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tbma-ease: cubic-bezier(.2, .8, .2, 1);
    --tbma-side: 24px;
    --tbma-bottom: 24px;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: var(--tbma-font) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
#tbma-root *, #tbma-root *::before, #tbma-root *::after {
    box-sizing: border-box !important;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}
#tbma-root svg { display: block !important; }
#tbma-root button { font-family: var(--tbma-font) !important; -webkit-tap-highlight-color: transparent !important; }

/* ══════════ THE ORB — glowing wave + star ══════════ */
.tbma-orb {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 30%),
        radial-gradient(circle at 30% 25%, var(--tbma-accent-glow) 0%, rgba(255,255,255,0) 55%),
        radial-gradient(circle at 70% 80%, var(--tbma-accent-deep) 0%, rgba(0,0,0,0) 60%),
        var(--tbma-accent) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tbma-orb-wave {
    position: absolute !important;
    inset: -30% !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg,
        var(--tbma-accent-glow), var(--tbma-accent) 25%, var(--tbma-accent-deep) 45%,
        var(--tbma-accent) 60%, var(--tbma-accent-light) 80%, var(--tbma-accent-glow)) !important;
    filter: blur(9px) !important;
    opacity: .85 !important;
    mix-blend-mode: soft-light !important;
    animation: tbma-spin 7s linear infinite !important;
    z-index: 0 !important;
}
.tbma-orb-shine {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%) !important;
    animation: tbma-breathe 3.6s ease-in-out infinite !important;
    z-index: 1 !important;
}
.tbma-orb .tbma-star {
    position: relative !important;
    z-index: 2 !important;
    width: 42% !important;
    height: 42% !important;
    fill: #ffffff !important;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.9)) !important;
}
.tbma-orb-sm { width: 34px !important; height: 34px !important; }
.tbma-orb-lg { width: 60px !important; height: 60px !important; }
.tbma-orb-xl { width: 76px !important; height: 76px !important; box-shadow: 0 0 0 10px rgba(var(--tbma-accent-rgb), .07), 0 18px 40px rgba(var(--tbma-accent-rgb), .35) !important; }
.tbma-orb-xs { width: 24px !important; height: 24px !important; }
.tbma-orb-xs .tbma-orb-wave { filter: blur(4px) !important; }

/* thinking: the orb spins faster */
.tbma-thinking .tbma-orb-wave { animation-duration: 1.4s !important; }

@keyframes tbma-spin { to { transform: rotate(360deg); } }
@keyframes tbma-breathe { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }

/* ══════════ LAUNCHER ══════════ */
#tbma-launcher {
    position: fixed !important;
    bottom: var(--tbma-bottom) !important;
    right: var(--tbma-side) !important;
    left: auto !important;
    top: auto !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
}
.tbma-pos-left #tbma-launcher { right: auto !important; left: var(--tbma-side) !important; flex-direction: row-reverse !important; }

.tbma-launcher-orb {
    position: relative !important;
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 22px rgba(var(--tbma-accent-rgb), .55), 0 10px 28px rgba(var(--tbma-accent-rgb), .3) !important;
    transition: transform .35s var(--tbma-ease), box-shadow .35s var(--tbma-ease) !important;
}
#tbma-launcher:hover .tbma-launcher-orb { transform: scale(1.06) !important; box-shadow: 0 0 30px rgba(var(--tbma-accent-rgb), .7), 0 12px 32px rgba(var(--tbma-accent-rgb), .35) !important; }
#tbma-launcher:focus-visible .tbma-launcher-orb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tbma-ink), 0 0 22px rgba(var(--tbma-accent-rgb), .55) !important; }

.tbma-launcher-orb .tbma-orb { transition: transform .4s var(--tbma-ease), opacity .3s ease !important; }
.tbma-launcher-close {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    opacity: 0 !important;
    transform: rotate(-90deg) scale(.6) !important;
    transition: transform .4s var(--tbma-ease), opacity .3s ease !important;
    z-index: 3 !important;
}
#tbma-launcher.tbma-is-open .tbma-launcher-orb { background: var(--tbma-ink) !important; box-shadow: 0 10px 28px rgba(0,0,0,.28) !important; }
#tbma-launcher.tbma-is-open .tbma-launcher-orb .tbma-orb { opacity: 0 !important; transform: scale(.4) rotate(90deg) !important; }
#tbma-launcher.tbma-is-open .tbma-launcher-close { opacity: 1 !important; transform: none !important; }

.tbma-launcher-label {
    display: inline-block !important;
    background: var(--tbma-ink) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
    opacity: 0 !important;
    transform: translateX(8px) !important;
    pointer-events: none !important;
    transition: opacity .3s ease, transform .35s var(--tbma-ease) !important;
}
.tbma-pos-left .tbma-launcher-label { transform: translateX(-8px) !important; }
#tbma-launcher:hover .tbma-launcher-label,
#tbma-launcher:focus-visible .tbma-launcher-label,
#tbma-launcher.tbma-peek .tbma-launcher-label { opacity: 1 !important; transform: none !important; }
#tbma-launcher.tbma-is-open .tbma-launcher-label { opacity: 0 !important; transform: translateX(8px) !important; }

/* ══════════ PANEL ══════════ */
#tbma-panel {
    position: fixed !important;
    bottom: calc(var(--tbma-bottom) + 76px) !important;
    right: var(--tbma-side) !important;
    left: auto !important;
    top: auto !important;
    z-index: 2147483001 !important;
    width: 400px !important;
    max-width: calc(100vw - 32px) !important;
    height: 640px !important;
    max-height: calc(100vh - 130px) !important;
    max-height: calc(100dvh - 130px) !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--tbma-paper) !important;
    color: var(--tbma-ink) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.08) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(16px) scale(.97) !important;
    transform-origin: bottom right !important;
    transition: opacity .28s ease, transform .4s var(--tbma-ease), visibility 0s linear .4s !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    text-align: left !important;
}
.tbma-pos-left #tbma-panel { right: auto !important; left: var(--tbma-side) !important; transform-origin: bottom left !important; }
#tbma-panel.tbma-is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: opacity .28s ease, transform .4s var(--tbma-ease), visibility 0s !important;
}
#tbma-panel.tbma-no-anim { transition: none !important; }

/* Header */
.tbma-head {
    border-radius: 23px 23px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 14px 12px 14px 16px !important;
    margin: 0 !important;
    background: var(--tbma-paper) !important;
    border-bottom: 1px solid transparent !important;
    flex-shrink: 0 !important;
    transition: border-color .2s ease !important;
}
#tbma-panel.tbma-scrolled .tbma-head { border-bottom-color: var(--tbma-line) !important; }
.tbma-head-text { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 1px !important; }
.tbma-head-name { font-size: 15px !important; font-weight: 650 !important; color: var(--tbma-ink) !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.tbma-head-status { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; color: var(--tbma-mute) !important; line-height: 1.3 !important; }
.tbma-live { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.15) !important; flex-shrink: 0 !important; }
.tbma-head-actions { display: flex !important; gap: 2px !important; flex-shrink: 0 !important; }
.tbma-icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: var(--tbma-ink) !important;
    box-shadow: none !important;
    transition: background .15s ease !important;
}
.tbma-icon-btn svg { width: 19px !important; height: 19px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.tbma-icon-btn:hover { background: var(--tbma-tint) !important; }
.tbma-icon-btn:focus-visible { outline: 2px solid var(--tbma-ink) !important; outline-offset: 1px !important; }

/* Body */
.tbma-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 18px 18px !important;
    margin: 0 !important;
    background: var(--tbma-paper) !important;
}
.tbma-body::-webkit-scrollbar { width: 6px !important; height: 6px !important; background: transparent !important; }
.tbma-body::-webkit-scrollbar-track { background: transparent !important; }
.tbma-body::-webkit-scrollbar-thumb { background: #d9d9d9 !important; border-radius: 9px !important; border: 0 !important; }
.tbma-body::-webkit-scrollbar-thumb:hover { background: #bdbdbd !important; }
.tbma-body::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
@supports not selector(::-webkit-scrollbar) {
    .tbma-body { scrollbar-width: thin !important; scrollbar-color: #d9d9d9 transparent !important; }
}

/* Welcome */
.tbma-welcome { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 18px 4px 6px !important; margin: 0 !important; }
#tbma-panel.tbma-has-chat .tbma-welcome { display: none !important; }
.tbma-welcome-title { font-size: 24px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; color: var(--tbma-ink) !important; margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
.tbma-welcome-text { font-size: 14.5px !important; color: var(--tbma-mute) !important; line-height: 1.55 !important; margin: 0 0 22px !important; padding: 0 !important; max-width: 34ch !important; }

.tbma-welcome-text:empty { display: none !important; }
.tbma-suggest { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; margin: 0 0 22px !important; width: 100% !important; }
.tbma-suggest:empty { display: none !important; }
.tbma-chip {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    background: var(--tbma-paper) !important;
    color: var(--tbma-ink) !important;
    border: 1px solid var(--tbma-line) !important;
    border-radius: 999px !important;
    padding: 9px 15px !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    white-space: normal !important;
    transition: border-color .15s ease, background .15s ease !important;
}
.tbma-chip:hover { border-color: var(--tbma-ink) !important; background: var(--tbma-paper) !important; color: var(--tbma-ink) !important; }
.tbma-chip:focus-visible { outline: 2px solid var(--tbma-ink) !important; outline-offset: 2px !important; }

.tbma-contact { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding-top: 16px !important; border-top: 1px solid var(--tbma-line) !important; width: 100% !important; margin: 0 !important; }
.tbma-contact:empty { display: none !important; }
.tbma-contact-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: var(--tbma-tint) !important;
    color: var(--tbma-ink) !important;
    font-size: 13px !important;
    font-weight: 550 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: background .15s ease !important;
}
.tbma-contact-link:hover { background: #ebebeb !important; color: var(--tbma-ink) !important; text-decoration: none !important; }
.tbma-contact-link:focus-visible { outline: 2px solid var(--tbma-ink) !important; outline-offset: 1px !important; }
.tbma-contact-link svg { width: 16px !important; height: 16px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.tbma-contact-link.tbma-wa svg { fill: currentColor !important; stroke: none !important; }

/* Conversation log */
.tbma-log { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 10px 0 4px !important; margin: 0 !important; list-style: none !important; }
.tbma-log:empty { display: none !important; }

.tbma-msg { display: flex !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; animation: tbma-in .35s var(--tbma-ease) both !important; }
.tbma-msg-u { justify-content: flex-end !important; }
.tbma-msg-u .tbma-text {
    background: var(--tbma-ink) !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    border-radius: 18px 18px 6px 18px !important;
    max-width: 82% !important;
    white-space: pre-wrap !important;
}
.tbma-msg-a .tbma-orb-xs { margin-top: 1px !important; }
.tbma-msg-a .tbma-text { color: var(--tbma-ink) !important; max-width: calc(100% - 34px) !important; padding: 1px 0 0 !important; }
.tbma-text { font-size: 14.5px !important; line-height: 1.6 !important; word-wrap: break-word !important; overflow-wrap: anywhere !important; margin: 0 !important; }
.tbma-text p { margin: 0 0 10px !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
.tbma-text p:last-child { margin-bottom: 0 !important; }
.tbma-text strong { font-weight: 650 !important; color: inherit !important; }
.tbma-text ul, .tbma-text ol { margin: 0 0 10px !important; padding: 0 0 0 20px !important; list-style-position: outside !important; }
.tbma-text ul { list-style-type: disc !important; }
.tbma-text ol { list-style-type: decimal !important; }
.tbma-text li { margin: 0 0 4px !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
.tbma-text li::marker { color: var(--tbma-faint) !important; }
.tbma-text a { color: var(--tbma-ink) !important; text-decoration: underline !important; text-decoration-color: var(--tbma-accent) !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; font-weight: 550 !important; }
.tbma-text a:hover { color: var(--tbma-accent) !important; }
.tbma-msg-u .tbma-text a { color: #fff !important; }

.tbma-reveal { animation: tbma-wipe .55s var(--tbma-ease) both !important; }

/* Thinking */
.tbma-thinking-row { display: flex !important; align-items: center !important; gap: 10px !important; animation: tbma-in .3s var(--tbma-ease) both !important; }
.tbma-thinking-text {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    background: linear-gradient(90deg, var(--tbma-faint) 0%, var(--tbma-ink) 50%, var(--tbma-faint) 100%) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: tbma-shimmer 1.6s linear infinite !important;
}

/* Inline actions under a reply (retry etc.) */
.tbma-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding-left: 34px !important; padding-right: 0 !important; margin: -6px 0 0 !important; }

/* ══════════ LEAD CARD ══════════ */
.tbma-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid var(--tbma-line) !important;
    border-radius: 18px !important;
    background: var(--tbma-paper) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
    animation: tbma-in .4s var(--tbma-ease) both !important;
}
.tbma-card-title { font-size: 15.5px !important; font-weight: 650 !important; margin: 0 0 4px !important; color: var(--tbma-ink) !important; line-height: 1.3 !important; }
.tbma-card-text { font-size: 13.5px !important; color: var(--tbma-mute) !important; margin: 0 0 14px !important; line-height: 1.5 !important; }
.tbma-form-row { display: flex !important; align-items: stretch !important; gap: 8px !important; margin: 0 0 10px !important; width: 100% !important; }
.tbma-form-row input { flex: 1 1 auto !important; }
.tbma-form label.tbma-lbl { display: block !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--tbma-ink) !important; margin: 0 0 5px !important; line-height: 1.2 !important; }
.tbma-form-field { margin: 0 0 10px !important; }
.tbma-form input,
.tbma-form select,
.tbma-form textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--tbma-ink) !important;
    background: var(--tbma-paper) !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}
.tbma-form textarea { resize: none !important; min-height: 64px !important; }
.tbma-form select {
    width: 88px !important;
    flex-shrink: 0 !important;
    padding-right: 26px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px !important;
    cursor: pointer !important;
}
.tbma-form input:focus, .tbma-form select:focus, .tbma-form textarea:focus { border-color: var(--tbma-ink) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important; }
.tbma-form .tbma-invalid { border-color: #d92d20 !important; box-shadow: 0 0 0 3px rgba(217,45,32,.1) !important; }
.tbma-form-error { font-size: 12.5px !important; color: #d92d20 !important; margin: 0 0 10px !important; line-height: 1.4 !important; }
.tbma-form-error:empty { display: none !important; }
.tbma-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 16px !important;
    margin: 4px 0 0 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    background: var(--tbma-ink) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .15s ease, transform .15s ease !important;
}
.tbma-btn:hover { background: var(--tbma-accent) !important; color: #fff !important; }
.tbma-btn:active { transform: scale(.99) !important; }
.tbma-btn:focus-visible { outline: 2px solid var(--tbma-ink) !important; outline-offset: 2px !important; }
.tbma-btn[disabled] { opacity: .55 !important; cursor: default !important; background: var(--tbma-ink) !important; }
.tbma-btn-ghost { width: auto !important; background: var(--tbma-paper) !important; color: var(--tbma-ink) !important; border: 1px solid var(--tbma-line) !important; padding: 9px 14px !important; font-weight: 550 !important; margin: 0 !important; }
.tbma-btn-ghost:hover { background: var(--tbma-paper) !important; color: var(--tbma-ink) !important; border-color: var(--tbma-ink) !important; }
.tbma-card-alt { font-size: 12.5px !important; color: var(--tbma-mute) !important; margin: 12px 0 0 !important; text-align: center !important; }
.tbma-card-alt a { color: var(--tbma-ink) !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
.tbma-done { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
.tbma-done-icon { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: var(--tbma-ink) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.tbma-done-icon svg { width: 16px !important; height: 16px !important; fill: none !important; stroke: #fff !important; stroke-width: 2.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }

/* ══════════ COMPOSER ══════════ */
.tbma-compose { flex-shrink: 0 !important; border-radius: 0 0 23px 23px !important; padding: 10px 14px 10px !important; margin: 0 !important; background: var(--tbma-paper) !important; border-top: 1px solid var(--tbma-line) !important; }
.tbma-field {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    min-height: 48px !important;
    padding: 6px 6px 6px 16px !important;
    margin: 0 !important;
    background: var(--tbma-tint) !important;
    border: 1px solid transparent !important;
    border-radius: 24px !important;
    transition: border-color .15s ease, background .15s ease !important;
}
.tbma-field:focus-within { background: var(--tbma-paper) !important; border-color: var(--tbma-ink) !important; }
#tbma-root textarea.tbma-input {
    flex: 1 1 auto !important;
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 110px !important;
    padding: 0 !important;
    margin: 0 0 7px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--tbma-ink) !important;
    font-size: 14.5px !important;
    line-height: 22px !important;
    resize: none !important;
    overflow: hidden !important;
    box-sizing: content-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    scrollbar-width: none !important;
}
#tbma-root textarea.tbma-input::-webkit-scrollbar { display: none !important; width: 0 !important; }
#tbma-root textarea.tbma-input.tbma-overflow { overflow-y: auto !important; }
.tbma-input::placeholder { color: var(--tbma-faint) !important; opacity: 1 !important; }
.tbma-send {
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--tbma-ink) !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .2s ease, opacity .2s ease, transform .2s var(--tbma-ease) !important;
}
.tbma-send svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.tbma-send:not([disabled]) { background: var(--tbma-accent) !important; }
.tbma-send:not([disabled]):hover { transform: scale(1.06) !important; }
.tbma-send[disabled] { opacity: .25 !important; cursor: default !important; }
.tbma-send:focus-visible { outline: 2px solid var(--tbma-ink) !important; outline-offset: 2px !important; }
.tbma-powered { text-align: center !important; font-size: 11px !important; color: var(--tbma-faint) !important; margin: 8px 0 0 !important; padding: 0 !important; line-height: 1.2 !important; }
.tbma-powered a { color: var(--tbma-mute) !important; text-decoration: none !important; font-weight: 600 !important; }
.tbma-powered a:hover { color: var(--tbma-ink) !important; }

.tbma-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* ══════════ MOTION ══════════ */
@keyframes tbma-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tbma-wipe { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes tbma-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ══════════ MOBILE — contained floating card, never full screen ══════════ */
@media (max-width: 480px) {
    #tbma-root { --tbma-side: 16px; --tbma-bottom: 16px; }
    .tbma-launcher-orb, .tbma-orb-lg { width: 56px !important; height: 56px !important; }
    .tbma-launcher-label { display: none !important; }
    #tbma-panel {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        bottom: 84px !important;
        height: 72vh !important;
        height: 72dvh !important;
        max-height: 600px !important;
        border-radius: 22px !important;
    }
    .tbma-compose { border-radius: 0 0 21px 21px !important; }
    .tbma-head { border-radius: 21px 21px 0 0 !important; }
    .tbma-pos-left #tbma-panel { left: 12px !important; right: 12px !important; }
    .tbma-welcome { padding-top: 12px !important; }
    .tbma-welcome-title { font-size: 21px !important; }
    .tbma-orb-xl { width: 60px !important; height: 60px !important; }
    /* 16px stops iOS Safari zooming the page on focus */
    #tbma-root textarea.tbma-input, .tbma-form input, .tbma-form select, .tbma-form textarea { font-size: 16px !important; }
    #tbma-panel.tbma-kb-open {
        top: var(--tbma-vv-top, 8px) !important;
        bottom: auto !important;
        height: var(--tbma-vv-h, 60vh) !important;
        max-height: none !important;
    }
    #tbma-panel.tbma-kb-open .tbma-powered { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    #tbma-root *, #tbma-root *::before, #tbma-root *::after { animation: none !important; transition: none !important; }
}

@media print { #tbma-root { display: none !important; } }
