/*
 * Trackergram Chat — layout 3 colunas (sidebar | thread | context).
 * Carregado via FilamentAsset no AppServiceProvider.
 *
 * Filament 4: variáveis de cor são oklch() — usar var(--xxx) direto,
 * NUNCA rgb(var(--xxx)). Semitransparente: color-mix(in oklch, var(--xxx) N%, transparent).
 */

[x-cloak] { display: none !important; }

/* Altura do topbar do Filament (fi-topbar usa h-16 = 4rem) */
:root { --tg-topbar: 4rem; }

.tg-chat {
    position: relative;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    gap: 0;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
    background: white;
    height: calc(100vh - 12rem);
    height: calc(100dvh - 12rem);
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
}

.tg-chat--no-context {
    grid-template-columns: 280px minmax(0, 1fr);
}
.tg-chat--no-context .tg-chat__context { display: none; }

.dark .tg-chat {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

/* Telas apertadas: layout volta a 2 colunas; quando user pede o painel,
   ele aparece como overlay absoluto sobre o thread (parent é relative). */
@media (max-width: 1280px) {
    .tg-chat {
        grid-template-columns: 280px minmax(0, 1fr);
    }
    .tg-chat__context {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 320px;
        z-index: 10;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.12);
    }
}

/* ── Mobile: single-pane navegável estilo WhatsApp ──────────────────── */
@media (max-width: 768px) {
    /* Preenche exatamente o espaço abaixo do topbar do Filament,
       independente do padding/título da page. */
    .tg-chat {
        position: fixed;
        top: var(--tg-topbar);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        max-height: none;
        grid-template-columns: 1fr;
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--gray-200);
        z-index: 10;
    }
    .dark .tg-chat { border-top-color: var(--gray-700); }

    /* Estado padrão: mostra só lista; thread e context escondidos */
    .tg-chat__sidebar { display: flex; }
    .tg-chat__thread,
    .tg-chat__context { display: none; }

    /* Com contato selecionado: mostra só thread, esconde lista */
    .tg-chat--has-selected .tg-chat__sidebar { display: none; }
    .tg-chat--has-selected .tg-chat__thread { display: flex; }

    /* Painel de contexto: overlay abaixo do topbar */
    .tg-chat--show-context.tg-chat--has-selected .tg-chat__context {
        display: flex;
        position: fixed;
        top: var(--tg-topbar);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        width: auto;
        box-shadow: none;
        border-left: 0;
    }

    /* iOS safe area (home bar) */
    .tg-chat__compose {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Botão "voltar" e "fechar context": só aparecem em mobile */
.tg-chat__back-btn,
.tg-chat__context-close {
    display: none;
}

@media (max-width: 768px) {
    .tg-chat__back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        background: transparent;
        border: 0;
        border-radius: 0.5rem;
        color: var(--gray-700);
        font-size: 1.25rem;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .dark .tg-chat__back-btn { color: var(--gray-300); }
    .tg-chat__back-btn:hover,
    .tg-chat__back-btn:active { background: var(--gray-100); }
    .dark .tg-chat__back-btn:hover,
    .dark .tg-chat__back-btn:active { background: var(--gray-800); }

    /* Menu ⋯ sempre visível em mobile (sem hover disponível) */
    .tg-chat__item-menu-btn { opacity: 1; }
}

/* Header do painel de contexto (mobile mostra título + X; desktop só X) */
.tg-chat__context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 0.5rem;
}
.dark .tg-chat__context-head { border-bottom-color: var(--gray-700); }

.tg-chat__context-head-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
}
.dark .tg-chat__context-head-title { color: var(--gray-100); }

