/* ═══════════════════════════════════════════════════════
   AutoIQ Agents v5 — Design inspirado no Claude.ai
   ═══════════════════════════════════════════════════════ */

/* ── Reset ── */
.autoiq-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variáveis ── */
.autoiq-wrap {
    --sidebar-w:    260px;
    --sidebar-bg:   #1c1c1e;
    --sidebar-item: #2c2c2e;
    --sidebar-text: #e5e5ea;
    --sidebar-muted:#8e8e93;
    --sidebar-bdr:  #3a3a3c;

    --chat-bg:      #ffffff;
    --surface:      #f5f5f0;
    --border:       rgba(0,0,0,0.10);
    --border-light: rgba(0,0,0,0.07);
    --text:         #1a1a1a;
    --text-muted:   #6b7280;
    --text-hint:    #9ca3af;
    --accent:       #d97706;
    --success:      #059669;
    --success-bg:   #ecfdf5;
    --danger:       #dc2626;
    --danger-bg:    #fef2f2;
    --warn:         #d97706;
    --warn-bg:      #fffbeb;
    --info:         #2563eb;
    --code-bg:      #f3f4f6;
    --radius:       12px;
    --radius-sm:    8px;
    --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-mono:    'SF Mono', 'Fira Code', monospace;

    font-family:    var(--font);
    background:     var(--chat-bg);
    overflow:       hidden;
    min-height:     600px;
    width:          100%;
    display:        flex;
    flex-direction: column;
    color:          var(--text);
}

/* ── Screens ── */
.autoiq-screen { flex:1; display:flex; flex-direction:column; }

