/* Guided support + live-agent control room */
.support-console {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:20px;
  align-items:stretch;
}
.support-sidebar,
.support-chat,
.agent-routing-card {
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.support-sidebar {
  min-height:596px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.support-sidebar-hero {
  position:relative;
  overflow:hidden;
  min-height:214px;
  padding:23px;
  border:1px solid #c9ddff;
  border-radius:19px;
  background:radial-gradient(circle at 92% 8%,rgba(116,90,246,.22),transparent 36%),linear-gradient(145deg,#eaf4ff,#f8faff);
}
.support-sidebar-hero:after {
  content:"";
  position:absolute;
  right:-54px;
  bottom:-54px;
  width:150px;
  height:150px;
  border:1px solid #81b0f14d;
  border-radius:50%;
}
.support-sidebar-hero > * { position:relative; z-index:1; }
.support-orb,
.support-chat-icon {
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border:1px solid #bcd5ff;
  border-radius:13px;
  color:var(--blue);
  background:linear-gradient(135deg,#f0f6ff,#dcecff);
  box-shadow:0 7px 18px rgba(46,104,205,.1);
}
.support-orb .svg-icon,
.support-chat-icon .svg-icon { width:20px; height:20px; }
.support-sidebar-hero .control-overline { margin:17px 0 6px; }
.support-sidebar-hero h3 { margin:0; font-size:20px; letter-spacing:-.8px; }
.support-sidebar-hero p:not(.control-overline) {
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.support-customer-card,
.support-channel-card,
.assigned-agent-card,
.support-availability {
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--subtler);
}
.support-customer-card > span > .svg-icon,
.support-channel-card > span > .svg-icon {
  width:19px;
  height:19px;
  flex:none;
  color:var(--blue);
}
.support-customer-card small,
.support-channel-card small,
.assigned-agent-card small {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.support-customer-card strong,
.support-channel-card a,
.assigned-agent-card strong {
  display:block;
  margin-top:3px;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  overflow-wrap:anywhere;
}
.support-channel-card a { color:var(--blue); text-decoration:none; }
.support-customer-card em {
  display:block;
  margin-top:4px;
  color:#6e82a1;
  font-size:10px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.04em;
}
.support-availability {
  margin-top:auto;
  color:#177557;
  font-size:11px;
  font-weight:800;
}
.support-availability i {
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:#1ab57b;
  box-shadow:0 0 0 4px #d8f8ec;
}
.assigned-agent-card { margin-top:auto; }
.assigned-agent-card .agent-avatar { width:40px; height:40px; }
.assigned-agent-card span {
  display:block;
  margin-top:3px;
  color:var(--green);
  font-size:10px;
  font-weight:800;
}
.agent-avatar {
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #c3d9ff;
  border-radius:12px;
  color:#225cae;
  background:linear-gradient(145deg,#dcecff,#f0f6ff);
  font-size:11px;
  font-weight:900;
}
.agent-avatar img { width:100%; height:100%; object-fit:cover; }
.agent-avatar.large { width:48px; height:48px; border-radius:15px; }
.support-chat {
  min-height:596px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.support-chat-header {
  min-height:84px;
  padding:17px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(100deg,#fbfdff,#f5f8ff);
}
.support-chat-header > div {
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}
.support-chat-header h3 { margin:0; font-size:16px; letter-spacing:-.55px; }
.support-chat-header p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
}
.support-thread {
  min-height:300px;
  max-height:400px;
  flex:1;
  overflow:auto;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:11px;
  background:radial-gradient(circle at 90% 10%,rgba(73,121,234,.045),transparent 24rem),var(--subtler);
}
.support-message {
  width:min(82%,640px);
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px 16px 16px 4px;
  background:var(--surface);
  box-shadow:0 5px 14px rgba(31,58,107,.035);
}
.support-message.user {
  align-self:flex-end;
  border-color:#9fc4ff;
  border-radius:16px 16px 4px 16px;
  background:linear-gradient(135deg,#e6f1ff,#f1f6ff);
}
.support-message.system {
  width:100%;
  padding:9px 12px;
  border-style:dashed;
  border-color:#b9c8da;
  border-radius:12px;
  color:#687a93;
  background:#f5f8fc;
}
.support-message-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  color:#6b7d96;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.support-message.user .support-message-meta { color:#3971c4; }
.support-message p {
  margin:5px 0 0;
  color:var(--ink);
  font-size:12px;
  line-height:1.52;
}
.support-message.system p { color:inherit; font-size:11px; }
.support-composer {
  padding:16px 20px 17px;
  border-top:1px solid var(--line);
  background:var(--surface);
}
.support-choices > span {
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.support-choices > div {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.support-choice {
  min-height:31px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #d8e1ee;
  border-radius:50px;
  color:#53647d;
  background:#fbfcff;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.support-choice:hover,
.support-choice.active {
  border-color:#6ba5ff;
  color:#145fc6;
  background:#eaf3ff;
  transform:translateY(-1px);
}
.support-choice.live {
  color:#175bba;
  border-color:#a9caff;
  background:#edf5ff;
}
.support-choice .svg-icon { width:13px; height:13px; }
.support-live-link {
  min-height:41px;
  margin-top:12px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #b8dcce;
  border-radius:12px;
  color:#087354;
  background:#edfcf6;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
}
.support-live-link .svg-icon { width:14px; }
.support-message-form {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  margin-top:12px;
}
.support-message-form .btn { min-height:44px; }
.support-safety {
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin:10px 2px 0;
  color:#7d8da4;
  font-size:10px;
  line-height:1.45;
}
.support-safety .svg-icon { width:14px; flex:none; color:#5279b5; }
.support-reopen {
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid var(--line);
  background:var(--surface);
}
.support-reopen strong,
.support-reopen span { display:block; }
.support-reopen strong { font-size:13px; }
.support-reopen span { margin-top:3px; color:var(--muted); font-size:11px; }

.agent-admin-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:20px;
  align-items:stretch;
}
.agent-routing-card {
  padding:24px;
  color:#e9f2ff;
  border-color:#2b5798;
  background:radial-gradient(circle at 90% 8%,rgba(135,101,255,.46),transparent 30%),linear-gradient(145deg,#103a71,#0c2351);
}
.agent-routing-card .control-overline { color:#8cc0ff; }
.agent-routing-card h3 { margin:8px 0 9px; color:#fff; font-size:22px; letter-spacing:-.85px; }
.agent-routing-card p { margin:0; color:#c5d9f7; font-size:12px; line-height:1.6; }
.routing-steps { display:grid; gap:8px; margin-top:22px; }
.routing-steps span {
  min-height:34px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#d8e9ff;
  font-size:11px;
  font-weight:800;
}
.routing-steps b {
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:#ffffff1c;
  font-size:9px;
}
.agent-directory { margin-top:20px; }
.agent-directory-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.admin-agent-card {
  min-width:0;
  padding:14px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--subtler);
}
.admin-agent-copy { min-width:0; }
.admin-agent-copy strong,
.admin-agent-copy span,
.admin-agent-copy small { display:block; }
.admin-agent-copy strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-size:12px;
}
.admin-agent-copy span { margin-top:3px; color:var(--muted); font-size:10px; font-weight:700; }
.admin-agent-copy small {
  margin-top:5px;
  overflow:hidden;
  color:#7789a4;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.agent-card-actions {
  display:grid;
  justify-items:end;
  gap:8px;
}
.agent-card-actions .toggle { margin:0; }
.customer-search { max-width:680px; margin-top:18px; }
.admin-user-directory {
  display:grid;
  gap:9px;
  margin-top:17px;
}
.admin-user-card {
  padding:14px;
  display:grid;
  grid-template-columns:auto minmax(140px,1fr) minmax(110px,.55fr) minmax(92px,.4fr) auto;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--subtler);
}
.admin-user-identity,
.admin-user-reference { min-width:0; }
.admin-user-identity strong,
.admin-user-identity span,
.admin-user-identity small,
.admin-user-reference span,
.admin-user-reference strong { display:block; }
.admin-user-identity strong { color:var(--ink); font-size:12px; }
.admin-user-identity span { margin-top:3px; color:var(--blue); font-size:11px; font-weight:800; }
.admin-user-identity small {
  margin-top:3px;
  overflow:hidden;
  color:var(--muted);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-user-reference span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.admin-user-reference strong { margin-top:4px; color:var(--ink); font-size:12px; }
.profile-mini-identity { grid-template-columns:repeat(3,1fr); }

[data-theme="dark"] .support-sidebar,
[data-theme="dark"] .support-chat,
[data-theme="dark"] .agent-routing-card {
  border-color:#2d4968;
  background:#0d1e33;
}
[data-theme="dark"] .support-sidebar-hero {
  border-color:#31558a;
  background:radial-gradient(circle at 92% 8%,rgba(131,101,255,.25),transparent 36%),linear-gradient(145deg,#102b4d,#0d1e37);
}
[data-theme="dark"] .support-sidebar-hero :is(h3,p:not(.control-overline)) { color:#dbe8fa; }
[data-theme="dark"] .support-orb,
[data-theme="dark"] .support-chat-icon {
  border-color:#345d97;
  color:#91bbff;
  background:linear-gradient(145deg,#17375e,#102746);
}
[data-theme="dark"] :is(.support-customer-card,.support-channel-card,.assigned-agent-card,.support-availability) {
  border-color:#294764;
  background:#0a192b;
}
[data-theme="dark"] :is(.support-customer-card strong,.assigned-agent-card strong,.support-chat-header h3,.admin-agent-copy strong,.admin-user-identity strong,.admin-user-reference strong) { color:#eef5ff; }
[data-theme="dark"] .support-chat-header {
  border-color:#294764;
  background:linear-gradient(100deg,#0d2037,#0c1a2d);
}
[data-theme="dark"] .support-thread { background:radial-gradient(circle at 90% 10%,rgba(73,121,234,.10),transparent 24rem),#09192c; }
[data-theme="dark"] .support-message {
  border-color:#2c4a68;
  background:#10243d;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
[data-theme="dark"] .support-message.user {
  border-color:#3675cd;
  background:linear-gradient(135deg,#173d6c,#13325a);
}
[data-theme="dark"] .support-message.system {
  border-color:#405773;
  color:#a8bad0;
  background:#0d1d31;
}
[data-theme="dark"] .support-message p { color:#e4eefc; }
[data-theme="dark"] .support-composer,
[data-theme="dark"] .support-reopen { border-color:#294764; background:#0d1e33; }
[data-theme="dark"] .support-choice {
  border-color:#35516f;
  color:#b3c6df;
  background:#0b1a2e;
}
[data-theme="dark"] .support-choice:hover,
[data-theme="dark"] .support-choice.active { border-color:#4d8cf1; color:#dbeaff; background:#15355e; }
[data-theme="dark"] .support-choice.live { border-color:#3f78ce; color:#b9d7ff; background:#12315b; }
[data-theme="dark"] .support-live-link {
  border-color:#237456;
  color:#aef2d0;
  background:#103a31;
}
[data-theme="dark"] .support-safety { color:#9eb0c8; }
[data-theme="dark"] .admin-agent-card,
[data-theme="dark"] .admin-user-card {
  border-color:#2a4765;
  background:#0b1b2f;
}
[data-theme="dark"] .agent-routing-card { border-color:#325b98; background:radial-gradient(circle at 90% 8%,rgba(135,101,255,.34),transparent 30%),linear-gradient(145deg,#10386a,#0a2049); }

@media (max-width:980px) {
  .support-console,
  .agent-admin-layout { grid-template-columns:1fr; }
  .support-sidebar { min-height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .support-sidebar-hero { grid-row:span 2; }
  .support-availability,
  .assigned-agent-card { margin-top:0; }
  .agent-routing-card { min-height:0; }
}
@media (max-width:700px) {
  .support-console { gap:14px; }
  .support-sidebar { padding:13px; grid-template-columns:1fr; }
  .support-sidebar-hero { min-height:0; padding:18px; }
  .support-sidebar-hero .control-overline { margin-top:13px; }
  .support-chat { min-height:0; border-radius:20px; }
  .support-chat-header { min-height:72px; padding:13px; }
  .support-chat-header .status { font-size:9px; white-space:nowrap; }
  .support-thread { min-height:250px; max-height:380px; padding:14px; }
  .support-message { width:92%; padding:11px; }
  .support-composer { padding:14px; }
  .support-message-form { grid-template-columns:1fr; }
  .support-message-form .btn { width:100%; }
  .support-reopen { align-items:stretch; flex-direction:column; padding:15px; }
  .support-reopen .btn { width:100%; }
  .agent-directory-grid { grid-template-columns:1fr; }
  .admin-user-card { grid-template-columns:auto minmax(0,1fr); gap:10px; }
  .admin-user-card .admin-user-reference,
  .admin-user-card > .status { grid-column:2; }
  .profile-mini-identity { grid-template-columns:1fr; }
}
@media (max-width:390px) {
  .support-chat-header p { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .support-choice { padding:0 9px; font-size:9px; }
}