.tg-chat__context-close {
    background: transparent;
    border: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    color: var(--gray-500);
    font-size: 1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.tg-chat__context-close:hover,
.tg-chat__context-close:active { background: var(--gray-100); color: var(--gray-900); }
.dark .tg-chat__context-close:hover,
.dark .tg-chat__context-close:active { background: var(--gray-800); color: var(--gray-100); }

@media (min-width: 769px) {
    .tg-chat__context-head-title { display: none; }
    .tg-chat__context-close { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 768px) {
    .tg-chat__context-close { display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.tg-chat__sidebar {
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dark .tg-chat__sidebar { border-right-color: var(--gray-700); }

.tg-chat__sidebar-head {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    flex-shrink: 0;
}
.dark .tg-chat__sidebar-head {
    border-bottom-color: var(--gray-700);
    background: var(--gray-800);
}

.tg-chat__search,
.tg-chat__bot-filter {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 1rem; /* ≥1rem evita zoom automático no iOS */
    background: white;
    color: var(--gray-900);
}
.dark .tg-chat__search,
.dark .tg-chat__bot-filter {
    background: var(--gray-900);
    border-color: var(--gray-700);
    color: var(--gray-100);
}
.tg-chat__search:focus,
.tg-chat__bot-filter:focus {
    outline: none;
    border-color: var(--primary-500);
}

.tg-chat__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.tg-chat__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background 120ms ease;
    position: relative;
    min-height: 3.5rem; /* alvo de toque mínimo */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.dark .tg-chat__item { border-bottom-color: var(--gray-800); }
.tg-chat__item:hover { background: var(--gray-50); }
.dark .tg-chat__item:hover { background: var(--gray-800); }

.tg-chat__item.is-active { background: var(--primary-50); }
.dark .tg-chat__item.is-active { background: color-mix(in oklch, var(--primary-500) 18%, transparent); }

.tg-chat__item.is-unread .tg-chat__item-name { font-weight: 600; }
.tg-chat__item.is-unread .tg-chat__item-preview { color: var(--gray-900); }
.dark .tg-chat__item.is-unread .tg-chat__item-preview { color: var(--gray-100); }

.tg-chat__item-body { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }

.tg-chat__item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }

.tg-chat__item-name {
    font-size: 0.95rem; color: var(--gray-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .tg-chat__item-name { color: var(--gray-100); }

.tg-chat__item-time { font-size: 0.75rem; color: var(--gray-500); flex-shrink: 0; }

.tg-chat__item-preview {
    font-size: 0.85rem; color: var(--gray-600);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .tg-chat__item-preview { color: var(--gray-400); }

.tg-chat__item-bot {
    font-size: 0.7rem; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.05em;
}

.tg-chat__item-side { display: flex; align-items: center; gap: 0.25rem; position: relative; }

.tg-chat__item-menu-btn {
    background: transparent; border: 0; cursor: pointer;
    color: var(--gray-500); font-size: 1rem;
    padding: 0.25rem 0.5rem; border-radius: 0.25rem;
    min-width: 2.5rem; min-height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 120ms ease, background 120ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.tg-chat__item:hover .tg-chat__item-menu-btn { opacity: 1; }
.tg-chat__item-menu-btn:hover,
.tg-chat__item-menu-btn:active { background: var(--gray-200); }
.dark .tg-chat__item-menu-btn:hover,
.dark .tg-chat__item-menu-btn:active { background: var(--gray-700); }

.tg-chat__item-menu {
    position: absolute; right: 0; top: 100%; margin-top: 0.25rem;
    background: white; border: 1px solid var(--gray-200); border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 20; min-width: 180px;
}
.dark .tg-chat__item-menu { background: var(--gray-800); border-color: var(--gray-700); }
.tg-chat__item-menu button {
    display: block; width: 100%; padding: 0.625rem 0.75rem; text-align: left;
    background: transparent; border: 0; cursor: pointer; font-size: 0.875rem;
    color: var(--gray-900); min-height: 2.75rem;
    -webkit-tap-highlight-color: transparent;
}
.dark .tg-chat__item-menu button { color: var(--gray-100); }
.tg-chat__item-menu button:hover,
.tg-chat__item-menu button:active { background: var(--gray-100); }
.dark .tg-chat__item-menu button:hover,
.dark .tg-chat__item-menu button:active { background: var(--gray-700); }

/* ── Avatares com cor consistente ────────────────────────────────────── */

.tg-chat__avatar {
    width: 2.25rem; height: 2.25rem;
    border-radius: 999px;
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 1rem; flex-shrink: 0;
    background: var(--primary-500);
}
.tg-chat__avatar--lg { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }

.tg-chat__avatar--c0 { background: #ef4444; }   /* red */
.tg-chat__avatar--c1 { background: #f97316; }   /* orange */
.tg-chat__avatar--c2 { background: #eab308; }   /* yellow */
.tg-chat__avatar--c3 { background: #22c55e; }   /* green */
.tg-chat__avatar--c4 { background: #14b8a6; }   /* teal */
.tg-chat__avatar--c5 { background: #3b82f6; }   /* blue */
.tg-chat__avatar--c6 { background: #8b5cf6; }   /* violet */
.tg-chat__avatar--c7 { background: #ec4899; }   /* pink */

.tg-chat__unread {
    background: var(--primary-500); color: white;
    border-radius: 999px; padding: 0.125rem 0.5rem;
    font-size: 0.7rem; font-weight: 600; min-width: 1.25rem; text-align: center;
}

.tg-chat__empty {
    padding: 2rem 1.5rem; color: var(--gray-500);
    text-align: center; font-size: 0.875rem; line-height: 1.5;
}

/* ── Thread ──────────────────────────────────────────────────────────── */

.tg-chat__thread {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--gray-50);
    position: relative;
}
.dark .tg-chat__thread { background: var(--gray-950); }

.tg-chat__thread-head {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    background: white;
    flex-shrink: 0;
}
.dark .tg-chat__thread-head {
    background: var(--gray-900);
    border-bottom-color: var(--gray-700);
}

.tg-chat__thread-id { flex: 1; min-width: 0; }
.tg-chat__thread-name { font-weight: 600; color: var(--gray-900); }
.dark .tg-chat__thread-name { color: var(--gray-100); }

.tg-chat__thread-meta {
    font-size: 0.8rem; color: var(--gray-500);
    display: flex; gap: 0.25rem; flex-wrap: wrap;
}
.tg-chat__sep { color: var(--gray-400); }

.tg-chat__badge {
    padding: 0.125rem 0.5rem; border-radius: 0.375rem;
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
}
.tg-chat__badge--danger { background: var(--danger-100); color: var(--danger-700); }
.dark .tg-chat__badge--danger {
    background: color-mix(in oklch, var(--danger-500) 18%, transparent);
    color: var(--danger-300);
}

.tg-chat__context-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    background: transparent; border: 1px solid var(--gray-300);
    color: var(--gray-600); border-radius: 999px; cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.dark .tg-chat__context-toggle { border-color: var(--gray-600); color: var(--gray-400); }
.tg-chat__context-toggle:hover,
.tg-chat__context-toggle:active { background: var(--gray-100); color: var(--gray-900); }
.dark .tg-chat__context-toggle:hover,
.dark .tg-chat__context-toggle:active { background: var(--gray-800); color: var(--gray-100); }

/* Estado ativo: painel aberto */
.tg-chat__context-toggle.is-active {
    background: color-mix(in oklch, var(--primary-500) 12%, transparent);
    border-color: var(--primary-400);
    color: var(--primary-600);
}
.dark .tg-chat__context-toggle.is-active {
    background: color-mix(in oklch, var(--primary-500) 18%, transparent);
    border-color: var(--primary-500);
    color: var(--primary-400);
}

.tg-chat__placeholder {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: var(--gray-400); font-size: 0.95rem;
    flex-direction: column; gap: 0.75rem; text-align: center; padding: 2rem;
}

.tg-chat__messages {
    flex: 1; overflow-y: auto; padding: 1rem;
    display: flex; flex-direction: column; gap: 0.125rem;
    scroll-behavior: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.tg-chat__top-sentinel {
    width: 100%; height: 1px;
}
.tg-chat__loading {
    text-align: center; color: var(--gray-500);
    font-size: 0.75rem; padding: 0.5rem 0;
}

/* Date divider */
.tg-msg-divider {
    align-self: center; margin: 0.75rem 0 0.5rem;
    font-size: 0.75rem; color: var(--gray-500);
    background: color-mix(in oklch, var(--gray-200) 60%, transparent);
    padding: 0.25rem 0.75rem; border-radius: 999px;
}
.dark .tg-msg-divider {
    background: color-mix(in oklch, var(--gray-800) 60%, transparent);
    color: var(--gray-400);
}

/* Bubbles base */
.tg-msg {
    max-width: 70%;
    display: flex; flex-direction: column; gap: 0.125rem;
    margin-bottom: 0.125rem;
}
@media (max-width: 768px) {
    .tg-msg { max-width: 85%; }
}
.tg-msg--in  { align-self: flex-start; }
.tg-msg--out { align-self: flex-end; }

.tg-msg__bubble {
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.92rem; line-height: 1.45;
    word-wrap: break-word; word-break: break-word;
}

/* Grouping — bubbles encostadas com border-radius reduzido entre vizinhas */
.tg-msg--in .tg-msg__bubble  { border-bottom-left-radius:  0.25rem; }
.tg-msg--out .tg-msg__bubble { border-bottom-right-radius: 0.25rem; }

.tg-msg--continued.tg-msg--in .tg-msg__bubble  { border-top-left-radius:  0.25rem; }
.tg-msg--continued.tg-msg--out .tg-msg__bubble { border-top-right-radius: 0.25rem; }

.tg-msg--first-in-group.tg-msg--in .tg-msg__bubble  { border-bottom-left-radius:  0.25rem; }
.tg-msg--first-in-group.tg-msg--out .tg-msg__bubble { border-bottom-right-radius: 0.25rem; }

.tg-msg--last-in-group.tg-msg--in .tg-msg__bubble {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 1rem;
}
.tg-msg--last-in-group.tg-msg--out .tg-msg__bubble {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 1rem;
}

.tg-msg + .tg-msg.tg-msg--continued,
.tg-msg + .tg-msg.tg-msg--last-in-group { margin-top: 1px; }

.tg-msg.tg-msg--last-in-group,
.tg-msg.tg-msg--solo { margin-bottom: 0.5rem; }

/* Colors */
.tg-msg--in .tg-msg__bubble {
    background: white; color: var(--gray-900);
    border: 1px solid var(--gray-200);
}
.dark .tg-msg--in .tg-msg__bubble {
    background: var(--gray-800); color: var(--gray-100);
    border-color: var(--gray-700);
}
.tg-msg--out .tg-msg__bubble { background: var(--primary-500); color: white; }
.tg-msg--pending .tg-msg__bubble { opacity: 0.6; }
.tg-msg--failed .tg-msg__bubble {
    background: var(--danger-100); color: var(--danger-700);
}
.dark .tg-msg--failed .tg-msg__bubble {
    background: color-mix(in oklch, var(--danger-500) 20%, transparent);
    color: var(--danger-300);
}

.tg-msg__meta {
    font-size: 0.7rem; color: var(--gray-500);
    display: flex; gap: 0.25rem; padding: 0 0.25rem;
}
.tg-msg--out .tg-msg__meta { justify-content: flex-end; }
.tg-msg__type { color: var(--gray-500); font-style: italic; }

.tg-msg__photo-link { display: block; }

.tg-msg__photo {
    display: block;
    max-width: 220px;
    max-height: 200px;
    border-radius: 0.5rem;
    object-fit: cover;
    cursor: pointer;
}

.tg-msg__photo-caption {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.tg-msg__status { font-size: 0.85rem; line-height: 1; }
.tg-msg__status--pending { color: var(--gray-400); }
.tg-msg__status--sent    { color: var(--primary-500); }
.tg-msg__status--failed  { color: var(--danger-500); }

.tg-msg__error {
    font-size: 0.75rem; color: var(--danger-600); padding: 0 0.25rem;
}

/* Floating "↓ N novas" */
.tg-chat__scroll-bottom {
    position: sticky; bottom: 0.5rem; align-self: center;
    background: var(--primary-600); color: white;
    border: 0; border-radius: 999px;
    padding: 0.375rem 0.875rem; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ── Compose ─────────────────────────────────────────────────────────── */

.tg-chat__compose {
    border-top: 1px solid var(--gray-200);
    padding: 0.75rem;
    background: white;
    display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
    align-items: end;
    flex-shrink: 0;
}
.dark .tg-chat__compose {
    background: var(--gray-900);
    border-top-color: var(--gray-700);
}

.tg-chat__compose-wrap { position: relative; min-width: 0; }

.tg-chat__compose-input {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem; /* ≥1rem evita zoom automático no iOS */
    resize: vertical; min-height: 2.5rem;
    background: white; color: var(--gray-900);
    line-height: 1.45;
}
.dark .tg-chat__compose-input {
    background: var(--gray-900);
    border-color: var(--gray-700);
    color: var(--gray-100);
}
.tg-chat__compose-input:focus { outline: none; border-color: var(--primary-500); }
.tg-chat__compose-input:disabled { opacity: 0.5; cursor: not-allowed; }

.tg-chat__send {
    background: var(--primary-600); color: white; border: 0;
    border-radius: 0.5rem; padding: 0.5rem 1rem;
    font-weight: 600; cursor: pointer; height: 2.5rem;
    min-width: 2.75rem;
    transition: background 120ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.tg-chat__send:hover:not(:disabled) { background: var(--primary-700); }
.tg-chat__send:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) {
    .tg-chat__send { height: 2.75rem; padding: 0.5rem 1.25rem; }
}

/* Autocomplete templates */
.tg-chat__autocomplete {
    position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
    background: white; border: 1px solid var(--gray-200);
    border-radius: 0.5rem; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    max-height: 280px; overflow-y: auto; z-index: 30;
    -webkit-overflow-scrolling: touch;
}
.dark .tg-chat__autocomplete { background: var(--gray-800); border-color: var(--gray-700); }

.tg-chat__autocomplete-item {
    display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; row-gap: 0.125rem;
    width: 100%; padding: 0.5rem 0.75rem;
    background: transparent; border: 0; text-align: left; cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    min-height: 2.75rem;
    -webkit-tap-highlight-color: transparent;
}
.dark .tg-chat__autocomplete-item { border-bottom-color: var(--gray-700); }
.tg-chat__autocomplete-item:last-child { border-bottom: 0; }
.tg-chat__autocomplete-item.is-highlight,
.tg-chat__autocomplete-item:hover { background: var(--primary-50); }
.dark .tg-chat__autocomplete-item.is-highlight,
.dark .tg-chat__autocomplete-item:hover {
    background: color-mix(in oklch, var(--primary-500) 15%, transparent);
}

.tg-chat__autocomplete-name { font-weight: 600; color: var(--gray-900); }
.dark .tg-chat__autocomplete-name { color: var(--gray-100); }
.tg-chat__autocomplete-slug {
    font-family: monospace; color: var(--primary-600);
    font-size: 0.8rem; align-self: center;
}
.tg-chat__autocomplete-body {
    grid-column: 1 / -1;
    color: var(--gray-500); font-size: 0.8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Painel direito (contexto) ───────────────────────────────────────── */

.tg-chat__context {
    border-left: 1px solid var(--gray-200);
    background: white;
    overflow-y: auto;
    display: flex; flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
}
.dark .tg-chat__context {
    background: var(--gray-900);
    border-left-color: var(--gray-700);
}

.tg-chat__context-section { display: flex; flex-direction: column; gap: 0.5rem; }

.tg-chat__context-title {
    font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--gray-500);
}

.tg-chat__context-card {
    background: var(--gray-50);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--gray-900);
    line-height: 1.5;
}
.dark .tg-chat__context-card { background: var(--gray-800); color: var(--gray-100); }

.tg-chat__muted { color: var(--gray-500); font-size: 0.8rem; }
.tg-chat__link {
    color: var(--primary-600); text-decoration: underline; font-weight: 600;
}
.dark .tg-chat__link { color: var(--primary-400); }

/* Tags */
.tg-chat__tags {
    display: flex; flex-wrap: wrap; gap: 0.375rem;
    align-items: center;
}
.tg-chat__tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--gray-300);
    background: var(--gray-100);
    color: var(--gray-800);
    border-radius: 999px;
}
.dark .tg-chat__tag {
    background: color-mix(in oklch, var(--gray-700) 40%, transparent);
    border-color: var(--gray-600);
    color: var(--gray-200);
}
.tg-chat__tag-x {
    background: transparent; border: 0; cursor: pointer;
    color: var(--gray-500); font-size: 0.95rem; line-height: 1;
    padding: 0; margin-left: 0.125rem;
    min-width: 1.5rem; min-height: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.tg-chat__tag-x:hover { color: var(--danger-500); }

.tg-chat__tag--add {
    cursor: pointer;
    border-style: dashed;
    color: var(--gray-600);
    min-height: 1.75rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.tg-chat__tag-add { position: relative; }
.tg-chat__tag-dropdown {
    position: absolute; top: 100%; left: 0; margin-top: 0.25rem;
    background: white; border: 1px solid var(--gray-200);
    border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 180px; max-height: 240px; overflow-y: auto; z-index: 20;
    -webkit-overflow-scrolling: touch;
}
.dark .tg-chat__tag-dropdown { background: var(--gray-800); border-color: var(--gray-700); }
.tg-chat__tag-option {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0; cursor: pointer;
    padding: 0.625rem 0.75rem; font-size: 0.875rem;
    color: var(--gray-900); min-height: 2.75rem;
    -webkit-tap-highlight-color: transparent;
}
.dark .tg-chat__tag-option { color: var(--gray-100); }
.tg-chat__tag-option:hover,
.tg-chat__tag-option:active { background: var(--gray-100); }
.dark .tg-chat__tag-option:hover,
.dark .tg-chat__tag-option:active { background: var(--gray-700); }

/* Notas */
.tg-chat__note-form { display: flex; flex-direction: column; gap: 0.375rem; }
.tg-chat__note-input {
    width: 100%; resize: vertical; min-height: 3rem;
    border: 1px solid var(--gray-300); border-radius: 0.375rem;
    padding: 0.5rem; font-size: 1rem; /* ≥1rem evita zoom no iOS */
    background: white; color: var(--gray-900);
}
.dark .tg-chat__note-input {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-100);
}

.tg-chat__btn-sm {
    background: var(--primary-600); color: white;
    border: 0; border-radius: 0.375rem;
    padding: 0.375rem 0.75rem; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; align-self: flex-start;
    min-height: 2.25rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.tg-chat__btn-sm:hover { background: var(--primary-700); }

.tg-chat__notes {
    list-style: none; padding: 0; margin: 0.5rem 0 0;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.tg-chat__note {
    background: rgba(255, 235, 130, 0.4);
    border-left: 3px solid #facc15;
    padding: 0.5rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
}
.dark .tg-chat__note { background: rgba(250, 204, 21, 0.1); }

.tg-chat__note-body { color: var(--gray-900); white-space: pre-wrap; line-height: 1.4; }
.dark .tg-chat__note-body { color: var(--gray-100); }

.tg-chat__note-meta {
    font-size: 0.7rem; color: var(--gray-500);
    margin-top: 0.25rem; display: flex; gap: 0.5rem; align-items: center;
}
.tg-chat__note-del {
    background: transparent; border: 0; cursor: pointer;
    color: var(--danger-600); font-size: 0.7rem; padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.tg-chat__note-del:hover { text-decoration: underline; }

/* ── MarkdownV2 rendering inside outbound bubbles ─────────────────── */
.tg-msg__bubble code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    background: color-mix(in oklch, currentColor 12%, transparent);
    padding: 0.05em 0.3em;
    border-radius: 4px;
}
.tg-msg__bubble .tg-spoiler {
    background: color-mix(in oklch, currentColor 22%, transparent);
    border-radius: 4px;
    filter: blur(4px);
    transition: filter 0.15s ease;
    cursor: pointer;
}
.tg-msg__bubble .tg-spoiler:hover { filter: blur(0); }