/* ══════════════════════════════════════════
   LOADING
══════════════════════════════════════════ */
.autoiq-screen-loading {
    align-items:center; justify-content:center;
    min-height:600px; background:var(--chat-bg);
}
.autoiq-spinner-ring {
    width:28px; height:28px;
    border:2px solid var(--border);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:iq-spin .7s linear infinite;
}
@keyframes iq-spin { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════════
   LOGIN
══════════════════════════════════════════ */
.autoiq-screen-login {
    align-items:center; justify-content:center;
    min-height:600px; background:var(--surface);
}
.autoiq-login-card {
    background:var(--chat-bg);
    border:1px solid var(--border);
    border-radius:16px;
    width:360px; max-width:calc(100vw - 32px);
    box-shadow:0 4px 24px rgba(0,0,0,.08);
    overflow:hidden;
}
.autoiq-login-header {
    padding:28px 28px 20px;
    text-align:center;
    border-bottom:1px solid var(--border-light);
}
.autoiq-login-title { font-size:20px; font-weight:700; color:var(--text); margin-top:8px; }
.autoiq-login-subtitle { font-size:13px; color:var(--text-muted); margin-top:4px; }
.autoiq-login-body { padding:20px 28px 24px; display:flex; flex-direction:column; gap:14px; }
.autoiq-field-group { display:flex; flex-direction:column; gap:5px; }
.autoiq-label { font-size:12px; font-weight:600; color:var(--text-muted); letter-spacing:.3px; text-transform:uppercase; }
.autoiq-input {
    width:100%; padding:10px 14px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    font-family:var(--font); font-size:14px; color:var(--text);
    outline:none; transition:border-color .15s, box-shadow .15s;
}
.autoiq-input:focus { border-color:rgba(0,0,0,.25); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.autoiq-input-wrap { position:relative; }
.autoiq-input-wrap .autoiq-input { padding-right:42px; }
.autoiq-toggle-pw {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; color:var(--text-hint);
    padding:4px; display:flex; align-items:center;
}
.autoiq-toggle-pw:hover { color:var(--text); }
.autoiq-toggle-pw svg { width:16px; height:16px; }
.autoiq-alert-error {
    background:var(--danger-bg); border:1px solid #fecaca;
    border-radius:var(--radius-sm); padding:8px 12px;
    font-size:13px; color:var(--danger);
}
.autoiq-btn-login {
    width:100%; padding:11px;
    background:var(--text); color:#fff;
    font-family:var(--font); font-size:14px; font-weight:600;
    border:none; border-radius:var(--radius-sm);
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    transition:opacity .15s; margin-top:4px;
}
.autoiq-btn-login:hover { opacity:.85; }
.autoiq-btn-login:disabled { opacity:.4; cursor:not-allowed; }
.autoiq-btn-spinner svg {
    width:16px; height:16px;
    animation:iq-spin .8s linear infinite;
}
.autoiq-login-footer { padding:12px; text-align:center; font-size:11px; color:var(--text-hint); border-top:1px solid var(--border-light); }

/* ══════════════════════════════════════════
   CHAT APP — Layout raiz
══════════════════════════════════════════ */
.autoiq-screen-chat {
    display:flex !important;
    flex-direction:row !important;
    height:100%;
    min-height:600px;
    position:relative;
    overflow:hidden;
    background:var(--chat-bg);
    flex:1;
}

/* ══════════════════════════════════════════
   SIDEBAR — estilo Claude
══════════════════════════════════════════ */
.autoiq-sidebar {
    width:var(--sidebar-w);
    flex-shrink:0;
    background:var(--sidebar-bg);
    display:flex;
    flex-direction:column;
    border-right:1px solid var(--sidebar-bdr);
    transition:width .2s ease, opacity .2s ease;
    overflow:hidden;
}

/* fechada: colapsa para zero */
.autoiq-sidebar:not(.autoiq-sidebar-open) {
    width:0;
    opacity:0;
    pointer-events:none;
}

/* Mobile: sidebar vira drawer sobre o chat */
@media (max-width: 768px) {
    .autoiq-sidebar {
        position:absolute;
        left:0; top:0; bottom:0;
        z-index:200;
        width:var(--sidebar-w) !important;
        opacity:1 !important;
        transform:translateX(-100%);
        transition:transform .22s cubic-bezier(.4,0,.2,1);
        pointer-events:none;
    }
    .autoiq-sidebar.autoiq-sidebar-open {
        transform:translateX(0);
        pointer-events:all;
    }
}

/* Overlay mobile */
.autoiq-overlay {
    display:none;
    position:absolute; inset:0;
    background:rgba(0,0,0,.5);
    z-index:150;
}
@media (max-width: 768px) {
    .autoiq-overlay.active { display:block; }
}

/* Header da sidebar */
.autoiq-sidebar-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 12px 10px;
    border-bottom:1px solid var(--sidebar-bdr);
    flex-shrink:0;
}
.autoiq-sidebar-brand {
    font-size:15px; font-weight:700; color:#fff;
    display:flex; align-items:center; gap:7px;
    letter-spacing:.2px;
}
.autoiq-sidebar-close-btn {
    width:28px; height:28px; border-radius:6px;
    background:transparent; border:none;
    color:var(--sidebar-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s, color .15s;
}
.autoiq-sidebar-close-btn:hover { background:var(--sidebar-item); color:#fff; }
.autoiq-sidebar-close-btn svg { width:16px; height:16px; display:block; }

/* Label de seção */
.autoiq-sidebar-section-label {
    font-size:10px; font-weight:700;
    letter-spacing:1px; color:var(--sidebar-muted);
    padding:14px 14px 6px;
    text-transform:uppercase;
    flex-shrink:0;
}

/* Lista de agentes — scrollbar visível e identificável */
.autoiq-agent-list {
    flex:1; overflow-y:auto !important; padding:4px 8px;
    scrollbar-width: auto !important;
    scrollbar-color: rgba(255,255,255,0.75) rgba(255,255,255,0.10) !important;
}
.autoiq-agent-list::-webkit-scrollbar {
    width: 14px !important;
    -webkit-appearance: none !important;
}
.autoiq-agent-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
    margin: 4px 0 !important;
}
.autoiq-agent-list::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.55) !important;
    border-radius: 8px !important;
    border: 3px solid #1c1c1e !important;
    background-clip: padding-box !important;
    min-height: 50px !important;
    transition: background-color 0.18s ease;
}
.autoiq-agent-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,0.85) !important;
    background-clip: padding-box !important;
}
.autoiq-agent-list::-webkit-scrollbar-thumb:active {
    background-color: rgba(255,255,255,1) !important;
    background-clip: padding-box !important;
}

