/* HB Suporte — navegação, caixa de entrada e estrutura de janela. */
.app-shell{height:100dvh;max-height:100dvh;min-height:0;display:grid;grid-template-columns:64px 318px minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}
.nav-rail{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--rail);color:#bac5d5;min-height:0;padding:16px 6px 12px}
.rail-brand{display:grid;place-items:center;width:46px;height:46px;margin-bottom:2px}
.rail-brand img{width:39px;height:39px;object-fit:contain;display:block}
.rail-divider{height:1px;width:32px;background:#4b5666;margin:0 0 9px}
.rail-navigation{display:flex;flex-direction:column;align-items:center;width:100%;gap:5px}
.rail-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:51px;min-height:47px;padding:6px 3px;background:transparent;border-radius:8px;color:#bac5d5;transition:background .13s,color .13s}
.rail-btn .ic{width:19px;height:19px}
.rail-btn span{font-size:9px;font-weight:610;line-height:1.1}
.rail-btn:hover{color:#f4f7fb;background:#36404e}
.rail-btn.active{color:#fff;background:#374a65;box-shadow:none;}
.rail-btn.active::before{content:"";position:absolute;left:-6px;top:11px;bottom:11px;width:3px;background:#6da9ff;border-radius:0 3px 3px 0}
.rail-spacer{flex:1;min-height:5px}
.rail-navigation-bottom{gap:4px}
.rail-avatar{flex:none;display:grid;place-items:center;width:33px;height:33px;margin-top:7px;border:1px solid #6e9076;border-radius:50%;background:#3a4f70;color:#fff;font-size:11.5px;font-weight:730;border-color:#6d88b0;}
.sidebar{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--side);border-right:1px solid var(--line);border-color:var(--line);}
.sidebar-header{flex:none;padding:17px 17px 11px}
.sidebar-identity{font-size:10px;letter-spacing:1.6px;color:var(--muted);font-weight:750;margin:2px 0 15px}
.sidebar-identity strong{color:var(--accent);font-weight:820}
.sidebar-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:9px;font-weight:710;letter-spacing:1.0px}
.sidebar-live{display:flex;align-items:center;gap:6px;color:#22885e;font-size:10px;letter-spacing:0;font-weight:610}
.sidebar-live i{display:block;flex:none;width:6px;height:6px;border-radius:50%;background:#2ca877}
.sidebar-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 5px}
.sidebar-heading h2{font-size:19px;font-weight:750;letter-spacing:-.5px;line-height:1.2}
.square-btn{width:33px;height:33px;display:grid;place-items:center;flex:none;border-radius:7px;background:var(--accent-fill);color:#fff;box-shadow:none;}
.square-btn:hover{background:var(--accent-fill-hover)}
.square-btn .ic{width:17px;height:17px}
.sidebar-user{display:flex;align-items:center;gap:7px;min-width:0;color:var(--muted);font-size:10.5px;margin-bottom:17px}
.sidebar-user #sidebarUserName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-role{padding-left:8px;border-left:1px solid #d8e0e9;color:var(--muted);font-size:10px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left-color:var(--line);}
.search-box{height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.search-box:focus-within{background:var(--panel);border-color:var(--accent);box-shadow:0 0 0 2px #2877d51b}
.search-box .ic{width:16px;height:16px}
.search-box input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-size:11.5px}
.search-box input::placeholder{color:var(--quiet)}
.search-box kbd{font-size:10px;font-family:inherit;border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:0 5px;color:var(--quiet)}
.filter-row{display:flex;gap:3px;flex-wrap:wrap;margin-top:13px;border-bottom:1px solid var(--line);padding-bottom:10px}
.filter{background:transparent;color:var(--muted);padding:6px 8px;font-size:11px;font-weight:620;white-space:nowrap;border-radius:5px}
.filter:hover{background:var(--surface-hover);color:var(--text)}
.filter.active{background:var(--accent-soft);color:var(--accent);font-weight:740}
.list-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 17px 7px;color:var(--muted);text-transform:uppercase;font-size:9px;font-weight:730;letter-spacing:.85px}
.list-meta #ticketCount{background:var(--accent-soft);border-radius:4px;color:var(--accent);letter-spacing:0;padding:2px 7px;font-variant-numeric:tabular-nums}
.sidebar-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;padding:11px 16px;color:var(--muted);border-top:1px solid var(--line);font-size:10px}
.sidebar-footer-brand{font-weight:650;letter-spacing:.65px}
.sidebar-footer-brand strong{color:var(--accent)}
.version{color:#a2aeba}
.main-view{grid-column:3;grid-row:1;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;background:var(--bg)}
@media(max-width:1260px){.app-shell{grid-template-columns:61px 300px minmax(0,1fr)}.sidebar-header{padding:14px 13px 9px}.list-meta{padding-left:13px;padding-right:13px;color:var(--muted);}}
@media(max-width:880px){.app-shell{grid-template-columns:61px minmax(0,1fr)}.sidebar{grid-column:2;grid-row:1;background:var(--side);border-color:var(--line);}.main-view{grid-column:2;grid-row:1;display:none}.app-shell.show-conversation .sidebar{display:none}.app-shell.show-conversation .main-view{display:flex}.app-shell.show-admin .sidebar,.app-shell.show-admin .main-view{display:none}}
@media(max-width:540px){.app-shell{grid-template-columns:55px minmax(0,1fr)}.nav-rail{padding:10px 3px;gap:5px;background:var(--rail);color:#bac5d5;}.rail-btn{width:47px;min-height:44px;color:#bac5d5;border-radius:8px;}.rail-brand{width:39px;height:39px}.rail-brand img{width:34px;height:34px}.sidebar-header{padding:14px 12px 9px}.sidebar-heading h2{font-size:18px}.sidebar-user{margin-bottom:12px;color:var(--muted);}.sidebar-identity{margin-bottom:10px;color:var(--muted);}.filter{padding:5px 7px;color:var(--muted);}.sidebar-bottom{padding:9px 12px;color:var(--muted);}}
@media(max-height:550px){.nav-rail{padding-top:5px;padding-bottom:4px;gap:3px;background:var(--rail);color:#bac5d5;}.rail-divider{margin-bottom:3px;background:#4b5666;}.rail-btn{min-height:41px;color:#bac5d5;border-radius:8px;}.rail-avatar{margin-top:1px;background:#3a4f70;border-color:#6d88b0;color:#fff;}.sidebar-header{padding-top:9px}.sidebar-identity{margin-bottom:7px;color:var(--muted);}.sidebar-heading{margin:5px 0}.sidebar-user{margin-bottom:7px;color:var(--muted);}.filter-row{margin-top:6px;padding-bottom:7px}}
/* Densidade compacta: o padrao operacional em 1440x900. */
@media(min-width:881px){
  .density-compact .app-shell{grid-template-columns:61px 302px minmax(0,1fr)}
  .density-compact .nav-rail{padding:10px 5px 8px;gap:6px}
  .density-compact .rail-brand{width:43px;height:43px}
  .density-compact .rail-brand img{width:37px;height:37px}
  .density-compact .rail-divider{margin-bottom:5px}
  .density-compact .rail-btn{width:49px;min-height:43px;padding:5px 2px;gap:2px}
  .density-compact .rail-btn .ic{width:18px;height:18px}
  .density-compact .rail-btn.active::before{left:-5px;top:9px;bottom:9px}
  .density-compact .rail-avatar{width:30px;height:30px;margin-top:4px}
  .density-compact .sidebar-header{padding:13px 13px 9px}
  .density-compact .sidebar-identity{margin:0 0 10px;font-size:9.5px}
  .density-compact .sidebar-heading{margin:6px 0 4px}
  .density-compact .sidebar-heading h2{font-size:18px}
  .density-compact .square-btn{width:30px;height:30px}
  .density-compact .sidebar-user{margin-bottom:11px;font-size:10px}
  .density-compact .search-box{height:34px}
  .density-compact .filter-row{gap:2px;margin-top:9px;padding-bottom:8px}
  .density-compact .filter{padding:5px 7px;font-size:10px}
  .density-compact .queue-sort{padding-top:6px}
  .density-compact .list-meta{padding:10px 13px 6px}
  .density-compact .sidebar-bottom{padding:8px 13px}
}
@media(max-height:650px){.density-compact .rail-avatar,.density-compact .sidebar-bottom{display:none}}

/* Dark — navegacao e caixa de entrada */
:root[data-theme="dark"] .sidebar{background:var(--side);border-color:var(--line)}
:root[data-theme="dark"] .nav-rail{background:var(--rail);color:#c1ccda}
:root[data-theme="dark"] .rail-divider{background:#3d463e}
:root[data-theme="dark"] .rail-btn{color:#bfccdb}
:root[data-theme="dark"] .rail-btn:hover{background:#354150;color:#fff}
:root[data-theme="dark"] .rail-btn.active{background:#3b4b61;color:#fff;box-shadow:none;}
:root[data-theme="dark"] .rail-avatar{background:#47584b;border-color:#627b67}
:root[data-theme="dark"] .sidebar-identity,:root[data-theme="dark"] .sidebar-topline,:root[data-theme="dark"] .sidebar-user,
:root[data-theme="dark"] .list-meta,:root[data-theme="dark"] .sidebar-bottom,:root[data-theme="dark"] .version{color:var(--muted)}
:root[data-theme="dark"] .sidebar-identity strong,:root[data-theme="dark"] .sidebar-footer-brand strong{color:var(--accent)}
:root[data-theme="dark"] .sidebar-role{border-color:var(--line);color:var(--muted)}
:root[data-theme="dark"] .search-box{background:var(--panel2);border-color:var(--line);color:var(--muted)}
:root[data-theme="dark"] .search-box:focus-within{background:var(--panel);border-color:var(--accent)}
:root[data-theme="dark"] .search-box input::placeholder{color:var(--quiet)}
:root[data-theme="dark"] .search-box kbd{background:var(--panel);border-color:var(--line);color:var(--quiet)}
:root[data-theme="dark"] .filter{color:var(--muted)}
:root[data-theme="dark"] .filter:hover{background:var(--surface-hover);color:var(--text)}
:root[data-theme="dark"] .filter.active{background:var(--accent-soft);color:#dfebff}
:root[data-theme="dark"] .list-meta #ticketCount{background:var(--accent-soft);color:#dfeaff}
:root[data-theme="dark"] .sidebar-bottom{border-color:var(--line)}

/* HB Suporte 0.10 — workspace de operador: densidade e hierarquia, sem barra dupla. */
@media(min-width:881px){
  .app-shell,.density-compact .app-shell{grid-template-columns:56px 296px minmax(0,1fr)}
  .nav-rail{padding:11px 3px 9px;gap:7px;background:var(--rail);color:#bac5d5;}
  .rail-brand{width:44px;height:44px;margin-bottom:0}
  .rail-brand img{width:36px;height:36px}
  .rail-btn,.density-compact .rail-btn{width:48px;min-height:44px;padding:5px 2px}
  .rail-btn.active::before,.density-compact .rail-btn.active::before{left:-4px}
  .sidebar-header,.density-compact .sidebar-header{padding:13px 12px 9px}
  .sidebar-identity,.density-compact .sidebar-identity{margin:0 0 9px;color:var(--muted);letter-spacing:1.1px}
  .sidebar-heading h2,.density-compact .sidebar-heading h2{font-size:17px}
  .sidebar-user,.density-compact .sidebar-user{margin-bottom:9px;color:var(--muted)}
  .filter-row{margin-top:8px;padding-bottom:7px}
  .sidebar-bottom{display:none;color:var(--muted);}
}
.sidebar{background:var(--side);border-color:var(--line)}
.sidebar-live{color:#22885e}
.filter{color:var(--muted)}
.filter.active{color:var(--accent);background:var(--accent-soft)}
.search-box{border-color:var(--line);background:var(--panel2);border:1px solid var(--line);color:var(--muted);}
.sidebar-user #sidebarUserName{color:var(--text);font-weight:680}
:root[data-theme="dark"] .nav-rail{background:var(--rail);color:#c1ccda}
:root[data-theme="dark"] .rail-btn{color:#bfccdb}
:root[data-theme="dark"] .rail-btn:hover{background:#354150;color:#fff}
:root[data-theme="dark"] .rail-btn.active{background:#3b4b61;color:#fff;box-shadow:none;}
:root[data-theme="dark"] .rail-btn.active::before{background:#8bb8ff}
:root[data-theme="dark"] .sidebar{background:var(--side);border-color:var(--line)}
:root[data-theme="dark"] .sidebar-topline,:root[data-theme="dark"] .sidebar-user{color:#ced7cf}
:root[data-theme="dark"] .sidebar-live{color:#a0ddbc}
:root[data-theme="dark"] .sidebar-identity strong{color:#a9caff}
:root[data-theme="dark"] .search-box{background:var(--panel2);border-color:var(--line);color:var(--muted)}
:root[data-theme="dark"] .search-box input{color:#f7f8f7}
:root[data-theme="dark"] .search-box input::placeholder{color:#c6cfc7}
:root[data-theme="dark"] .filter{color:var(--muted)}
:root[data-theme="dark"] .filter.active{background:var(--accent-soft);color:#dfebff}
:root[data-theme="dark"] .filter:hover{background:var(--surface-hover);color:var(--text)}
:root[data-theme="dark"] .list-meta #ticketCount{background:var(--accent-soft);color:#dfeaff}
@media(max-width:880px){.app-shell{grid-template-columns:56px minmax(0,1fr)}}
@media(max-width:540px){.app-shell{grid-template-columns:52px minmax(0,1fr)}}