:root{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:#18212f;
  background:#f4f6f8
}

*{box-sizing:border-box}

body{margin:0}

.shell{
  max-width:1050px;
  margin:auto;
  padding:24px
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px
}

.topbar h1{
  margin:0;
  font-size:26px
}

.topbar p{
  margin:4px 0 0;
  color:#667085
}

.counter{
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:999px;
  padding:8px 12px;
  font-size:13px
}

.toolbar{
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:12px;
  padding:10px;
  margin-bottom:12px
}

.toolbar input{
  width:100%;
  border:1px solid #d0d5dd;
  border-radius:9px;
  padding:11px 12px;
  font-size:14px
}

.queue{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:9px
}

.item{
  width:100%;
  min-width:0;
  border:1px solid #e4e7ec;
  background:#fff;
  border-radius:12px;
  padding:14px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  transition:.15s ease
}

.item:hover{
  background:#f8fafc;
  transform:translateY(-1px)
}

.source{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:12px
}

.source[data-source="whatsapp"]{
  background:#dcfce7;
  color:#166534
}

.source[data-source="optiwork"]{
  background:#ede9fe;
  color:#5b21b6
}

.body{
  min-width:0
}

.contact{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px
}

.head{
  display:flex;
  justify-content:space-between;
  gap:10px
}

.head time{
  flex-shrink:0;
  font-size:11px;
  color:#98a2b3
}

.preview{
  margin:5px 0 8px;
  color:#475467;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.meta{
  font-size:12px;
  color:#98a2b3
}

.meta-main{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:6px
}

.message-info{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:center
}

.received{
  color:#667085
}

.unread-age{
  padding:4px 8px;
  border-radius:6px;
  font-weight:500
}

.unread-age.normal{
  background:#f2f4f7;
  color:#475467
}

.unread-age.medium{
  background:#fef3c7;
  color:#92400e
}

.unread-age.high{
  background:#ffedd5;
  color:#9a3412
}

.unread-age.critical{
  background:#fee2e2;
  color:#b42318
}

.item[data-age="critical"]{
  border-left:4px solid #b42318
}

.item[data-age="high"]{
  border-left:4px solid #ea580c
}

.item[data-age="medium"]{
  border-left:4px solid #d97706
}

.open{
  background:#18212f;
  color:#fff;
  padding:8px 11px;
  border-radius:9px;
  font-size:12px
}

.empty{
  padding:42px;
  text-align:center;
  color:#667085;
  background:#fff;
  border:1px dashed #d0d5dd;
  border-radius:12px
}

@media(max-width:700px){
  .shell{padding:12px}

  .topbar{
    align-items:flex-start;
    gap:12px
  }

  .item{
    grid-template-columns:42px minmax(0,1fr)
  }

  .open{
    grid-column:1/-1;
    text-align:center
  }

  .message-info{
    flex-direction:column;
    align-items:flex-start;
    gap:5px
  }

  .head time{
    display:none
  }
}


.top-actions{
  display:flex;
  align-items:center;
  gap:8px
}

.theme-toggle{
  border:1px solid #e4e7ec;
  background:#fff;
  border-radius:999px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:16px
}

:root[data-theme="dark"]{
  color:#f8fafc;
  background:#0f172a
}

:root[data-theme="dark"] body{
  background:#0f172a
}

:root[data-theme="dark"] .topbar p{
  color:#94a3b8
}

:root[data-theme="dark"] .counter,
:root[data-theme="dark"] .toolbar,
:root[data-theme="dark"] .item,
:root[data-theme="dark"] .empty{
  background:#111827;
  border-color:#253047;
  color:#f8fafc
}

:root[data-theme="dark"] .toolbar input{
  background:#0f172a;
  border-color:#334155;
  color:#f8fafc
}

:root[data-theme="dark"] .toolbar input::placeholder{
  color:#64748b
}

:root[data-theme="dark"] .item:hover{
  background:#172033
}

:root[data-theme="dark"] .preview{
  color:#cbd5e1
}

:root[data-theme="dark"] .meta,
:root[data-theme="dark"] .received,
:root[data-theme="dark"] .head time{
  color:#94a3b8
}

:root[data-theme="dark"] .open{
  background:#f8fafc;
  color:#111827
}

:root[data-theme="dark"] .theme-toggle{
  background:#111827;
  border-color:#334155;
  color:#f8fafc
}

:root[data-theme="dark"] .unread-age.normal{
  background:#1e293b;
  color:#cbd5e1
}

:root[data-theme="dark"] .unread-age.medium{
  background:#3f2f12;
  color:#fde68a
}

:root[data-theme="dark"] .unread-age.high{
  background:#431407;
  color:#fdba74
}

:root[data-theme="dark"] .unread-age.critical{
  background:#450a0a;
  color:#fca5a5
}


.age-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 12px
}

.filter-btn{
  border:1px solid #d0d5dd;
  background:#fff;
  color:#475467;
  border-radius:999px;
  padding:7px 13px;
  cursor:pointer;
  font-size:12px;
  font-weight:600
}

.filter-btn:hover{
  filter:brightness(.97)
}

.filter-btn.active{
  outline:2px solid #64748b;
  outline-offset:1px
}

.filter-btn.normal{
  color:#475467
}

.filter-btn.medium{
  background:#fef3c7;
  color:#92400e;
  border-color:#fde68a
}

.filter-btn.high{
  background:#ffedd5;
  color:#9a3412;
  border-color:#fed7aa
}

.filter-btn.critical{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fecaca
}

.message-info{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap
}

.received{
  font-size:12px;
  color:#667085
}

.unread-age{
  font-size:12px;
  font-weight:600;
  border-radius:6px;
  padding:4px 9px
}

.unread-age.normal{
  background:#f2f4f7;
  color:#475467
}

.unread-age.medium{
  background:#fef3c7;
  color:#92400e
}

.unread-age.high{
  background:#ffedd5;
  color:#9a3412
}

.unread-age.critical{
  background:#fee2e2;
  color:#991b1b
}

.item[data-age="medium"]{
  border-left:4px solid #eab308
}

.item[data-age="high"]{
  border-left:4px solid #f97316
}

.item[data-age="critical"]{
  border-left:4px solid #ef4444
}

:root[data-theme="dark"] .filter-btn{
  background:#111827;
  border-color:#334155;
  color:#cbd5e1
}

:root[data-theme="dark"] .filter-btn.active{
  outline-color:#94a3b8
}

:root[data-theme="dark"] .filter-btn.medium{
  background:#3f2f12;
  color:#fde68a
}

:root[data-theme="dark"] .filter-btn.high{
  background:#431407;
  color:#fdba74
}

:root[data-theme="dark"] .filter-btn.critical{
  background:#450a0a;
  color:#fca5a5
}

:root[data-theme="dark"] .unread-age.normal{
  background:#1e293b;
  color:#cbd5e1
}

:root[data-theme="dark"] .unread-age.medium{
  background:#3f2f12;
  color:#fde68a
}

:root[data-theme="dark"] .unread-age.high{
  background:#431407;
  color:#fdba74
}

:root[data-theme="dark"] .unread-age.critical{
  background:#450a0a;
  color:#fca5a5
}