.autoiq-agent-item {
    display:flex; align-items:center; gap:10px;
    width:100%; background:transparent; border:none;
    border-radius:8px; padding:8px 10px;
    cursor:pointer; text-align:left;
    transition:background .12s; margin-bottom:2px;
    color:var(--sidebar-text);
}
.autoiq-agent-item:hover  { background:var(--sidebar-item); }
.autoiq-agent-item.active { background:rgba(255,255,255,.1); }
.autoiq-agent-item.active .autoiq-agent-item-name { color:#fff; font-weight:600; }

.autoiq-agent-item-icon {
    width:36px; height:36px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; flex-shrink:0;
}
.autoiq-agent-item-info {
    display:flex; flex-direction:column; gap:1px;
    min-width:0; overflow:hidden;
}
.autoiq-agent-item-name {
    font-size:13px; font-weight:500; color:var(--sidebar-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.autoiq-agent-item-forn {
    font-size:11px; color:var(--sidebar-muted);
}
.autoiq-no-agents { padding:16px; font-size:13px; color:var(--sidebar-muted); text-align:center; }

/* Footer da sidebar */
.autoiq-sidebar-footer {
    border-top:1px solid var(--sidebar-bdr);
    padding:12px;
    flex-shrink:0;
}
.autoiq-usage-sidebar { margin-bottom:10px; }
.autoiq-usage-sidebar .autoiq-usage-label {
    font-size:10px; color:var(--sidebar-muted);
    text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px;
}
.autoiq-usage-row { display:flex; align-items:center; gap:8px; }
#autoiq-usage-count-s { font-size:12px; font-weight:700; color:var(--sidebar-text); white-space:nowrap; }
.autoiq-usage-bar-bg {
    flex:1; height:4px; background:var(--sidebar-bdr); border-radius:2px; overflow:hidden;
}
.autoiq-usage-bar { height:100%; border-radius:2px; transition:width .4s, background .4s; }
.autoiq-sidebar-logout {
    display:flex; align-items:center; gap:8px;
    width:100%; background:transparent;
    border:1px solid var(--sidebar-bdr); border-radius:8px;
    color:var(--sidebar-muted); font-size:13px; font-family:var(--font);
    padding:7px 12px; cursor:pointer; transition:background .15s, color .15s;
}
.autoiq-sidebar-logout:hover { background:var(--sidebar-item); color:#ff6b6b; }
.autoiq-sidebar-logout svg { width:15px; height:15px; flex-shrink:0; }

/* ══════════════════════════════════════════
   CHAT AREA
══════════════════════════════════════════ */
.autoiq-chat-area {
    flex:1; min-width:0;
    display:flex; flex-direction:column;
    background:var(--chat-bg);
    overflow:hidden;
}

/* Header do chat */
.autoiq-chat-header {
    background:var(--chat-bg);
    border-bottom:1px solid var(--border-light);
    padding:10px 16px;
    display:flex; align-items:center; gap:10px;
    flex-shrink:0; z-index:10;
    min-height:58px;
}
.autoiq-chat-header-info {
    display:flex; align-items:center; gap:10px;
    flex:1; min-width:0;
}
.autoiq-chat-avatar {
    width:34px; height:34px; border-radius:9px;
    background:var(--surface);
    display:flex; align-items:center; justify-content:center;
    font-size:17px; flex-shrink:0;
}
.autoiq-chat-name {
    font-size:14px; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.autoiq-chat-status {
    display:flex; align-items:center; gap:4px;
    font-size:11px; color:var(--text-muted);
}
.autoiq-status-dot {
    width:6px; height:6px; border-radius:50%;
    background:#2ecc71; flex-shrink:0;
    animation:iq-pulse 2s ease infinite;
}
@keyframes iq-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.85)} }

/* Botões de ícone no header */
.autoiq-btn-icon {
    width:34px; height:34px; border-radius:8px;
    background:transparent; border:none;
    color:var(--text-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .12s, color .12s; flex-shrink:0;
}
.autoiq-btn-icon:hover { background:var(--surface); color:var(--text); }
.autoiq-btn-icon svg { width:18px; height:18px; display:block; }

/* ══════════════════════════════════════════
   MENSAGENS
══════════════════════════════════════════ */
.autoiq-messages {
    flex:1; overflow-y:auto;
    padding:20px 0; scroll-behavior:smooth;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.30) transparent;
}
/* Webkit: barra sempre visível no chat (fundo claro → cor escura) */
.autoiq-messages::-webkit-scrollbar {
    width: 12px;
}
.autoiq-messages::-webkit-scrollbar-track {
    background: transparent;
}
.autoiq-messages::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.25);
    border-radius: 12px;
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background-color 0.18s ease;
}
.autoiq-messages::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.40);
    background-clip: content-box;
}
.autoiq-messages::-webkit-scrollbar-thumb:active {
    background-color: rgba(0,0,0,0.55);
    background-clip: content-box;
}

