/* EOM Contact Hub R49 — high-density operator workspace.
   Scoped to .contact-hub so the rest of EOMAdmin keeps its existing layout. */

.contact-hub{
  --ch-bg:#f5f7fa;
  --ch-surface:#ffffff;
  --ch-surface-alt:#f8fafc;
  --ch-line:#d8dee8;
  --ch-line-soft:#e8edf3;
  --ch-text:#17202b;
  --ch-muted:#657386;
  --ch-accent:#6f42c1;
  --ch-accent-soft:#f3effb;
  --ch-danger:#a4262c;
  --ch-success:#176b3a;
  --ch-warning:#8a5a00;
  --ch-inbound:#3777b5;
  --ch-inbound-bg:#f1f7fd;
  --ch-outbound:#7650ae;
  --ch-outbound-bg:#f6f1fc;
  --ch-internal:#9a6a00;
  --ch-internal-bg:#fff8df;
  --ch-system:#6d7785;
  --ch-system-bg:#f1f3f6;
  color:var(--ch-text);
  font-size:12.5px;
  line-height:1.42;
  min-width:0;
}
.contact-hub *{box-sizing:border-box}
.contact-hub button,.contact-hub input,.contact-hub select,.contact-hub textarea{
  font:inherit;
}
.ch-commandbar{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--ch-line);
  border-bottom:0;
  background:var(--ch-surface);
}
.ch-commandbar-primary,.ch-commandbar-secondary{
  display:flex;
  align-items:end;
  gap:8px;
  min-width:0;
}
.ch-commandbar-primary{flex:1}
.ch-workspace-field{width:min(330px,32vw)}
.ch-search-field{flex:1;min-width:220px;max-width:520px}
.ch-size-field{width:78px}
.contact-hub .field{margin:0}
.contact-hub .field label{
  display:block;
  margin:0 0 3px;
  color:var(--ch-muted);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em;
}
.contact-hub input,.contact-hub select{
  width:100%;
  min-height:30px;
  padding:4px 8px;
  border:1px solid #cbd3df;
  border-radius:4px;
  background:#fff;
  color:var(--ch-text);
}
.ch-small-button{
  min-height:30px!important;
  padding:4px 10px!important;
  white-space:nowrap;
}
.ch-notice{
  margin:0!important;
  padding:5px 10px!important;
  min-height:27px;
  border-radius:0!important;
  border-left:1px solid var(--ch-line);
  border-right:1px solid var(--ch-line);
  font-size:11.5px;
}
.ch-workspace-grid{
  display:grid;
  grid-template-columns:minmax(260px,310px) minmax(460px,1fr) minmax(190px,235px);
  height:clamp(610px,calc(100vh - 225px),900px);
  min-height:0;
  border:1px solid var(--ch-line);
  background:var(--ch-bg);
  overflow:hidden;
}
.ch-pane{
  min-width:0;
  min-height:0;
  background:var(--ch-surface);
}
.ch-inbox-pane,.ch-conversation-pane{
  border-right:1px solid var(--ch-line);
}
.ch-pane-head{
  min-height:49px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 10px;
  border-bottom:1px solid var(--ch-line);
  background:var(--ch-surface);
}
.ch-pane-title{font-size:13px;font-weight:750}
.ch-pane-subtitle{font-size:10.5px;color:var(--ch-muted);margin-top:1px}
.ch-ticket-list{
  height:calc(100% - 49px);
  overflow:auto;
  overscroll-behavior:contain;
  background:var(--ch-surface);
}
.ch-list-empty{padding:22px 12px!important}
.ch-ticket{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 8px;
  padding:8px 10px;
  border:0;
  border-bottom:1px solid var(--ch-line-soft);
  border-left:3px solid transparent;
  border-radius:0;
  background:#fff;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.ch-ticket:hover{background:#f7f8fb}
.ch-ticket.is-selected{
  border-left-color:var(--ch-accent);
  background:var(--ch-accent-soft);
}
.ch-ticket-subject{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  font-size:12.5px;
}
.ch-ticket-time{
  color:var(--ch-muted);
  font-size:10.5px;
  white-space:nowrap;
}
.ch-ticket-meta{
  display:flex;
  min-width:0;
  gap:5px;
  align-items:center;
  overflow:hidden;
}
.ch-ticket-ref{
  color:var(--ch-muted);
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ch-ticket-category{
  color:var(--ch-muted);
  font-size:10.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ch-chip{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  max-width:100%;
  padding:1px 5px;
  border:1px solid #cfd6e1;
  border-radius:3px;
  background:#f8fafc;
  color:#4b596b;
  font-size:9.5px;
  font-weight:750;
  line-height:1.2;
  white-space:nowrap;
}
.ch-chip-open,.ch-chip-delivered{border-color:#abd3bb;background:#f0faf4;color:var(--ch-success)}
.ch-chip-waiting,.ch-chip-pending{border-color:#e4cc91;background:#fff8e8;color:var(--ch-warning)}
.ch-chip-closed{background:#f1f3f6;color:#596474}
.ch-chip-import,.ch-chip-legacy_support{border-color:#c8bae6;background:#f5f1fc;color:#5c3c98}
.ch-chip-web_chat{border-color:#acd0e8;background:#eef8ff;color:#235f82}
.ch-chip-high,.ch-chip-critical{border-color:#e6b3b6;background:#fff2f3;color:var(--ch-danger)}

.ch-conversation-pane{
  display:flex;
  min-height:0;
  overflow:hidden;
  background:#fff;
}
.ch-conversation-root{
  width:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.ch-no-selection{
  margin:auto;
  max-width:360px;
  padding:20px;
  color:var(--ch-muted);
  text-align:center;
}
.ch-no-selection strong{display:block;color:var(--ch-text);font-size:14px;margin-bottom:4px}
.ch-case-head{
  min-height:57px;
  padding:7px 12px;
  border-bottom:1px solid var(--ch-line);
  background:#fff;
}
.ch-case-head-row{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.ch-case-title{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  font-weight:760;
}
.ch-case-ref{
  margin-top:3px;
  color:var(--ch-muted);
  font-size:10.5px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.ch-thread{
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:0 12px 18px;
  background:#fbfcfe;
}
.ch-thread-empty{margin:22px 0}
.ch-message{
  padding:9px 10px 10px;
  border-bottom:1px solid var(--ch-line-soft);
  border-left:3px solid transparent;
}
.ch-message.is-inbound{border-left-color:var(--ch-inbound);background:var(--ch-inbound-bg)}
.ch-message.is-outbound{border-left-color:var(--ch-outbound);background:var(--ch-outbound-bg)}
.ch-message.is-internal{border-left-color:var(--ch-internal);background:var(--ch-internal-bg)}
.ch-message.is-system{border-left-color:var(--ch-system);background:var(--ch-system-bg)}
.ch-message-head{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  margin-bottom:4px;
}
.ch-message-sender{
  font-size:11.5px;
  font-weight:760;
}
.ch-message.is-inbound .ch-message-sender{color:var(--ch-inbound)}
.ch-message.is-outbound .ch-message-sender{color:var(--ch-outbound)}
.ch-message.is-internal .ch-message-sender{color:var(--ch-internal)}
.ch-message.is-system .ch-message-sender{color:var(--ch-system)}
.ch-message-direction{
  padding:1px 4px;
  border:1px solid currentColor;
  border-radius:3px;
  color:var(--ch-muted);
  font-size:9.5px;
  font-weight:700;
  line-height:1.2;
}
.ch-message.is-inbound .ch-message-direction{color:var(--ch-inbound);background:#fff}
.ch-message.is-outbound .ch-message-direction{color:var(--ch-outbound);background:#fff}
.ch-message.is-internal .ch-message-direction{color:var(--ch-internal);background:#fffdf5}
.ch-message.is-system .ch-message-direction{color:var(--ch-system);background:#fff}
.ch-message-time{
  margin-left:auto;
  color:var(--ch-muted);
  font-size:10px;
  white-space:nowrap;
}
.ch-message-body{
  color:#1b2531;
  font-size:12.5px;
  line-height:1.52;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.ch-message-attachments{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}
.ch-message-attachment{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:3px 6px;
  border:1px solid var(--ch-line);
  border-radius:4px;
  background:#fff;
  color:var(--ch-text);
  font-size:10.5px;
}
.ch-message-attachment-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ch-message-attachment-state{color:var(--ch-warning);font-size:9.5px;white-space:nowrap}
.ch-message-attachment-state.is-ready{color:var(--ch-success)}
.ch-message-attachment-state.is-rejected{color:var(--ch-danger)}
.ch-composer{
  flex:0 0 auto;
  padding:8px 10px 9px;
  border-top:1px solid var(--ch-line);
  background:#fff;
  box-shadow:0 -3px 10px rgba(25,35,50,.035);
}
.ch-composer-top{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:5px;
}
.ch-composer-label{font-size:11px;font-weight:760}
.ch-composer-route{color:var(--ch-muted);font-size:10px}
.ch-composer textarea{
  display:block;
  width:100%;
  min-height:76px;
  max-height:180px;
  resize:vertical;
  padding:7px 8px;
  border:1px solid #c7d0dc;
  border-radius:4px;
  background:#fff;
  color:var(--ch-text);
  line-height:1.45;
}
.ch-composer-attachment{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  color:var(--ch-muted);
  font-size:10.5px;
}
.ch-composer-attachment input[type="file"]{
  min-height:28px;
  max-width:360px;
  padding:3px 5px;
}
.ch-composer-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
}
.ch-composer-help{
  max-width:72%;
  color:var(--ch-muted);
  font-size:9.5px;
  line-height:1.35;
}
.ch-composer-result{font-size:10.5px;margin-right:auto}
.ch-send-button{
  min-height:30px!important;
  padding:4px 13px!important;
  white-space:nowrap;
}
.ch-no-route{
  margin:8px 10px 10px;
  padding:8px 9px;
  border:1px solid #d8dee8;
  background:#f8fafc;
  color:var(--ch-muted);
  font-size:11px;
}

.ch-properties-pane{
  overflow:hidden;
  background:#fff;
}
.ch-properties{
  height:calc(100% - 49px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:4px 10px 12px;
}
.ch-property{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:6px 0;
  border-bottom:1px solid var(--ch-line-soft);
}
.ch-property-label{
  color:var(--ch-muted);
  font-size:10.5px;
  font-weight:650;
}
.ch-property-value{
  min-width:0;
  color:var(--ch-text);
  font-size:11.5px;
  overflow-wrap:anywhere;
}
.ch-property-value.is-code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:9.8px;
}
.ch-properties-empty{padding:16px 0;color:var(--ch-muted);font-size:11px}

@media(max-width:1180px){
  .ch-workspace-grid{grid-template-columns:280px minmax(0,1fr)}
  .ch-properties-pane{
    position:absolute;
    right:16px;
    width:250px;
    max-height:58vh;
    border:1px solid var(--ch-line);
    box-shadow:0 8px 30px rgba(30,40,55,.12);
    z-index:3;
  }
}
@media(max-width:820px){
  .ch-commandbar,.ch-commandbar-primary,.ch-commandbar-secondary{align-items:stretch;flex-direction:column}
  .ch-workspace-field,.ch-search-field,.ch-size-field{width:100%;max-width:none}
  .ch-workspace-grid{display:block;height:auto;overflow:visible}
  .ch-pane{border-right:0!important;border-bottom:1px solid var(--ch-line)}
  .ch-ticket-list{height:auto;max-height:320px}
  .ch-conversation-pane{min-height:620px}
  .ch-properties-pane{position:static;width:auto;max-height:none;box-shadow:none;border:0}
  .ch-properties{height:auto}
}