/* ============================================================
   Syniray Helpdesk — style.css
   Alinhado com o design system da plataforma principal
   ============================================================ */

/* ---------- Variáveis ---------- */
:root {
  --bg:             #F6F6F3;
  --bg2:            #EEEEE9;
  --surface:        #FFFFFF;
  --surface-hover:  #F9F9F7;
  --text:           #1A1A1E;
  --text2:          #6E6E78;
  --text3:          #9E9EA8;
  --accent:         #0D9488;
  --accent-h:       #0F766E;
  --accent-light:   #CCFBF1;
  --accent-sub:     rgba(13,148,136,.08);
  --border:         #E4E4DF;
  --border-l:       #F0F0EB;
  --danger:         #EF4444;
  --danger-h:       #DC2626;
  --warn:           #F59E0B;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.04);
  --shadow-md:      0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.08);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --sidebar-w: 240px;
  --font: 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono: 'JetBrains Mono','Fira Code',monospace;
  --tr: .2s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg:             #0C0E14;
  --bg2:            #14161E;
  --surface:        #1C1F2A;
  --surface-hover:  #242736;
  --text:           #E4E4EC;
  --text2:          #8A8A9A;
  --text3:          #5C5C6E;
  --accent:         #2DD4BF;
  --accent-h:       #14B8A6;
  --accent-light:   #0D3D38;
  --accent-sub:     rgba(45,212,191,.08);
  --border:         #2A2D3A;
  --border-l:       #22253A;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.2);
  --shadow-md:      0 4px 16px rgba(0,0,0,.25);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.35);
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow:hidden;height:100vh}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;border:none;outline:none;background:none;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}
::selection{background:var(--accent);color:#fff}

/* ============================================================
   LAYOUT
   ============================================================ */
.hd-sidebar {
  position:fixed;top:0;left:0;
  width:var(--sidebar-w);height:100vh;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  z-index:100;
  transition:transform var(--tr),width var(--tr);
  overflow:hidden;
}

.hd-sidebar-collapsed {
  width:60px;
}

.hd-sidebar-collapsed .hd-brand-sub,
.hd-sidebar-collapsed .hd-nav-item span:not(.hd-nav-badge):not(.hd-label-dot):not(.hd-status-dot),
.hd-sidebar-collapsed .hd-nav-section,
.hd-sidebar-collapsed .hd-agent-info,
.hd-sidebar-collapsed .hd-nav-badge {
  display:none;
}

.hd-sidebar-collapsed .hd-nav-item {
  justify-content:center;
  padding:10px 0;
}

.hd-sidebar-collapsed .hd-sidebar-brand {
  justify-content:center;
  padding:16px 0;
}

.hd-main {
  margin-left:var(--sidebar-w);
  height:100vh;
  display:flex;
  flex-direction:column;
  transition:margin-left var(--tr);
  overflow:hidden;
}

.hd-main-expanded {
  margin-left:60px;
}

/* ---------- Sidebar brand ---------- */
.hd-sidebar-brand {
  display:flex;align-items:center;gap:10px;
  padding:20px 16px 16px;
  border-bottom:1px solid var(--border-l);
  flex-shrink:0;
}

.hd-logo-ring {
  width:36px;height:36px;
  background:#000;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.hd-brand-name {
  font-size:1.05rem;font-weight:800;
  background:linear-gradient(135deg,var(--text),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:-.02em;
}

.hd-brand-sub {
  font-size:.68rem;color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;
  margin-top:1px;
}

/* ---------- Nav ---------- */
.hd-nav {
  flex:1;overflow-y:auto;
  padding:8px 8px;
}

.hd-nav-section {
  font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--text3);
  padding:12px 10px 4px;
}

.hd-nav-item {
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;
  border-radius:var(--r-sm);
  font-size:.82rem;font-weight:500;
  color:var(--text2);
  text-decoration:none;
  transition:all var(--tr);
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
}

.hd-nav-item:hover { background:var(--surface-hover);color:var(--text); }
.hd-nav-item.active { background:var(--accent-sub);color:var(--accent);font-weight:600; }

.hd-nav-badge {
  margin-left:auto;
  background:var(--accent-sub);
  color:var(--accent);
  font-size:.65rem;font-weight:700;
  padding:1px 6px;border-radius:99px;
  flex-shrink:0;
}

.hd-badge-urgent { background:rgba(239,68,68,.12);color:#EF4444; }
.hd-badge-high   { background:rgba(245,158,11,.12);color:#F59E0B; }

.hd-label-dot {
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}

.hd-status-dot {
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.hd-status-open    { background:#22C55E; }
.hd-status-pending { background:#F59E0B; }
.hd-status-closed  { background:#6B7280; }

/* ---------- Sidebar footer ---------- */
.hd-sidebar-footer {
  flex-shrink:0;
  padding:12px;
  border-top:1px solid var(--border-l);
}

.hd-agent-row {
  display:flex;align-items:center;gap:10px;
}

.hd-agent-avatar {
  width:32px;height:32px;
  border-radius:var(--r-sm);
  background:var(--accent);
  color:#fff;
  font-size:.8rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.hd-agent-name { font-size:.82rem;font-weight:600;color:var(--text); }
.hd-agent-role { font-size:.68rem;color:var(--text3); }

.hd-logout-btn {
  margin-left:auto;
  width:28px;height:28px;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);
  transition:all var(--tr);
  text-decoration:none;
}
.hd-logout-btn:hover { background:rgba(239,68,68,.1);color:var(--danger); }

/* ============================================================
   TOPBAR
   ============================================================ */
.hd-topbar {
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:52px;
  border-bottom:1px solid var(--border-l);
  background:var(--bg);
  flex-shrink:0;
  gap:12px;
}

.hd-topbar-left { display:flex;align-items:center;gap:12px; }
.hd-topbar-right { display:flex;align-items:center;gap:10px; }

.hd-topbar-menu {
  width:34px;height:34px;
  border-radius:var(--r-sm);
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--tr);
}
.hd-topbar-menu:hover { background:var(--surface-hover);color:var(--text); }

.hd-topbar-title {
  font-size:.92rem;font-weight:700;color:var(--text);
}

.hd-search-wrap {
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--text3);
}
.hd-search-wrap input {
  font-size:.82rem;color:var(--text);
  width:180px;
}
.hd-search-wrap input::placeholder { color:var(--text3); }

.hd-refresh-btn {
  width:32px;height:32px;
  border-radius:var(--r-sm);
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--tr);
}
.hd-refresh-btn:hover { border-color:var(--accent);color:var(--accent); }

.hd-topbar-time {
  font-size:.75rem;color:var(--text3);
  font-family:var(--mono);
  background:var(--surface);
  border:1px solid var(--border);
  padding:4px 10px;
  border-radius:var(--r-sm);
}

/* ============================================================
   CONTENT SPLIT
   ============================================================ */
.hd-content {
  display:flex;flex:1;overflow:hidden;
}

/* ---------- Ticket list ---------- */
.hd-ticket-list {
  width:360px;flex-shrink:0;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--bg);
}

.hd-list-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--border-l);
  gap:8px;
  flex-shrink:0;
}

.hd-filter-pills { display:flex;gap:4px;flex-wrap:wrap; }

.hd-pill {
  padding:5px 11px;
  border-radius:99px;
  font-size:.75rem;font-weight:600;
  color:var(--text2);
  background:transparent;
  border:1px solid transparent;
  transition:all var(--tr);
}
.hd-pill:hover { background:var(--surface-hover); }
.hd-pill.active { background:var(--accent-sub);color:var(--accent);border-color:var(--accent-light); }

.hd-sort-select {
  font-size:.75rem;color:var(--text2);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:4px 8px;
  cursor:pointer;
}

.hd-ticket-items {
  flex:1;overflow-y:auto;
}

/* ---------- Ticket row ---------- */
.hd-ticket-row {
  display:flex;align-items:stretch;
  border-bottom:1px solid var(--border-l);
  cursor:pointer;
  transition:background var(--tr);
  position:relative;
}
.hd-ticket-row:hover { background:var(--surface-hover); }
.hd-ticket-row-active { background:var(--accent-sub) !important; }

.hd-ticket-unread .hd-row-subject {
  font-weight:700;
}

.hd-priority-bar {
  width:3px;flex-shrink:0;
  border-radius:0;
}
.hd-p-urgent { background:#EF4444; }
.hd-p-high   { background:#F59E0B; }
.hd-p-normal { background:#0D9488; }

.hd-row-body {
  flex:1;padding:12px 14px;min-width:0;
}

.hd-row-top {
  display:flex;align-items:center;gap:6px;margin-bottom:4px;
}

.hd-row-code {
  font-size:.67rem;font-weight:700;
  font-family:var(--mono);color:var(--text3);
}

.hd-status-chip {
  font-size:.62rem;font-weight:700;
  padding:1px 7px;border-radius:99px;
  text-transform:uppercase;letter-spacing:.04em;
}
.hd-s-open    { background:rgba(34,197,94,.1);  color:#22C55E; }
.hd-s-pending { background:rgba(245,158,11,.1); color:#F59E0B; }
.hd-s-closed  { background:rgba(107,114,128,.1);color:#6B7280; }

.hd-row-time {
  margin-left:auto;
  font-size:.67rem;color:var(--text3);
  flex-shrink:0;
}

.hd-row-subject {
  font-size:.85rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:4px;
}

.hd-row-email {
  display:flex;align-items:center;gap:5px;
  font-size:.75rem;color:var(--text2);
}

.hd-inbox-chip {
  font-size:.62rem;font-weight:700;
  background:var(--accent-sub);color:var(--accent);
  padding:1px 6px;border-radius:4px;
  font-family:var(--mono);
}

.hd-row-labels { display:flex;flex-wrap:wrap;gap:4px;margin-top:6px; }

/* ---------- Labels ---------- */
.hd-label {
  font-size:.62rem;font-weight:700;
  padding:1px 7px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.04em;
}
.hd-label-billing  { background:rgba(245,158,11,.12); color:#D97706; }
.hd-label-bug      { background:rgba(239,68,68,.1);   color:#EF4444; }
.hd-label-security { background:rgba(139,92,246,.1);  color:#8B5CF6; }
.hd-label-account  { background:rgba(59,130,246,.1);  color:#3B82F6; }
.hd-label-feature  { background:rgba(16,185,129,.1);  color:#10B981; }

/* ---------- Empty / loading ---------- */
.hd-empty-list {
  display:flex;align-items:center;justify-content:center;
  height:200px;
  color:var(--text3);font-size:.85rem;
}

.hd-loading-pulse { padding:16px; }
.hd-pulse-row {
  height:64px;background:var(--surface);
  border-radius:var(--r-sm);margin-bottom:8px;
  animation:pulseBg 1.5s ease-in-out infinite;
}
@keyframes pulseBg {
  0%,100% { opacity:.5; }
  50%      { opacity:1; }
}

/* ============================================================
   TICKET DETAIL
   ============================================================ */
.hd-ticket-detail {
  flex:1;display:flex;flex-direction:column;overflow:hidden;
}

.hd-detail-empty {
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:12px;color:var(--text3);font-size:.88rem;
}

/* ---------- Detail header ---------- */
.hd-detail-header {
  padding:16px 24px 12px;
  border-bottom:1px solid var(--border-l);
  flex-shrink:0;
  background:var(--bg);
}

.hd-detail-header-top {
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:8px;
}

.hd-detail-code {
  font-size:.7rem;font-weight:700;font-family:var(--mono);
  color:var(--text3);margin-bottom:4px;
}

.hd-detail-subject {
  font-size:1.05rem;font-weight:700;color:var(--text);
  line-height:1.3;
}

.hd-detail-actions {
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}

.hd-status-select {
  padding:6px 10px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  font-size:.8rem;font-weight:600;
  color:var(--text);
  cursor:pointer;
  transition:border-color var(--tr);
}
.hd-status-select:focus { border-color:var(--accent); }

.hd-btn-danger-sm {
  width:32px;height:32px;
  border-radius:var(--r-sm);
  background:transparent;
  border:1px solid var(--border);
  color:var(--text3);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--tr);
}
.hd-btn-danger-sm:hover { background:rgba(239,68,68,.1);border-color:var(--danger);color:var(--danger); }

.hd-detail-meta {
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:.76rem;
}

.hd-meta-email {
  display:flex;align-items:center;gap:5px;
  color:var(--text2);
}

.hd-meta-inbox {
  font-size:.68rem;font-weight:700;
  font-family:var(--mono);
  background:var(--accent-sub);color:var(--accent);
  padding:2px 8px;border-radius:5px;
}

.hd-meta-priority {
  font-size:.68rem;font-weight:700;
  padding:2px 8px;border-radius:5px;
  text-transform:uppercase;letter-spacing:.04em;
}
.hd-p-chip-urgent { background:rgba(239,68,68,.12);color:#EF4444; }
.hd-p-chip-high   { background:rgba(245,158,11,.12);color:#F59E0B; }
.hd-p-chip-normal { background:var(--accent-sub);color:var(--accent); }

.hd-meta-date { color:var(--text3);font-size:.72rem; }

/* Plan banner */
.hd-user-plan-banner {
  display:flex;align-items:center;gap:6px;
  font-size:.75rem;
  padding:6px 12px;
  border-radius:var(--r-sm);
  margin-bottom:6px;
}
.hd-plan-free  { background:rgba(107,114,128,.1);color:#6B7280; }
.hd-plan-pro   { background:rgba(245,158,11,.1); color:#D97706; }
.hd-plan-max   { background:rgba(139,92,246,.1); color:#8B5CF6; }

/* ---------- Messages scroll ---------- */
.hd-messages-scroll {
  flex:1;overflow-y:auto;
  padding:20px 24px;
}

/* ---------- Messages ---------- */
.hd-msg {
  display:flex;gap:12px;
  margin-bottom:20px;
  animation:msgIn .3s ease-out;
}
@keyframes msgIn {
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.hd-msg-out { flex-direction:row-reverse; }

.hd-msg-avatar {
  width:32px;height:32px;flex-shrink:0;
  border-radius:var(--r-sm);
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;
}

.hd-msg-in .hd-msg-avatar {
  background:var(--bg2);color:var(--text2);
}

.hd-msg-body {
  max-width:72%;
}

.hd-msg-out .hd-msg-body { text-align:right; }

.hd-msg-header {
  display:flex;align-items:center;gap:8px;
  margin-bottom:5px;
  flex-wrap:wrap;
}
.hd-msg-out .hd-msg-header { justify-content:flex-end; }

.hd-msg-sender { font-size:.75rem;font-weight:700;color:var(--text); }
.hd-msg-time   { font-size:.68rem;color:var(--text3); }

.hd-note-chip {
  font-size:.62rem;font-weight:700;
  background:rgba(245,158,11,.12);color:#D97706;
  padding:1px 7px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.04em;
}

.hd-msg-content {
  display:inline-block;
  padding:10px 14px;
  border-radius:var(--r-md);
  font-size:.88rem;line-height:1.65;
  color:var(--text);
  text-align:left;
}

.hd-msg-in .hd-msg-content {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px var(--r-md) var(--r-md) var(--r-md);
}

.hd-msg-out .hd-msg-content {
  background:var(--accent-sub);
  border:1px solid var(--accent-light);
  border-radius:var(--r-md) 4px var(--r-md) var(--r-md);
  color:var(--text);
}

.hd-msg-note .hd-msg-content {
  background:rgba(245,158,11,.07) !important;
  border-color:rgba(245,158,11,.25) !important;
}

/* ---------- Reply box ---------- */
.hd-reply-box {
  flex-shrink:0;
  border-top:1px solid var(--border);
  background:var(--bg);
  padding:12px 20px 16px;
}

.hd-reply-tabs {
  display:flex;gap:2px;margin-bottom:10px;
}

.hd-reply-tab {
  padding:5px 12px;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  font-size:.77rem;font-weight:600;
  color:var(--text2);
  border-bottom:2px solid transparent;
  transition:all var(--tr);
}
.hd-reply-tab:hover { color:var(--text); }
.hd-reply-tab.active { color:var(--accent);border-bottom-color:var(--accent); }

.hd-reply-inner {
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color var(--tr);
  overflow:hidden;
}
.hd-reply-inner:focus-within { border-color:var(--accent); }

.hd-reply-inner textarea {
  width:100%;padding:12px 14px;
  font-size:.88rem;line-height:1.6;
  resize:none;color:var(--text);
  max-height:120px;overflow-y:auto;
  display:block;
}
.hd-reply-inner textarea::placeholder { color:var(--text3); }

.hd-reply-footer {
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;
  border-top:1px solid var(--border-l);
  gap:8px;
}

.hd-reply-hint { font-size:.72rem;color:var(--text3); }

.hd-send-btn {
  display:flex;align-items:center;gap:6px;
  padding:7px 16px;
  background:var(--accent);color:#fff;
  border-radius:var(--r-sm);
  font-size:.8rem;font-weight:700;
  transition:all var(--tr);
}
.hd-send-btn:hover { background:var(--accent-h);transform:scale(1.02); }
.hd-send-btn:disabled { opacity:.5;cursor:not-allowed;transform:none; }

/* Spinner */
.hd-spinner {
  width:12px;height:12px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .6s linear infinite;
  display:inline-block;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ============================================================
   TOAST
   ============================================================ */
.hd-toast-wrap {
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;gap:8px;
  align-items:center;pointer-events:none;
}

.hd-toast {
  padding:9px 20px;
  border-radius:var(--r-md);
  background:var(--surface);color:var(--text);
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
  font-size:.82rem;
  opacity:0;transform:translateY(10px) scale(.96);
  transition:all .25s ease;
  pointer-events:auto;
  max-width:320px;text-align:center;
}
.hd-toast.hd-toast-show { opacity:1;transform:translateY(0) scale(1); }
.hd-toast-error   { border-left:3px solid var(--danger); }
.hd-toast-success { border-left:3px solid var(--accent); }
.hd-toast-info    { border-left:3px solid #3B82F6; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.hd-login-body {
  overflow:auto;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
}

.hd-login-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:40px 36px;
  width:100%;max-width:380px;
}

.hd-login-brand {
  display:flex;align-items:center;gap:12px;
  margin-bottom:28px;
}

.hd-login-title {
  font-size:1.4rem;font-weight:800;color:var(--text);
  margin-bottom:4px;
}

.hd-login-sub {
  font-size:.85rem;color:var(--text2);
  margin-bottom:24px;
}

.hd-login-error {
  padding:10px 14px;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.25);
  border-radius:var(--r-sm);
  color:var(--danger);
  font-size:.83rem;
  margin-bottom:16px;
}

.hd-login-form { display:flex;flex-direction:column;gap:16px; }

.hd-field { display:flex;flex-direction:column;gap:6px; }
.hd-field label { font-size:.78rem;font-weight:600;color:var(--text); }
.hd-field input {
  padding:10px 14px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--text);
  font-size:.9rem;
  transition:border-color var(--tr);
}
.hd-field input:focus { border-color:var(--accent); }

.hd-login-btn {
  padding:11px;
  background:var(--accent);color:#fff;
  border-radius:var(--r-sm);
  font-weight:700;font-size:.9rem;
  margin-top:4px;
  transition:all var(--tr);
}
.hd-login-btn:hover { background:var(--accent-h);transform:translateY(-1px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px) {
  .hd-sidebar { transform:translateX(-100%);transition:transform var(--tr); }
  .hd-sidebar.hd-sidebar-open { transform:translateX(0); }
  .hd-main { margin-left:0 !important; }
  .hd-ticket-list { width:100%;border-right:none; }
  .hd-content { flex-direction:column; }
}

@media (max-width:600px) {
  .hd-search-wrap input { width:120px; }
  .hd-detail-header { padding:12px 16px; }
  .hd-messages-scroll { padding:14px 16px; }
  .hd-reply-box { padding:10px 14px; }
}

/* ============================================================
   ADIÇÕES v2 — label editor, plan-anon, fixes
   ============================================================ */

/* Label editor no detalhe do ticket */
.hd-label-editor {
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border-l);
}

.hd-label-editor-title {
  font-size:.72rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;
  flex-shrink:0;
}

.hd-label-toggles {
  display:flex;flex-wrap:wrap;gap:5px;
}

.hd-label-toggle {
  font-size:.68rem;font-weight:700;
  padding:3px 10px;border-radius:5px;
  cursor:pointer;border:none;
  text-transform:uppercase;letter-spacing:.04em;
  opacity:.35;
  transition:opacity .15s,transform .1s;
  font-family:inherit;
}
.hd-label-toggle:hover { opacity:.65; }
.hd-label-toggle.on    { opacity:1; }
.hd-label-toggle:active { transform:scale(.95); }

/* Badges de plano anónimo */
.hd-plan-anon {
  background:rgba(107,114,128,.08);
  color:var(--text3);
  border:1px dashed var(--border);
}

/* Plan banner genérico */
.hd-user-plan-banner {
  display:flex;align-items:center;gap:7px;
  font-size:.76rem;font-weight:500;
  padding:7px 12px;
  border-radius:var(--r-sm);
  margin-bottom:8px;
  border:1px solid transparent;
}
.hd-plan-free  { background:rgba(107,114,128,.08); color:var(--text2);  border-color:var(--border); }
.hd-plan-pro   { background:rgba(245,158,11,.08);  color:#D97706;       border-color:rgba(245,158,11,.2); }
.hd-plan-max   { background:rgba(139,92,246,.08);  color:#8B5CF6;       border-color:rgba(139,92,246,.2); }
.hd-plan-anon  { background:rgba(107,114,128,.05); color:var(--text3);  border-color:var(--border-l); }

/* Priority select — cores por valor */
#prioritySelect option[value="urgent"] { color:#EF4444; }
#prioritySelect option[value="high"]   { color:#F59E0B; }
#prioritySelect option[value="normal"] { color:#22C55E; }

/* Ticket list — garantir scroll correcto */
.hd-ticket-items {
  flex:1;overflow-y:auto;
  min-height:0;
}

/* ── Priority badge na lista de tickets ── */
.hd-priority-badge {
  font-size:.62rem;font-weight:700;
  padding:2px 7px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.05em;
  flex-shrink:0;
}
.hd-pb-urgent { background:rgba(239,68,68,.12);  color:#EF4444; }
.hd-pb-high   { background:rgba(245,158,11,.12); color:#D97706; }
.hd-pb-normal { background:rgba(13,148,136,.1);  color:#0D9488; }

/* ── Normal badge na sidebar ── */
.hd-badge-normal { background:rgba(13,148,136,.1); color:#0D9488; }

/* ── Close detail button ── */
.hd-btn-close-detail {
  width:32px;height:32px;
  border-radius:var(--r-sm);
  background:transparent;
  border:1px solid var(--border);
  color:var(--text3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all var(--tr);
  flex-shrink:0;
}
.hd-btn-close-detail:hover {
  background:var(--surface-hover);
  border-color:var(--text2);
  color:var(--text);
}

/* ============================================================
   DELETE CONFIRM MODAL
   ============================================================ */
.hd-modal-overlay {
  display:none;
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
.hd-modal-overlay.hd-modal-active {
  display:flex;
}

.hd-modal {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:32px 28px 24px;
  width:100%;max-width:360px;
  text-align:center;
  transform:scale(.93) translateY(8px);
  opacity:0;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.hd-modal.hd-modal-in {
  transform:scale(1) translateY(0);
  opacity:1;
}

.hd-modal-icon {
  width:56px;height:56px;
  border-radius:16px;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.2);
  color:#EF4444;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}

.hd-modal-title {
  font-size:1.1rem;font-weight:800;
  color:var(--text);
  margin:0 0 10px;
  letter-spacing:-.02em;
}

.hd-modal-desc {
  font-size:.84rem;line-height:1.6;
  color:var(--text2);
  margin:0 0 24px;
}

.hd-modal-footer {
  display:flex;gap:10px;
}

.hd-modal-btn {
  flex:1;
  padding:10px 16px;
  border-radius:var(--r-sm);
  font-size:.84rem;font-weight:700;
  font-family:inherit;cursor:pointer;
  border:none;
  transition:all var(--tr);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.hd-modal-btn-cancel {
  background:var(--bg2);
  border:1px solid var(--border);
  color:var(--text2);
}
.hd-modal-btn-cancel:hover {
  background:var(--surface-hover);
  color:var(--text);
}
.hd-modal-btn-danger {
  background:var(--danger);
  color:#fff;
}
.hd-modal-btn-danger:hover {
  background:var(--danger-h);
  transform:scale(1.02);
}

/* ── Inbox chip — variantes por plano ── */
.hd-inbox-chip {
  font-size:.62rem;font-weight:700;
  font-family:var(--mono);
  background:var(--accent-sub);color:var(--accent);
  padding:1px 7px;border-radius:4px;
  flex-shrink:0;
}
.hd-inbox-pro {
  background:rgba(245,158,11,.1);
  color:#D97706;
}
.hd-inbox-max {
  background:rgba(139,92,246,.1);
  color:#8B5CF6;
}

/* ── Meta inbox no detalhe — mesmas cores ── */
.hd-meta-inbox {
  font-size:.68rem;font-weight:700;
  font-family:var(--mono);
  background:var(--accent-sub);color:var(--accent);
  padding:2px 8px;border-radius:5px;
}
.hd-meta-inbox.hd-inbox-pro {
  background:rgba(245,158,11,.1);
  color:#D97706;
}
.hd-meta-inbox.hd-inbox-max {
  background:rgba(139,92,246,.1);
  color:#8B5CF6;
}