.autoiq-msg {
    display:flex; align-items:flex-start; gap:12px;
    padding:8px 20px; max-width:860px; margin:0 auto; width:100%;
}
.autoiq-msg-user {
    justify-content:flex-end;
}
.autoiq-msg-avatar {
    width:30px; height:30px; border-radius:8px;
    background:var(--surface);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; flex-shrink:0; margin-top:2px;
}
.autoiq-msg-user .autoiq-msg-avatar { display:none; }

.autoiq-msg-bubble {
    max-width:78%;
    font-size:14px; line-height:1.65; color:var(--text);
}
.autoiq-msg-user .autoiq-msg-bubble {
    background:var(--surface);
    border:1px solid var(--border-light);
    border-radius:16px 4px 16px 16px;
    padding:10px 14px;
    max-width:72%;
}

/* Conteúdo das bolhas */
.autoiq-msg-bubble h2 { font-size:16px; font-weight:700; color:var(--text); margin:14px 0 6px; }
.autoiq-msg-bubble h2:first-child { margin-top:2px; }
.autoiq-msg-bubble h3 { font-size:14px; font-weight:600; color:var(--text); margin:12px 0 4px; }
.autoiq-msg-bubble h4 { font-size:13px; font-weight:600; color:var(--text-muted); margin:10px 0 4px; text-transform:uppercase; letter-spacing:.3px; }
.autoiq-msg-bubble p  { margin:4px 0 8px; }
.autoiq-msg-bubble li { margin:3px 0 3px 18px; list-style-type:disc; }
.autoiq-msg-bubble hr { border:none; border-top:1px solid var(--border-light); margin:12px 0; }
.autoiq-msg-bubble strong { font-weight:600; color:var(--text); }
.autoiq-msg-bubble em    { color:var(--text-muted); font-style:italic; }
.autoiq-msg-bubble code  {
    background:var(--code-bg); border:1px solid var(--border-light);
    border-radius:4px; padding:1px 5px;
    font-family:var(--font-mono); font-size:12px; color:#c7254e;
}

/* Tabela */
.autoiq-table-wrap { overflow-x:auto; margin:8px 0; border-radius:var(--radius-sm); border:1px solid var(--border); }
.autoiq-table { width:100%; border-collapse:collapse; font-size:13px; }
.autoiq-table th {
    background:var(--surface); padding:8px 12px;
    text-align:left; font-size:11px; font-weight:700;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px;
    border-bottom:1px solid var(--border);
}
.autoiq-table td {
    padding:8px 12px; border-bottom:1px solid var(--border-light);
    color:var(--text); font-size:13px; vertical-align:top;
}
.autoiq-table tr:last-child td { border-bottom:none; }
.autoiq-table tr:hover td { background:var(--surface); }
.autoiq-table td:first-child { font-weight:500; }
.autoiq-table td code { background:var(--code-bg); border-radius:4px; padding:2px 6px; font-size:12px; color:var(--info); font-weight:700; }

