:root {
    --bg: #f0f3f5;
    --surface: #ffffff;
    --surface-2: #f7f9fa;
    --border: #e2e8eb;
    --border-strong: #cfd8dc;
    --text: #1a2b32;
    --text-2: #5a6b73;
    --text-3: #8a9aa3;
    --accent: #0d7377;
    --accent-dark: #095456;
    --accent-soft: #e6f4f4;
    --accent-mid: #14a3a8;
    --ok: #2d8a4e;
    --ok-bg: #e8f6ee;
    --warn: #c47a12;
    --warn-bg: #fff4e5;
    --late: #c0392b;
    --late-bg: #fdecea;
    --bot: #e8eef0;
    --seller: #dceee9;
    --attendant: #e6f4f4;
    --shadow: 0 1px 2px rgba(26,43,50,.06), 0 4px 12px rgba(26,43,50,.04);
    --radius: 10px;
    --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.45;
    overflow: hidden;
  }

  /* Top bar */
  .topbar {
    height: 56px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
  }
  .logo-mark {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--accent-mid), var(--accent-dark));
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 14px;
    letter-spacing: -.5px;
  }
  .logo-text { font-weight: 650; font-size: 14.5px; color: var(--text); }
  .logo-sub { font-size: 11px; color: var(--text-3); font-weight: 500; margin-top: 1px; }

  .counters { display: flex; gap: 8px; flex: 1; }
  .counter {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    display: flex; flex-direction: column; min-width: 92px;
  }
  .counter .n { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.1; }
  .counter .l { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
  .counter.open .n { color: var(--accent); }
  .counter.progress .n { color: #1e6f9a; }
  .counter.wait .n { color: var(--warn); }
  .counter.done .n { color: var(--ok); }

  .top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  .search {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    width: 220px;
  }
  .search input {
    border: 0; outline: 0; background: transparent;
    font: inherit; color: var(--text); width: 100%;
  }
  .search input::placeholder { color: var(--text-3); }
  .search svg { color: var(--text-3); flex-shrink: 0; }
  .filter-btn, .user-chip {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    padding: 7px 12px;
    font: inherit; color: var(--text-2);
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
  }
  .filter-btn:hover { border-color: var(--border-strong); }
  .user-chip {
    background: var(--accent-soft);
    border-color: #c5e4e4;
    color: var(--accent-dark);
    font-weight: 600;
  }
  .avatar {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700; color: #fff;
    flex-shrink: 0;
  }
  .av-ana { background: #0d7377; }
  .av-bruno { background: #1e6f9a; }
  .av-clara { background: #7a5c9e; }
  .av-leo { background: #2d5a4a; }
  .av-seller { background: #5a6b73; }

  /* Layout */
  .app {
    display: grid;
    grid-template-columns: 320px 1fr 300px;
    height: calc(100vh - 56px);
  }

  /* Left: ticket list */
  .tickets {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .tickets-head {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
  }
  .tickets-head h2 { font-size: 13px; font-weight: 650; margin-bottom: 10px; }
  .assunto-tabs {
    display: flex; flex-wrap: wrap; gap: 5px;
  }
  .assunto-tab {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px; color: var(--text-2);
    cursor: pointer; font-family: inherit;
  }
  .assunto-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff; font-weight: 600;
  }
  .ticket-list { overflow-y: auto; flex: 1; }
  .ticket {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    transition: background .12s;
  }
  .ticket:hover { background: var(--surface-2); }
  .ticket.active {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    padding-left: 11px;
  }
  .ticket-id { font-size: 11px; color: var(--text-3); font-weight: 600; }
  .ticket-seller { font-weight: 650; font-size: 13px; color: var(--text); }
  .ticket-preview {
    grid-column: 1 / -1;
    color: var(--text-2); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ticket-meta {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 6px; margin-top: 4px;
  }
  .badge {
    font-size: 10px; font-weight: 650;
    padding: 2px 7px; border-radius: 999px;
    letter-spacing: .02em;
  }
  .badge.ok { background: var(--ok-bg); color: var(--ok); }
  .badge.warn { background: var(--warn-bg); color: var(--warn); }
  .badge.late { background: var(--late-bg); color: var(--late); }
  .badge.assunto {
    background: #eef2f4; color: var(--text-2); font-weight: 550;
  }
  .ticket-time { margin-left: auto; font-size: 11px; color: var(--text-3); }
  .ticket-assignee { display: flex; align-items: center; gap: 4px; }

  /* Center: conversation */
  .chat {
    display: flex; flex-direction: column;
    background: #e9eef0;
    min-width: 0;
  }
  .chat-head {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 18px;
    display: flex; align-items: center; gap: 12px;
  }
  .chat-head-info { flex: 1; min-width: 0; }
  .chat-head-info h1 { font-size: 15px; font-weight: 650; }
  .chat-head-info p { font-size: 12px; color: var(--text-2); margin-top: 2px; }
  .chat-actions { display: flex; gap: 8px; }
  .btn {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    padding: 7px 12px;
    font: inherit; font-weight: 600; font-size: 12.5px;
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; gap: 6px;
  }
  .btn:hover { background: var(--surface-2); }
  .btn.primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
  }
  .btn.primary:hover { background: var(--accent-dark); }
  .btn.ghost { color: var(--text-2); }
  .btn.danger { color: var(--late); border-color: #f0c4c0; }

  .messages {
    flex: 1; overflow-y: auto;
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 10px;
    background:
      radial-gradient(circle at 20% 10%, rgba(13,115,119,.04), transparent 40%),
      #e5ebed;
  }
  .sys {
    align-self: center;
    background: rgba(255,255,255,.85);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 11.5px;
    padding: 6px 12px;
    border-radius: 999px;
    max-width: 90%;
    text-align: center;
  }
  .bubble-row { display: flex; gap: 8px; max-width: 72%; }
  .bubble-row.left { align-self: flex-start; }
  .bubble-row.right { align-self: flex-end; flex-direction: row-reverse; }
  .bubble {
    padding: 9px 12px;
    border-radius: 12px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    position: relative;
  }
  .bubble.seller {
    background: var(--surface);
    border-top-left-radius: 4px;
  }
  .bubble.bot, .bubble.attendant {
    background: #d4ebe8;
    border-top-right-radius: 4px;
  }
  .bubble .who {
    font-size: 10.5px; font-weight: 700;
    margin-bottom: 3px;
  }
  .bubble.seller .who { color: var(--accent-dark); }
  .bubble.bot .who { color: #3d5a5c; }
  .bubble.attendant .who { color: #0a5c5f; }
  .bubble .text { color: var(--text); white-space: pre-wrap; }
  .bubble .meta {
    display: flex; justify-content: flex-end; gap: 6px;
    margin-top: 4px; font-size: 10.5px; color: var(--text-3);
  }

  .composer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 16px 14px;
  }
  .quick {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
  }
  .chip {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px; color: var(--text-2);
    cursor: pointer; font-family: inherit;
  }
  .chip:hover { border-color: var(--accent); color: var(--accent); }
  .composer-row {
    display: flex; gap: 8px; align-items: flex-end;
  }
  .composer textarea {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit; color: var(--text);
    resize: none; min-height: 44px; max-height: 120px;
    outline: none;
    background: var(--surface-2);
  }
  .composer textarea:focus { border-color: var(--accent); background: #fff; }
  .icon-btn {
    width: 40px; height: 40px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--text-2);
  }
  .icon-btn.send {
    background: var(--accent); border-color: var(--accent); color: #fff;
  }

  /* Right: details */
  .details {
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    display: flex; flex-direction: column;
  }
  .details-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
  }
  .details-section h3 {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-3);
    margin-bottom: 12px; font-weight: 700;
  }
  .field { margin-bottom: 12px; }
  .field:last-child { margin-bottom: 0; }
  .field label {
    display: block; font-size: 11px; color: var(--text-3);
    margin-bottom: 4px; font-weight: 550;
  }
  .field select, .field .value {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit; color: var(--text);
  }
  .field .value {
    background: transparent; border: 0; padding: 0;
    font-weight: 550;
  }
  .field .value.muted { color: var(--text-2); font-weight: 400; }
  .sla-box {
    background: var(--warn-bg);
    border: 1px solid #f0d9b0;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .sla-box.ok { background: var(--ok-bg); border-color: #b8e0c8; }
  .sla-box.late { background: var(--late-bg); border-color: #f0c4c0; }
  .sla-box .t { font-weight: 700; font-size: 15px; }
  .sla-box .s { font-size: 11px; color: var(--text-2); }
  .seller-card {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 12px;
  }
  .seller-card .big-av {
    width: 40px; height: 40px; border-radius: 50%;
    background: #5a6b73; color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px;
  }
  .seller-card strong { display: block; font-size: 13.5px; }
  .seller-card span { font-size: 12px; color: var(--text-2); }
  .kv { display: grid; grid-template-columns: 90px 1fr; gap: 6px 8px; font-size: 12.5px; }
  .kv dt { color: var(--text-3); }
  .kv dd { color: var(--text); font-weight: 500; }
  .hist-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
  }
  .hist-item:last-child { border-bottom: 0; }
  .hist-item .r { color: var(--text-2); font-size: 11px; margin-top: 2px; }
  .notes textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    font: inherit; color: var(--text);
    min-height: 80px; resize: vertical;
    background: #fffef5;
  }
  .note-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
  .note {
    background: #fffef5;
    border: 1px solid #efe8c8;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .note .by { font-size: 10.5px; color: var(--text-3); margin-bottom: 3px; font-weight: 600; }

  /* Mobile overlay hint */
  .mobile-nav { display: none; }

  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .tickets, .details { display: none; }
    .tickets.show, .details.show { display: flex; position: absolute; inset: 56px 0 0 0; z-index: 5; }
    .counters { display: none; }
    .search { width: 140px; }
    .logo { min-width: auto; }
    .logo-sub { display: none; }
    .mobile-nav {
      display: flex; gap: 6px;
    }
    .bubble-row { max-width: 88%; }
  }
/* ---- adições do app ---- */
.user-chip { position: relative; }
.menu { display:none; position:absolute; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); min-width:180px; z-index:50; padding:4px; }
.menu.show { display:block; }
.menu button { display:block; width:100%; text-align:left; border:0; background:none; padding:8px 10px; font:inherit; color:var(--text); cursor:pointer; border-radius:6px; font-weight:500; }
.menu button:hover { background:var(--surface-2); }
.filters-pop { display:none; position:absolute; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); padding:12px; z-index:50; width:220px; }
.filters-pop.show { display:block; }
.filters-pop label { display:flex; gap:6px; align-items:center; margin-bottom:8px; color:var(--text-2); font-weight:500; }
.filters-pop select { width:100%; border:1px solid var(--border); border-radius:8px; padding:6px; font:inherit; margin-bottom:8px; background:var(--surface-2); }
.rel { position: relative; }
.empty { padding:30px 16px; text-align:center; color:var(--text-3); }
.modal-bg { display:none; position:fixed; inset:0; background:rgba(26,43,50,.35); z-index:100; align-items:center; justify-content:center; padding:16px; }
.modal-bg.show { display:flex; }
.modal { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); width:100%; max-width:480px; max-height:90vh; overflow:auto; padding:18px; }
.modal h2 { font-size:15px; margin-bottom:12px; }
.modal .field input, .modal .field select { width:100%; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:8px 10px; font:inherit; }
.modal .row { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.modal table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:12px; }
.modal td, .modal th { text-align:left; padding:6px 4px; border-bottom:1px solid var(--border); }
.wa-stub { font-size:10px; color:var(--warn); }
.toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; padding:9px 14px; border-radius:8px; font-size:12.5px; z-index:200; display:none; }
.stub-banner { background:var(--warn-bg); color:var(--warn); font-size:11.5px; text-align:center; padding:4px; border-bottom:1px solid #f0d9b0; }
.tickets.show, .details.show { background: var(--surface); }
@media (max-width: 900px) {
  .chat-head { padding:10px 12px; flex-wrap:wrap; }
  .search { display:none; }
  .user-chip .uname { display:none; }
  .logo-text { font-size:13px; }
  .messages { padding:12px; }
  .topbar { gap:10px; padding:0 10px; }
}
@media (max-width: 900px) { .ftxt, .logo-text { display:none; } .filter-btn { padding:7px 9px; } .user-chip { padding:5px 7px; } }
@media (max-width: 900px) { .app { grid-template-columns: minmax(0,1fr); } .topbar { overflow: visible; } .top-actions { gap:6px; min-width:0; } .mobile-nav .filter-btn { padding:7px 8px; } .chat-actions .btn { padding:6px 9px; } }