html.agent-workspace-active,
html.agent-workspace-active body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  overflow: hidden;
  background: #031a2b;
}

/* Cyber live controls and interactive states. */
.agent-workspace__topbar,
.agent-workspace__bottom,
.agent-workspace__queue,
.agent-workspace__conversation,
.agent-workspace__live {
  border-color: rgba(45, 199, 244, .3);
  box-shadow: inset 0 1px 0 rgba(131, 225, 255, .07), 0 0 22px rgba(0, 182, 255, .055), 0 10px 25px rgba(0, 7, 16, .14);
}
.agent-workspace__availability {
  width: 100%; padding: 0 14px 0 0; color: inherit; background: transparent;
  border: 0; border-right: 1px solid rgba(117, 158, 185, .35); cursor: pointer; text-align: left;
}
.agent-workspace__availability strong { color: #4ef1ba; font-size: 12px; letter-spacing: .08em; }
.agent-workspace__availability small { color: #6e8fa3; font-size: 8px; font-weight: 600; }
.agent-call-console[data-availability="paused"] .agent-workspace__availability > span,
.agent-call-console[data-availability="paused"] .agent-workspace__bottom i { background: #ffb229; box-shadow: 0 0 14px rgba(255, 178, 41, .7); }
.agent-call-console[data-availability="paused"] .agent-workspace__availability strong,
.agent-call-console[data-availability="paused"] .agent-workspace__bottom > div:first-child { color: #ffc14d; }
.agent-workspace__top-icons button { padding: 5px; color: #aabccb; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 18px; }
.agent-workspace__top-icons button:hover { color: #56dcff; background: rgba(25, 188, 235, .12); }
.agent-workspace__lead:hover { background: rgba(22, 132, 181, .1); }
.agent-workspace__lead:focus-visible,
.agent-workspace button:focus-visible { outline: 2px solid #40d9ff; outline-offset: 2px; }
.agent-workspace__queue footer span + span { margin-left: auto; }
.agent-workspace__caller-line button.active { color: #ffd447; text-shadow: 0 0 12px rgba(255, 212, 71, .8); }
.agent-workspace__contact-line b { color: #dce9ef; font-weight: 500; }
.agent-workspace__lead-notes { margin-top: 14px; padding: 14px; background: rgba(5, 29, 47, .72); border: 1px solid rgba(79, 139, 176, .25); border-radius: 9px; }
.agent-workspace__lead-notes h3 { margin: 0 0 7px; color: #8daabb; font-size: 9px; letter-spacing: .08em; }
.agent-workspace__lead-notes p { margin: 0 0 13px; color: #b7cad5; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.agent-workspace__lead-notes button { width: 100%; min-height: 38px; color: #48dcff; background: rgba(19, 142, 177, .12); border: 1px solid rgba(49, 202, 238, .35); border-radius: 7px; cursor: pointer; font: 10px inherit; }
.agent-workspace__outcome button.selected { color: #70e8ff; border-color: #27c9f1; background: rgba(21, 153, 191, .18); box-shadow: inset 0 0 18px rgba(30, 196, 235, .08); }
.agent-workspace__settings[hidden] { display: none; }
.agent-workspace__settings { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(0, 8, 17, .78); backdrop-filter: blur(10px); }
.agent-workspace__settings > div { width: min(440px, 100%); padding: 24px; color: #dceaf1; background: linear-gradient(145deg, #082a42, #041827); border: 1px solid rgba(54, 213, 255, .55); border-radius: 14px; box-shadow: 0 0 45px rgba(0, 197, 255, .16), 0 25px 70px rgba(0, 0, 0, .5); }
.agent-workspace__settings header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 20px; }
.agent-workspace__settings header small { color: #4bdcff; font-size: 9px; letter-spacing: .14em; }
.agent-workspace__settings h2 { margin: 4px 0 0; font-size: 22px; }
.agent-workspace__settings header button { color: #8eabba; background: transparent; border: 0; cursor: pointer; font-size: 28px; }
.agent-workspace__settings label { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; border-bottom: 1px solid rgba(75, 176, 208, .16); font-size: 12px; }
.agent-workspace__settings input[type="checkbox"] { width: 18px; height: 18px; accent-color: #24d7a0; }
.agent-workspace__settings input[type="range"] { width: 170px; accent-color: #35d8ff; }
.agent-workspace__settings p { color: #7795a7; font-size: 11px; line-height: 1.6; }
.agent-workspace__settings-save { width: 100%; min-height: 42px; color: #032032; background: #43dcff; border: 0; border-radius: 8px; cursor: pointer; font-weight: 800; }

@media (max-width: 760px) {
  html.agent-workspace-active body { overscroll-behavior: none; }
  html.agent-workspace-active .agent-call-console { height: 100dvh !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; }
  .agent-workspace { display: grid; grid-template-rows: 64px minmax(0, 1fr) 54px; height: 100dvh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .agent-workspace__topbar { position: relative; grid-template-columns: minmax(0, 1fr) auto; height: 64px; padding: 0 14px; border: 0; border-bottom: 1px solid rgba(45, 199, 244, .35); }
  .agent-workspace__availability { min-height: 48px; justify-content: flex-start; gap: 10px; border-right: 0; }
  .agent-workspace__availability > span { width: 12px; height: 12px; }
  .agent-workspace__availability strong { font-size: 14px; }
  .agent-workspace__availability small { display: block; margin-left: 2px; font-size: 9px; }
  .agent-workspace__top-icons { display: flex; gap: 6px; }
  .agent-workspace__top-icons button { min-width: 44px; min-height: 44px; }
  .agent-workspace__layout { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .agent-workspace__conversation { min-height: 100%; }
  .agent-workspace__conversation-title { position: sticky; top: 0; z-index: 2; background: rgba(4, 28, 46, .96); backdrop-filter: blur(10px); }
  .agent-workspace__call-grid { display: grid; gap: 10px; padding: 10px 10px 18px; }
  .agent-workspace__contact-card, .agent-workspace__controls-card { width: 100%; min-height: auto; padding: 15px; }
  .agent-workspace__contact-card dl { margin: 12px 0; }
  .agent-workspace__contact-line { margin: 9px 0; }
  .agent-workspace__timer-wrap [data-call-timer] { font-size: 34px; }
  .agent-workspace__control-grid { grid-template-rows: 88px 88px; gap: 9px; }
  .agent-workspace__control-grid .agent-call-console__utility,
  .agent-workspace__control-grid .agent-call-console__end,
  .agent-workspace__control-grid .agent-call-console__answer { min-height: 80px !important; touch-action: manipulation; }
  .agent-workspace__control-grid [data-end], .agent-workspace__control-grid [data-answer] { font-size: 14px !important; }
  .agent-workspace__outcome button { min-height: 48px; touch-action: manipulation; }
  .agent-workspace__outcome label { min-height: 48px; }
  .agent-workspace__bottom { position: relative; display: flex; justify-content: space-between; width: 100%; height: 54px; padding: 0 14px; border: 0; border-top: 1px solid rgba(45, 199, 244, .35); }
  .agent-workspace__bottom > div { display: flex; }
  .agent-workspace__bottom > span { display: none; }
  .agent-workspace__bottom button { min-width: 44px; min-height: 44px; }
  .agent-workspace__bottom input { display: block; width: min(42vw, 170px); }
  .agent-workspace .agent-call-console__dialpad-container { right: 10px; bottom: calc(64px + env(safe-area-inset-bottom)); left: 10px; width: auto; }
  .agent-workspace .agent-call-console__dialpad button { height: 52px; touch-action: manipulation; }
  .agent-workspace__settings { align-items: end; padding: 0; }
  .agent-workspace__settings > div { width: 100%; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
}

@media (max-width: 390px) {
  .agent-workspace__conversation-title div { display: none; }
  .agent-workspace__control-grid .icon svg { width: 27px !important; height: 27px !important; }
  .agent-workspace__outcome > div { gap: 7px; }
}

.agent-workspace__mobile-campaign,
.agent-workspace__mobile-lead-id,
.agent-workspace__mobile-company,
.agent-workspace__more-info,
.agent-workspace__waveform,
.agent-workspace__mobile-nav,
.agent-workspace__note-action { display: none; }

@media (max-width: 760px) {
  .agent-workspace { grid-template-rows: 76px minmax(0, 1fr) 72px; background: radial-gradient(circle at 50% 0, rgba(19, 91, 139, .22), transparent 38%), #020e19; }
  .agent-workspace__topbar { grid-template-columns: 1fr .9fr 1.18fr; gap: 7px; padding: 12px 10px; background: rgba(3, 17, 29, .95); }
  .agent-workspace__availability,
  .agent-workspace__connection,
  .agent-workspace__mobile-campaign { display: flex; align-items: center; justify-content: center; min-width: 0; height: 48px; padding: 0 8px; color: #eef7fb; background: linear-gradient(145deg, rgba(11, 37, 58, .92), rgba(5, 24, 40, .92)); border: 1px solid rgba(91, 143, 176, .35); border-radius: 13px; font: 10px inherit; cursor: pointer; }
  .agent-workspace__availability { display: grid; grid-template-columns: 12px auto; grid-template-rows: 20px 12px; justify-content: start; column-gap: 9px; }
  .agent-workspace__availability > span { grid-row: 1 / 3; }
  .agent-workspace__availability small { overflow: hidden; max-width: 125px; text-overflow: ellipsis; white-space: nowrap; }
  .agent-workspace__connection { gap: 5px; color: #aebdca; white-space: nowrap; }
  .agent-workspace__connection span { font-size: 15px; }
  .agent-workspace__connection strong { color: #b5c7d3; font-size: 9px; letter-spacing: 0; }
  .agent-workspace__connection b { color: #f0f5f8; font-size: 10px; }
  .agent-workspace__connection i { width: 9px; height: 9px; background: #32d89b; box-shadow: 0 0 8px rgba(50, 216, 155, .6); }
  .agent-workspace__top-icons { display: none; }
  .agent-workspace__layout { padding: 12px 12px 30px; }
  .agent-workspace__conversation { overflow: visible; background: transparent; box-shadow: none; }
  .agent-workspace__conversation-title { display: none; }
  .agent-workspace__call-grid { gap: 12px; padding: 0; }
  .agent-workspace__contact-card { position: relative; padding: 18px 16px; background: linear-gradient(145deg, rgba(13, 43, 68, .96), rgba(5, 25, 42, .96)); border-color: rgba(79, 139, 176, .43); border-radius: 17px; }
  .agent-workspace__caller-line { grid-template-columns: 64px 1fr; padding-right: 82px; }
  .agent-workspace__caller-avatar { grid-row: 1 / 3; display: grid; place-items: center; width: 62px; height: 62px; color: #b8d0df; background: linear-gradient(145deg, #466580, #14293d); border: 1px solid #7190a6; border-radius: 50%; font-size: 20px; }
  .agent-workspace .agent-call-console__caller { align-self: center; font-size: 21px; white-space: nowrap; }
  .agent-workspace__mobile-company { display: flex; gap: 7px; margin: -14px 0 10px 73px; color: #a6bac7; font-size: 10px; }
  .agent-workspace__caller-line > button { position: absolute; top: 58px; right: 18px; }
  .agent-workspace__mobile-lead-id { position: absolute; top: 18px; right: 16px; display: block; padding: 7px 11px; color: #a8bbc7; background: rgba(103, 139, 162, .12); border-radius: 999px; font-size: 10px; }
  .agent-workspace__live-label { position: absolute; top: 79px; left: 61px; margin: 0; font-size: 0; }
  .agent-workspace__contact-line { margin: 9px 0 9px 73px; font-size: 16px; }
  .agent-workspace__contact-line b { display: block; overflow: hidden; max-width: calc(100vw - 135px); text-overflow: ellipsis; white-space: nowrap; }
  .agent-workspace__contact-line small { display: none; }
  .agent-workspace__contact-card dl { display: none; }
  .agent-workspace__lead-notes { display: none; }
  .agent-workspace__more-info { position: absolute; right: 16px; bottom: 16px; display: block; padding: 8px 12px; color: #d6e4eb; background: rgba(126, 156, 175, .1); border: 1px solid rgba(126, 156, 175, .35); border-radius: 999px; font: 10px inherit; }
  .agent-workspace__recent { display: none; }
  .agent-workspace__controls-card { position: relative; display: grid; grid-template-rows: 36px 78px auto auto; padding: 16px; background: linear-gradient(145deg, rgba(6, 30, 49, .98), rgba(2, 16, 28, .98)); border-radius: 18px; }
  .agent-workspace__timer-wrap { grid-row: 1; align-items: center; }
  .agent-workspace__timer-wrap .agent-call-console__header { margin: 0; }
  .agent-workspace__timer-wrap [data-call-timer] { color: #f1ba69; font-size: 26px; }
  .agent-workspace__sip-status { position: absolute; top: 18px; left: 14px; margin: 0; padding: 7px 9px; color: #3fe3b2; background: rgba(10, 98, 88, .12); border: 1px solid rgba(32, 190, 156, .28); border-radius: 999px; font-size: 8px; }
  .agent-workspace__sip-status b { position: fixed; top: 92px; right: 26px; z-index: 1; padding: 7px 9px; color: #ff5c5c; background: rgba(112, 18, 24, .18); border: 1px solid rgba(212, 52, 60, .35); border-radius: 999px; font-weight: 500; }
  .agent-workspace__waveform { grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 3px; height: 70px; overflow: hidden; }
  .agent-workspace__waveform i { width: 2px; height: var(--wave); max-height: 60px; min-height: 3px; background: linear-gradient(#4ce8ff, #16a7df); border-radius: 3px; box-shadow: 0 0 6px rgba(44, 220, 255, .5); animation: agent-wave 1.35s ease-in-out infinite alternate; animation-delay: calc(var(--wave) * -20ms); }
  @keyframes agent-wave { to { transform: scaleY(.35); opacity: .55; } }
  .agent-workspace__control-grid { grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 102px 102px; gap: 9px; }
  .agent-workspace__control-grid [data-mute] { grid-column: 1; grid-row: 1; }
  .agent-workspace__control-grid [data-hold] { grid-column: 2; grid-row: 1; }
  .agent-workspace__control-grid [data-keypad] { grid-column: 3; grid-row: 1; }
  .agent-workspace__control-grid [data-transfer] { grid-column: 1; grid-row: 2; }
  .agent-workspace__control-grid [data-note-action] { display: flex !important; grid-column: 2; grid-row: 2; }
  .agent-workspace__control-grid [data-end], .agent-workspace__control-grid [data-answer] { grid-column: 3; grid-row: 2; }
  .agent-workspace__control-grid .agent-call-console__utility,
  .agent-workspace__control-grid .agent-call-console__end,
  .agent-workspace__control-grid .agent-call-console__answer { min-height: 98px !important; border-radius: 16px !important; }
  .agent-workspace__note-action .icon { color: #d8e9f2; font-size: 31px; }
  .agent-workspace__outcome { grid-row: 4; margin: 12px -2px 0; padding-top: 0; overflow-x: auto; scrollbar-width: none; }
  .agent-workspace__outcome h3, .agent-workspace__outcome label { display: none; }
  .agent-workspace__outcome > div { display: flex; gap: 8px; }
  .agent-workspace__outcome button { flex: 0 0 auto; min-height: 42px; padding: 8px 12px; border-radius: 11px; }
  .agent-workspace__outcome button:nth-child(4), .agent-workspace__outcome button:nth-child(6) { display: none; }
  .agent-workspace__bottom { display: none; }
  .agent-workspace__mobile-nav { position: relative; z-index: 12; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 72px; padding-bottom: env(safe-area-inset-bottom); background: rgba(3, 19, 32, .97); border-top: 1px solid rgba(67, 137, 174, .3); backdrop-filter: blur(18px); }
  .agent-workspace__mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #8295a3; background: transparent; border: 0; font: 10px inherit; }
  .agent-workspace__mobile-nav button b { font-size: 23px; font-weight: 400; }
  .agent-workspace__mobile-nav button.active { color: #4cecff; background: linear-gradient(180deg, rgba(20, 190, 211, .14), transparent); }
  .agent-workspace.mobile-show-leads, .agent-workspace.mobile-show-team { overflow: hidden; }
  .agent-call-console.mobile-show-leads .agent-workspace__queue,
  .agent-call-console.mobile-show-team .agent-workspace__live { position: fixed; z-index: 10; inset: 82px 12px calc(80px + env(safe-area-inset-bottom)); display: flex; border: 1px solid rgba(60, 202, 244, .45); border-radius: 18px; box-shadow: 0 25px 70px rgba(0, 0, 0, .65); }
  .agent-call-console.mobile-show-leads .agent-workspace__queue { padding-top: 20px; }
  .agent-call-console.mobile-show-team .agent-workspace__live { background: #041a2b; }
  .agent-call-console.mobile-details-open .agent-workspace__contact-card dl { display: grid; margin-top: 18px; padding-bottom: 8px; }
  .agent-call-console.mobile-details-open .agent-workspace__contact-card { padding-bottom: 56px; }
  .agent-call-console.mobile-details-open .agent-workspace__recent { display: block; margin-top: 12px; }
  .agent-call-console.mobile-details-open .agent-workspace__lead-notes { display: block; margin-top: 12px; }
  .agent-call-console.mobile-note-open .agent-workspace__outcome label { position: fixed; z-index: 30; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); left: 14px; display: flex; min-height: 54px; margin: 0; background: #08253b; border-color: #35d8ff; box-shadow: 0 12px 35px rgba(0, 0, 0, .65); }
}
.agent-workspace__outcome [data-save-state] { color: #44dca0; font-weight: 500; text-transform: none; }
.agent-workspace__live footer button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit; }
.agent-call-console.cyber-contrast { filter: saturate(1.2) contrast(1.08); }
.agent-call-console.cyber-contrast .agent-workspace__topbar,
.agent-call-console.cyber-contrast .agent-workspace__queue,
.agent-call-console.cyber-contrast .agent-workspace__conversation,
.agent-call-console.cyber-contrast .agent-workspace__live { border-color: rgba(45, 222, 255, .58); box-shadow: 0 0 20px rgba(0, 207, 255, .1); }

html.agent-workspace-active #root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.agent-workspace-active .agent-call-console {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 620px;
  margin: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  color: #d8e5ef !important;
  background:
    radial-gradient(circle at 50% -30%, rgba(0, 106, 164, .2), transparent 43%),
    linear-gradient(135deg, #031526 0%, #041e31 55%, #031423 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html.agent-workspace-active .agent-call-console[data-status="idle"] { display: block !important; }
html.agent-workspace-active .agent-call-console[data-status="idle"] .agent-call-console__caller { display: block !important; }

.agent-workspace {
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr) 50px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.agent-workspace__topbar,
.agent-workspace__bottom,
.agent-workspace__queue,
.agent-workspace__conversation,
.agent-workspace__live {
  border: 1px solid rgba(87, 132, 163, .24);
  background: linear-gradient(145deg, rgba(4, 31, 51, .94), rgba(3, 23, 39, .96));
  box-shadow: inset 0 1px 0 rgba(131, 195, 232, .04), 0 10px 25px rgba(0, 7, 16, .14);
}

.agent-workspace__topbar {
  display: grid;
  grid-template-columns: 174px 260px minmax(560px, 1fr) 130px 94px;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  border-radius: 8px;
}

.agent-workspace__availability,
.agent-workspace__connection,
.agent-workspace__clock,
.agent-workspace__top-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  color: #e7eff5;
  font-size: 12px;
  font-weight: 700;
}

.agent-workspace__availability { border-right: 1px solid rgba(117, 158, 185, .35); }
.agent-workspace__availability > span,
.agent-workspace__availability i,
.agent-workspace__bottom i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2bd49a;
  box-shadow: 0 0 14px rgba(43, 212, 154, .7);
}
.agent-workspace__availability b { margin-left: auto; color: #94acc0; font-size: 18px; font-weight: 400; }
.agent-workspace__connection { color: #91a9bb; }
.agent-workspace__connection strong { color: #e1ecf3; letter-spacing: .08em; }
.agent-workspace__connection i { width: 4px; height: 4px; border-radius: 50%; background: #a5b5c1; }
.agent-workspace__connection em { color: #2bd49a; font-style: normal; letter-spacing: -1px; font-size: 17px; }

.agent-workspace__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 48px;
  border: 1px solid rgba(68, 115, 145, .28);
  border-radius: 8px;
  overflow: hidden;
}
.agent-workspace__metrics > div {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: 16px 20px;
  align-items: center;
  column-gap: 7px;
  min-width: 112px;
  padding: 5px 12px;
  border-right: 1px solid rgba(80, 124, 153, .22);
}
.agent-workspace__metrics > div:last-child { border-right: 0; }
.agent-workspace__metrics span { grid-row: 1 / 3; color: #5ed2f5; font-size: 22px; }
.agent-workspace__metrics > div:nth-child(3) span { color: #ffc13a; }
.agent-workspace__metrics small { color: #8da2b2; font-size: 10px; white-space: nowrap; }
.agent-workspace__metrics strong { color: #f2f7fa; font-size: 19px; font-weight: 600; line-height: 1; }

.agent-workspace__clock { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 18px 14px; column-gap: 5px; }
.agent-workspace__clock span { grid-row: 1 / 3; color: #c5d5df; font-size: 25px; }
.agent-workspace__clock strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.agent-workspace__clock small { color: #91a5b4; font-size: 9px; }
.agent-workspace__top-icons { justify-content: space-between; color: #aabccb; font-size: 22px; }
.agent-workspace__top-icons b { font-size: 17px; }

.agent-workspace__layout {
  display: grid;
  grid-template-columns: minmax(268px, .86fr) minmax(610px, 2fr) minmax(300px, 1.08fr);
  gap: 8px;
  min-height: 0;
  padding: 8px 0;
}

.agent-workspace__queue,
.agent-workspace__conversation,
.agent-workspace__live {
  min-height: 0;
  overflow: hidden;
  border-radius: 9px;
}

.agent-workspace__queue {
  display: flex;
  flex-direction: column;
  padding: 16px 11px 10px;
}
.agent-workspace__section-title,
.agent-workspace__live > header,
.agent-workspace__conversation-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c6d7e2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.agent-workspace__section-title { padding: 0 9px 14px; }
.agent-workspace__section-title span { color: #91a8b9; font-size: 16px; }
.agent-workspace__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 35px;
  margin: 0 7px 10px;
  padding: 0 10px;
  color: #7190a4;
  background: rgba(4, 32, 52, .8);
  border: 1px solid rgba(86, 135, 166, .34);
  border-radius: 7px;
  font-size: 17px;
}
.agent-workspace__search input,
.agent-workspace__outcome input {
  min-width: 0;
  color: #d9e6ee;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 11px;
}
.agent-workspace__search input { width: 100%; }
.agent-workspace__search input::placeholder,
.agent-workspace__outcome input::placeholder { color: #7c96a8; }
.agent-workspace__filters { display: flex; gap: 7px; margin: 0 7px 12px; }
.agent-workspace__filters button {
  padding: 6px 9px;
  color: #a6b9c6;
  background: rgba(8, 39, 62, .75);
  border: 1px solid rgba(94, 137, 165, .3);
  border-radius: 6px;
  font: 10px inherit;
}
.agent-workspace__sort { margin: 3px 9px 9px; color: #7691a4; font-size: 10px; }
.agent-workspace__sort b { color: #a6bac7; font-weight: 600; }
.agent-workspace__lead-list { flex: 1; min-height: 0; overflow: auto; scrollbar-color: #57758c transparent; }
.agent-workspace__lead {
  display: grid;
  grid-template-columns: 31px 1fr auto;
  gap: 9px;
  width: 100%;
  padding: 9px 8px;
  color: #d5e1e9;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(85, 125, 151, .26);
  cursor: pointer;
}
.agent-workspace__lead.active { background: linear-gradient(90deg, rgba(9, 59, 89, .36), transparent); }
.agent-workspace__lead > b { align-self: start; display: grid; place-items: center; width: 28px; height: 31px; color: #bdd0db; border: 1px solid rgba(102, 145, 171, .36); border-radius: 6px; font-size: 14px; font-weight: 500; }
.agent-workspace__lead strong { display: block; color: #dce8ee; font-size: 12px; }
.agent-workspace__lead small { display: block; margin-top: 4px; color: #8099aa; font-size: 10px; line-height: 15px; }
.agent-workspace__lead em { align-self: start; padding: 4px 8px; color: #52c8fa; border: 1px solid rgba(52, 170, 226, .34); border-radius: 6px; font-size: 10px; font-style: normal; }
.agent-workspace__lead em.gold { color: #f0ce54; border-color: rgba(220, 180, 48, .48); }.agent-workspace__lead em.green { color: #55d994; border-color: rgba(43, 191, 117, .4); }
.agent-workspace__queue footer { display: flex; gap: 8px; margin: 10px 8px 0; padding-top: 11px; color: #89a1b1; border-top: 1px solid rgba(85, 125, 151, .28); font-size: 10px; }.agent-workspace__queue footer b { color: #e1ebf0; }

.agent-workspace__conversation { display: grid; grid-template-rows: 47px minmax(0, 1fr); }
.agent-workspace__conversation-title { padding: 0 20px; border-bottom: 1px solid rgba(85, 125, 151, .25); }
.agent-workspace__conversation-title > span { color: #4ed7fa; font-size: 22px; }.agent-workspace__conversation-title strong { margin-left: -auto; }.agent-workspace__conversation-title div { margin-left: auto; color: #9db1bf; font-size: 11px; letter-spacing: 0; }.agent-workspace__conversation-title i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; background: #f55b62; border-radius: 50%; box-shadow: 0 0 0 4px rgba(245, 91, 98, .16); }.agent-workspace__conversation-title b { margin-left: 14px; color: #5cd7fb; letter-spacing: 2px; }
.agent-workspace__call-grid { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(355px, 1.1fr); gap: 20px; min-height: 0; padding: 22px 16px; }
.agent-workspace__contact-card,
.agent-workspace__controls-card { min-height: 0; padding: 20px; background: linear-gradient(145deg, rgba(7, 42, 66, .9), rgba(4, 27, 45, .9)); border: 1px solid rgba(81, 131, 162, .33); border-radius: 8px; }
.agent-workspace__contact-card { overflow: auto; }.agent-workspace__caller-line { display: grid; grid-template-columns: 0 1fr 30px; align-items: start; gap: 8px; }.agent-workspace__caller-avatar { display: none; }.agent-workspace__caller-line button { color: #f7cb43; background: transparent; border: 0; font-size: 24px; cursor: pointer; }
.agent-workspace .agent-call-console__caller { margin: 0; color: #f3f8fa; font-size: clamp(21px, 1.75vw, 29px); font-weight: 500; letter-spacing: -.03em; }.agent-workspace__live-label { display: flex; gap: 8px; align-items: center; margin: 8px 0 20px; color: #45d396; font-size: 11px; }.agent-workspace__live-label i { width: 8px; height: 8px; background: #38d998; border-radius: 50%; }
.agent-workspace__contact-line { display: flex; align-items: start; gap: 13px; margin: 13px 0; color: #e2edf2; font-size: 21px; }.agent-workspace__contact-line > span { font-size: 12px; line-height: 16px; }.agent-workspace__contact-line small { display: block; color: #8098a8; font-size: 10px; }.agent-workspace__contact-card dl { display: grid; grid-template-columns: 1fr 1.15fr; gap: 11px; margin: 20px 0; padding: 17px 0; border-top: 1px solid rgba(81, 125, 150, .27); border-bottom: 1px solid rgba(81, 125, 150, .27); font-size: 10px; }.agent-workspace__contact-card dt { color: #849bab; }.agent-workspace__contact-card dd { margin: 0; color: #b9cad5; }
.agent-workspace__recent h3,
.agent-workspace__outcome h3 { display: flex; justify-content: space-between; margin: 0 0 11px; color: #c4d4de; font-size: 10px; }.agent-workspace__recent p { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; margin: 0; padding: 10px 0; color: #90a7b6; border-top: 1px solid rgba(81, 125, 150, .22); font-size: 10px; }.agent-workspace__recent p i { color: #35cd91; font-style: normal; font-size: 15px; }.agent-workspace__recent p i.red { color: #f36465; }.agent-workspace__recent p b { color: #a5bcc8; font-weight: 500; }.agent-workspace__recent p small { grid-column: 2 / 4; display: flex; justify-content: space-between; color: #728b9c; }.agent-workspace__recent p em { color: #3cda99; font-style: normal; }.agent-workspace__recent button { width: 100%; margin-top: 10px; padding: 11px; color: #a7bdca; background: transparent; border: 1px solid rgba(86, 133, 160, .35); border-radius: 6px; font: 10px inherit; }

.agent-workspace__controls-card { display: flex; flex-direction: column; }.agent-workspace__timer-wrap { display: flex; justify-content: center; }.agent-workspace__timer-wrap .agent-call-console__header { display: block !important; margin: 14px 0 0; color: #ffc541; text-align: center; }.agent-workspace__timer-wrap .agent-call-console__signal,
.agent-workspace__timer-wrap [data-call-state] { display: none !important; }.agent-workspace__timer-wrap [data-call-timer] { display: block; color: #ffc541; font-size: 31px; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }.agent-workspace__sip-status { margin: 5px 0 20px; color: #91a6b6; text-align: center; font-size: 12px; }
.agent-workspace__control-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 94px 94px; gap: 10px; }.agent-workspace__control-grid .agent-call-console__actions,
.agent-workspace__control-grid .agent-call-console__footer { display: contents !important; }.agent-workspace__control-grid .agent-call-console__utility,
.agent-workspace__control-grid .agent-call-console__end,
.agent-workspace__control-grid .agent-call-console__answer { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px; min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; padding: 10px !important; color: #d2e0e9 !important; background: linear-gradient(145deg, rgba(24, 61, 88, .9), rgba(15, 47, 71, .9)) !important; border: 1px solid rgba(86, 134, 163, .35) !important; border-radius: 9px !important; box-shadow: none !important; cursor: pointer; }.agent-workspace__control-grid .agent-call-console__utility .icon,
.agent-workspace__control-grid .agent-call-console__end .icon,
.agent-workspace__control-grid .agent-call-console__answer .icon { display: grid !important; place-items: center !important; width: auto !important; height: auto !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important; }.agent-workspace__control-grid .icon svg { width: 31px !important; height: 31px !important; color: #e6eff4 !important; }.agent-workspace__control-grid .label { display: block !important; color: #c3d2dc !important; font-size: 12px !important; font-weight: 500 !important; text-transform: capitalize !important; }.agent-workspace__control-grid [data-speaker] { display: none !important; }.agent-workspace__control-grid [data-mute] { grid-column: 1; grid-row: 1; }.agent-workspace__control-grid [data-hold] { grid-column: 2; grid-row: 1; border-color: rgba(229, 183, 48, .68) !important; background: linear-gradient(145deg, rgba(78, 65, 21, .9), rgba(52, 46, 21, .9)) !important; }.agent-workspace__control-grid [data-keypad] { grid-column: 3; grid-row: 1; }.agent-workspace__control-grid [data-transfer] { grid-column: 1; grid-row: 2; }.agent-workspace__control-grid [data-end] { grid-column: 2 / 4; grid-row: 2; color: #fff !important; background: linear-gradient(145deg, #c54c48, #a33d3d) !important; border-color: #e26d64 !important; }.agent-workspace__control-grid [data-answer] { grid-column: 2 / 4; grid-row: 2; color: #fff !important; background: linear-gradient(145deg, #24a778, #16845e) !important; border-color: #5ad3a6 !important; }.agent-workspace__control-grid [hidden] { display: none !important; }
.agent-workspace__outcome { margin-top: auto; padding-top: 22px; }.agent-workspace__outcome > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.agent-workspace__outcome button { min-height: 43px; padding: 7px; color: #afc2cf; background: rgba(15, 51, 75, .6); border: 1px solid rgba(87, 133, 159, .6); border-radius: 7px; font: 11px inherit; cursor: pointer; }.agent-workspace__outcome button:nth-child(1).selected { color: #4be09f; border-color: #38b67f; background: rgba(24, 103, 73, .25); }.agent-workspace__outcome button:nth-child(2) { color: #59c3f5; border-color: #2585b7; }.agent-workspace__outcome button:nth-child(3) { color: #f4c84d; border-color: #9a7c28; }.agent-workspace__outcome button:nth-child(4) { color: #fa835d; border-color: #a8563d; }.agent-workspace__outcome label { display: flex; gap: 9px; align-items: center; height: 45px; margin-top: 19px; padding: 0 16px; color: #a7c0d0; border: 1px solid rgba(87, 133, 159, .55); border-radius: 7px; }.agent-workspace__outcome label input { flex: 1; }

.agent-workspace__live { display: flex; flex-direction: column; }.agent-workspace__live > header { padding: 17px 18px 12px; border-bottom: 1px solid rgba(85, 125, 151, .25); }.agent-workspace__live > header span { color: #9db3c1; font-size: 17px; letter-spacing: 9px; }.agent-workspace__live > div { flex: 1; overflow: auto; }.agent-workspace__live-agent { display: grid; grid-template-columns: 38px 10px minmax(0, 1fr) auto; grid-template-rows: 19px 15px; align-items: center; column-gap: 8px; min-height: 59px; padding: 9px 13px; border-bottom: 1px solid rgba(85, 125, 151, .24); }.agent-workspace__avatar { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; color: #e2eff5; background: linear-gradient(145deg, #d38d65, #4e7c9d); border-radius: 50%; font-size: 11px; font-weight: 800; }.agent-workspace__avatar--1 { background: linear-gradient(145deg, #7564ad, #e09c93); }.agent-workspace__avatar--2 { background: linear-gradient(145deg, #557f8b, #c38e69); }.agent-workspace__avatar--3 { background: linear-gradient(145deg, #a35e69, #697aa1); }.agent-workspace__avatar--4 { background: linear-gradient(145deg, #b49256, #477b78); }.agent-workspace__presence { width: 8px; height: 8px; border-radius: 50%; background: #8298a7; }.agent-workspace__presence--online { background: #39d99a; box-shadow: 0 0 7px rgba(57, 217, 154, .5); }.agent-workspace__presence--busy { background: #f5b93b; }.agent-workspace__presence--offline { background: #f15f62; }.agent-workspace__agent-name { overflow: hidden; color: #dbe7ed; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }.agent-workspace__live-agent small { grid-column: 3; color: #829aaa; font-size: 10px; }.agent-workspace__agent-meter { grid-column: 4; grid-row: 1 / 3; color: #39d89a; letter-spacing: -2px; font-size: 14px; }.agent-workspace__empty { padding: 18px; color: #849baa; font-size: 11px; text-align: center; }.agent-workspace__live footer { display: flex; justify-content: space-between; padding: 14px 20px; color: #9ab1bf; border-top: 1px solid rgba(85, 125, 151, .25); font-size: 11px; }.agent-workspace__live footer b { font-size: 20px; font-weight: 400; }

.agent-workspace__bottom { display: grid; grid-template-columns: 1.1fr .9fr 1fr 30px 160px; align-items: center; gap: 20px; padding: 0 22px; border-radius: 8px; color: #91a8b8; font-size: 11px; }.agent-workspace__bottom > div { display: flex; align-items: center; gap: 10px; color: #9bb1c0; }.agent-workspace__bottom span + span { padding-left: 20px; border-left: 1px solid rgba(97, 139, 165, .35); }.agent-workspace__bottom b { color: #d3e1e9; font-weight: 600; }.agent-workspace__bottom button { color: #b5cad6; background: transparent; border: 0; font-size: 20px; }.agent-workspace__bottom input { width: 100%; accent-color: #efbd3a; }

.agent-workspace__diagnostics { display: none; }.agent-workspace .agent-call-console__dialpad-container { position: absolute; z-index: 5; right: 24%; bottom: 85px; width: 245px; padding: 18px; background: #08253b; border: 1px solid #3b6985; border-radius: 12px; box-shadow: 0 20px 45px rgba(0, 0, 0, .5); }.agent-workspace .agent-call-console__dialpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.agent-workspace .agent-call-console__dialpad button { height: 45px; color: #e6f0f5; background: #123f5c; border: 1px solid #3c6a85; border-radius: 7px; font: 18px inherit; }.agent-workspace .agent-call-console__dialpad button span { display: block; margin-top: 1px; color: #86a4b7; font-size: 8px; }

@media (max-width: 1100px) {
  .agent-workspace__topbar { grid-template-columns: 150px 1fr 90px; }.agent-workspace__connection,
  .agent-workspace__top-icons { display: none; }.agent-workspace__metrics > div { min-width: 88px; padding: 5px 7px; }.agent-workspace__layout { grid-template-columns: minmax(230px, .8fr) minmax(500px, 1.7fr); }.agent-workspace__live { display: none; }.agent-workspace__call-grid { grid-template-columns: minmax(230px, .8fr) 1.2fr; gap: 12px; padding: 13px; }.agent-workspace__bottom { grid-template-columns: 1fr 1fr 1fr; }.agent-workspace__bottom button,
  .agent-workspace__bottom input { display: none; }
}

@media (max-width: 760px) {
  html.agent-workspace-active .agent-call-console { min-height: 0; padding: 0 !important; overflow: auto !important; }.agent-workspace { display: block; min-height: 100%; height: auto; }.agent-workspace__topbar { position: sticky; top: 0; z-index: 3; grid-template-columns: 1fr auto; height: 54px; padding: 0 14px; border-radius: 0; }.agent-workspace__connection,
  .agent-workspace__metrics,
  .agent-workspace__clock { display: none; }.agent-workspace__layout { display: block; padding: 0; }.agent-workspace__queue,
  .agent-workspace__live { display: none; }.agent-workspace__conversation { display: block; border: 0; border-radius: 0; }.agent-workspace__conversation-title { height: 43px; padding: 0 14px; }.agent-workspace__conversation-title div { font-size: 9px; }.agent-workspace__conversation-title b { display: none; }.agent-workspace__call-grid { display: block; padding: 10px; }.agent-workspace__contact-card { padding: 16px; }.agent-workspace__recent { display: none; }.agent-workspace__controls-card { margin-top: 10px; padding: 17px 12px; }.agent-workspace__control-grid { grid-template-rows: 82px 82px; }.agent-workspace__outcome { margin-top: 18px; }.agent-workspace__bottom { position: sticky; bottom: 0; z-index: 3; display: flex; height: 46px; padding: 0 14px; border-radius: 0; }.agent-workspace__bottom span { display: none; }.agent-workspace__bottom button,
  .agent-workspace__bottom input { display: block; }.agent-workspace__bottom input { width: 110px; }.agent-workspace .agent-call-console__dialpad-container { position: fixed; right: 12px; bottom: 60px; }.agent-workspace__top-icons { display: block; }
}

/* Keep interactive cyber states last so they win over the base dashboard skin. */
.agent-workspace__topbar, .agent-workspace__bottom, .agent-workspace__queue, .agent-workspace__conversation, .agent-workspace__live {
  border-color: rgba(45, 199, 244, .3);
  box-shadow: inset 0 1px 0 rgba(131, 225, 255, .07), 0 0 22px rgba(0, 182, 255, .055), 0 10px 25px rgba(0, 7, 16, .14);
}
.agent-workspace__availability { width: 100%; padding: 0 14px 0 0; color: inherit; background: transparent; border: 0; border-right: 1px solid rgba(117, 158, 185, .35); cursor: pointer; text-align: left; }
.agent-workspace__availability strong { color: #4ef1ba; font-size: 12px; letter-spacing: .08em; }
.agent-workspace__availability small { color: #6e8fa3; font-size: 8px; font-weight: 600; }
.agent-workspace__outcome button.selected { color: #70e8ff; border-color: #27c9f1; background: rgba(21, 153, 191, .18); box-shadow: inset 0 0 18px rgba(30, 196, 235, .08); }