/* Badges */
.autoiq-badge {
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 7px; border-radius:20px;
    font-size:11px; font-weight:600; margin:0 2px;
}
.autoiq-badge-ok     { background:var(--success-bg); color:var(--success); }
.autoiq-badge-danger { background:var(--danger-bg);  color:var(--danger);  }
.autoiq-badge-warn   { background:var(--warn-bg);    color:var(--warn);    }
.autoiq-verify {
    display:inline-flex; align-items:center; gap:4px;
    background:#fff8ed; border:1px solid #fed7aa;
    border-radius:6px; padding:3px 8px;
    font-size:12px; font-weight:600; color:#c2410c;
}

/* Cursor streaming */
.autoiq-cursor {
    display:inline-flex !important; align-items:center !important;
    gap:3px !important; margin-left:4px !important; vertical-align:middle !important;
}
.autoiq-cursor span {
    display:inline-block !important;
    width:5px !important; height:5px !important;
    background:var(--accent) !important;
    border-radius:50% !important;
    animation:iq-bounce 1.2s ease-in-out infinite !important;
}
.autoiq-cursor span:nth-child(2) { animation-delay:.2s !important; }
.autoiq-cursor span:nth-child(3) { animation-delay:.4s !important; }
@keyframes iq-bounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }

/* ══════════════════════════════════════════
   INPUT AREA
══════════════════════════════════════════ */
.autoiq-input-area {
    padding:10px 20px 14px;
    background:var(--chat-bg);
    border-top:1px solid var(--border-light);
    flex-shrink:0;
}
.autoiq-input-inner { max-width:760px; margin:0 auto; }
.autoiq-textarea {
    width:100%; background:var(--chat-bg);
    border:1px solid var(--border); border-radius:var(--radius);
    color:var(--text); font-family:var(--font); font-size:14px; line-height:1.6;
    padding:11px 14px; resize:none; outline:none;
    transition:border-color .15s, box-shadow .15s;
    box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.autoiq-textarea:focus { border-color:rgba(0,0,0,.22); box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.autoiq-textarea::placeholder { color:var(--text-hint); }
.autoiq-input-actions {
    display:flex; align-items:center; justify-content:space-between;
    margin-top:8px; gap:8px;
}
.autoiq-input-hint { font-size:11px; color:var(--text-hint); }
.autoiq-btn-send {
    background:var(--text); color:#fff;
    font-family:var(--font); font-size:13px; font-weight:600;
    border:none; border-radius:var(--radius-sm);
    padding:9px 16px; cursor:pointer;
    display:flex; align-items:center; gap:6px;
    transition:opacity .15s;
}
.autoiq-btn-send:hover { opacity:.85; }
.autoiq-btn-send:disabled { opacity:.35; cursor:not-allowed; }
.autoiq-btn-send svg { width:13px; height:13px; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 600px) {
    .autoiq-msg { padding:8px 12px; }
    .autoiq-msg-bubble { font-size:14px; max-width:88%; }
    .autoiq-input-area { padding:8px 12px 12px; }
    .autoiq-input-hint { display:none; }
    .autoiq-chat-header { padding:8px 10px; }
}

/* ══════════════════════════════════════════
   ADMIN extras
══════════════════════════════════════════ */
.iq-import-inline { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px; }
.iq-db-stats { display:flex;flex-wrap:wrap;gap:8px;margin:12px 0; }
.iq-db-stat-pill {
    padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;
    background:#f0f6ff;border:1px solid #c3d4f0;color:#2271b1;
}
.iq-db-stat-pill span { color:#555;font-weight:400;margin-left:4px; }