:root { --ink:#182230; --muted:#667085; --line:#e7eaf0; --canvas:#f7f8fa; --surface:#fff; --blue:#2563eb; --blue-dark:#1d4ed8; --blue-soft:#eef4ff; --green:#16a56b; --green-soft:#eafaf1; --violet:#7c5ce0; --violet-soft:#f2efff; --orange:#ec7a28; --orange-soft:#fff3e9; --red:#e24a4a; --sidebar:#111827; --sidebar-muted:#9ca8bc; --font:'DM Sans',sans-serif; --display:'Manrope',sans-serif; }
*{box-sizing:border-box} body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}.app-shell{display:grid;grid-template-columns:310px minmax(0,1fr) 286px;min-height:100vh}.sidebar{background:var(--sidebar);color:white;padding:26px 20px 20px;display:flex;flex-direction:column;min-height:100vh}.brand{color:#fff;text-decoration:none;font:bold 26px var(--display);letter-spacing:-1.4px;display:flex;align-items:center;gap:12px;padding:0 10px 28px}.brand-dot{color:#70a5ff}.brand-mark{width:28px;height:28px;display:flex;align-items:flex-end;gap:3px;padding:5px;border-radius:9px;background:linear-gradient(145deg,#4285f4,#5f73ee)}.brand-mark span{display:block;width:4px;background:#fff;border-radius:3px}.brand-mark span:nth-child(1){height:8px}.brand-mark span:nth-child(2){height:14px}.brand-mark span:nth-child(3){height:18px}.workspace-switcher{display:flex;align-items:center;gap:11px;padding:13px 14px;background:#202b3e;border:1px solid #2d3a50;border-radius:11px;margin:0 0 25px}.workspace-avatar,.user-avatar{width:34px;height:34px;border-radius:9px;background:#dbe7ff;color:#2355b7;display:grid;place-items:center;font-size:11px;font-weight:700}.workspace-switcher strong,.workspace-switcher small{display:block}.workspace-switcher strong{font-size:13.5px}.workspace-switcher small{color:#aeb8c8;font-size:11px;margin-top:2px}.chevron{margin-left:auto;color:var(--muted)}.primary-nav{display:grid;gap:5px}.nav-item{border:0;background:transparent;color:var(--sidebar-muted);border-radius:9px;padding:12px 14px;text-align:left;font:600 14px var(--font);cursor:pointer;display:flex;align-items:center;gap:12px}.nav-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:currentColor;flex:0 0 22px}.nav-item:hover{color:#fff;background:#1d2939}.nav-item.active{background:#29354a;color:#fff}.nav-item b{margin-left:auto;background:#384862;color:#d8e5ff;border-radius:8px;font-size:11px;padding:3px 7px}.sidebar-section-label{font-size:11px;font-weight:700;color:#75829a;letter-spacing:.08em;margin:30px 10px 13px}.agents-list{display:grid;gap:6px}.agent-mini{display:flex;gap:11px;align-items:center;padding:10px 11px;border-radius:9px}.agent-mini:hover{background:#1b2639}.agent-avatar{width:36px;height:36px;border-radius:50%;background:#314160;color:#dce9ff;display:grid;place-items:center;font-size:12px;font-weight:700;position:relative}.agent-avatar:after{content:'';position:absolute;width:9px;height:9px;border:2px solid var(--sidebar);right:-1px;bottom:-1px;border-radius:50%;background:var(--green)}.agent-avatar.busy:after{background:#f59e0b}.agent-avatar.offline:after{background:#8490a4}.agent-mini strong{font-size:13.5px;display:block}.agent-mini small{display:block;color:#8f9cb1;font-size:11px;margin-top:2px}.agent-status-controls{display:flex;gap:4px;margin-left:auto}.agent-status-controls button{width:9px;height:9px;border-radius:50%;border:0;background:#637087;padding:0;cursor:pointer}.agent-status-controls button.active{outline:2px solid #dbe7ff;outline-offset:1px}.sidebar-footer{margin-top:auto;color:#9eacc1;font-size:12px;padding:18px 10px 0;display:flex;gap:8px;align-items:center;border-top:1px solid #29354a}.status-dot{width:8px;height:8px;background:#35c584;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px rgba(53,197,132,.12)}.main-content{min-width:0;display:flex;flex-direction:column}.topbar{height:72px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:5}.global-search{height:38px;width:375px;border:1px solid var(--line);background:#fafbfc;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 10px;color:#98a2b3}.global-search span{font-size:19px}.global-search input,.lookup-input-wrap input,.composer input,.email-composer>input,.customer-form input,.customer-form select{border:0;outline:0;background:transparent;font:inherit;color:var(--ink);width:100%}.global-search kbd{font:600 10px var(--font);color:#98a2b3;background:#f1f3f6;border-radius:4px;padding:3px 5px;white-space:nowrap}.topbar-actions{display:flex;align-items:center;gap:15px}.icon-button{border:0;background:transparent;color:#667085;font:600 16px var(--font);cursor:pointer;position:relative;width:35px;height:35px;border-radius:8px}.icon-button:hover{background:#f2f4f7}.icon-button i{position:absolute;width:5px;height:5px;background:var(--red);border-radius:50%;top:8px;right:7px}.user-menu{border:0;background:transparent;display:flex;align-items:center;gap:8px;font:600 12px var(--font);color:#344054}.mobile-menu{display:none}.content-scroll{padding:31px 32px 50px}.tab-view{display:none}.tab-view.active{display:block}.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:26px}.page-heading.compact{margin-bottom:20px}.eyebrow{color:var(--blue);font-size:10px;font-weight:700;letter-spacing:.12em;margin:0 0 7px;display:flex;gap:7px;align-items:center}.eyebrow .status-dot{width:6px;height:6px}.page-heading h1{font:800 25px var(--display);letter-spacing:-.9px;margin:0 0 5px}.page-heading>div>p:not(.eyebrow){color:var(--muted);margin:0;font-size:13px}.heading-actions{display:flex;gap:9px}.button{border:0;border-radius:7px;padding:9px 13px;font:700 12px var(--font);cursor:pointer;display:inline-flex;gap:7px;align-items:center;justify-content:center;transition:.18s}.button-primary{color:#fff;background:var(--blue);box-shadow:0 1px 2px rgba(16,24,40,.16)}.button-primary:hover{background:var(--blue-dark)}.button-secondary{color:#344054;background:#fff;border:1px solid #d9dee7}.button-secondary:hover{background:#f9fafb}.button-full{width:100%;padding:11px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:17px;display:flex;gap:12px;min-width:0}.metric-icon,.quick-icon{width:35px;height:35px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:0 0 auto}.blue{background:var(--blue-soft);color:var(--blue)}.green{background:var(--green-soft);color:var(--green)}.violet{background:var(--violet-soft);color:var(--violet)}.orange{background:var(--orange-soft);color:var(--orange)}.metric-card span{color:var(--muted);font-size:11px;display:block;white-space:nowrap}.metric-card strong{font:800 21px var(--display);letter-spacing:-.7px;display:block;margin:2px 0 1px}.metric-card small{color:#98a2b3;font-size:10px;white-space:nowrap}.dashboard-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:20px}.surface{background:#fff;border:1px solid var(--line);border-radius:11px}.activity-card,.customer-lookup{min-height:330px}.surface-heading{display:flex;justify-content:space-between;align-items:flex-start;padding:19px 20px 14px}.surface-heading h2,.rail-heading h2,.thread-panel-head h2{font:700 14px var(--display);letter-spacing:-.2px;margin:0 0 4px}.surface-heading p,.rail-heading p{color:#98a2b3;margin:0;font-size:11px}.live-chip{color:var(--green);font-size:10px;font-weight:700;padding:5px 7px;background:var(--green-soft);border-radius:5px;display:inline-flex;align-items:center;gap:5px}.live-chip i{width:5px;height:5px;background:var(--green);border-radius:50%}.call-log-list {
  max-height: 720px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-top: 1px solid #f1f2f4;
}

.call-log-list::-webkit-scrollbar {
  width: 6px;
}
.call-log-list::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 3px;
}
.call-log-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.call-log-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.call-log {
  padding: 5px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1px solid #f1f2f4 !important;
  min-height: 0 !important;
}
.call-log:last-child { border: 0 !important; }
.log-symbol {
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
  flex: 0 0 24px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
}
.call-log-main {
  min-width: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
}
.call-log-main strong {
  display: block !important;
  font-size: 11.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.call-log-main span {
  display: block !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  margin-top: 1px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.log-right {
  text-align: right !important;
  font-size: 9.5px !important;
  color: #98a2b3 !important;
  line-height: 1.1 !important;
  flex: 0 0 auto !important;
}
.call-status {
  font-weight: 700 !important;
  text-transform: capitalize !important;
  color: var(--green) !important;
  display: block !important;
  margin-top: 1px !important;
  font-size: 9px !important;
}.call-status.missed{color:var(--red)}.lookup-input-wrap{margin:0 20px;display:flex;align-items:center;gap:8px;border:1px solid #d9dee7;border-radius:8px;padding:4px 5px 4px 10px}.lookup-input-wrap>span{font-size:18px;color:#98a2b3}.lookup-input-wrap input{font-size:12px}.lookup-input-wrap .button{padding:8px 11px}.search-results{margin:17px 20px}.empty-state{min-height:168px;border:1px dashed #d9dee7;border-radius:8px;display:grid;place-content:center;text-align:center;color:#98a2b3;font-size:11px;padding:20px}.empty-state p{margin:6px 0 0}.empty-icon{font-size:25px;color:#bdc5d2}.search-card{border:1px solid #edf0f4;border-radius:8px;padding:12px;display:flex;gap:10px;align-items:center;margin-bottom:8px}.search-card:last-child{margin:0}.customer-initial{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:11px}.search-card-main{flex:1;min-width:0}.search-card-main strong{font-size:12px}.search-card-main p{font-size:10px;color:var(--muted);margin:3px 0 0}.location-pill{font-size:10px;color:#4d4fb4;background:#f0effe;border-radius:5px;padding:4px 6px;font-weight:700;display:inline-block;margin-top:5px}.hidden{display:none}.search-card-actions{display:flex;gap:4px}.small-action{border:1px solid #dde2e9;background:#fff;border-radius:5px;padding:5px 6px;cursor:pointer;color:#475467;font-size:11px}.small-action:hover{background:#f8fafc;color:var(--blue)}.utility-rail{background:#fff;border-left:1px solid var(--line);padding:22px 19px;min-height:100vh}.service-card{background:linear-gradient(135deg,#eaf1ff,#f8faff);border:1px solid #dce8ff;border-radius:11px;padding:15px}.service-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.service-icon{display:grid;place-items:center;width:29px;height:29px;background:#fff;color:var(--blue);border-radius:7px;font-weight:700}.service-card h2{color:#667085;font-size:11px;margin:0 0 4px}.service-card strong{font:700 16px var(--display);letter-spacing:-.4px}.service-card p{font-size:10px;color:#667085;margin:5px 0 0}.rail-section{padding:23px 1px;border-bottom:1px solid var(--line)}.rail-heading{margin-bottom:14px}.rail-heading.inline{display:flex;justify-content:space-between;align-items:center}.field-label{font-size:10px;font-weight:700;color:#667085;display:block;margin-bottom:6px}.utility-rail select{width:100%;border:1px solid #d9dee7;border-radius:7px;padding:9px;background:#fff;color:#344054;font:12px var(--font);outline-color:var(--blue)}.simulation-actions{display:grid;gap:5px;margin-top:11px}.quick-action{border:0;border-radius:7px;background:#f8fafc;padding:8px;display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer}.quick-action:hover{background:#f2f4f7}.quick-icon{width:29px;height:29px;border-radius:7px;font-size:13px}.quick-action strong,.quick-action small{display:block}.quick-action strong{font-size:11px}.quick-action small{color:#98a2b3;font-size:9px;margin-top:1px}.text-button{color:var(--blue);border:0;background:transparent;padding:0;font:700 10px var(--font);cursor:pointer}.locations-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.location-cell{height:28px;display:grid;place-items:center;border:1px solid #e7eaf0;border-radius:5px;color:#667085;font-size:9px;font-weight:700}.inbox-layout{display:grid;grid-template-columns:265px 1fr;min-height:570px;overflow:hidden}.thread-panel{border-right:1px solid var(--line);background:#fcfcfd}.thread-panel-head{padding:18px 16px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.count-pill{color:var(--blue);font-size:10px;font-weight:700;background:var(--blue-soft);border-radius:9px;padding:3px 6px}.thread-list{max-height:520px;overflow:auto}.thread-item{padding:13px 16px;border-bottom:1px solid #edf0f3;cursor:pointer;border-left:2px solid transparent}.thread-item:hover{background:#f7f9fc}.thread-item.active{background:#edf4ff;border-left-color:var(--blue)}.thread-item-top{display:flex;justify-content:space-between;gap:8px}.thread-item strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread-item time{font-size:9px;color:#98a2b3;white-space:nowrap}.thread-item p{font-size:10px;color:#667085;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread-meta{font-size:9px;color:#98a2b3}.conversation-panel{min-width:0;display:flex;flex-direction:column}.conversation-head{padding:18px 20px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.conversation-kicker{font-size:9px;color:#98a2b3;font-weight:700;letter-spacing:.08em;margin:0 0 3px}.conversation-head h2{font:700 15px var(--display);margin:0}.subtle{background:#f9fafb;font-size:12px}.message-history{flex:1;min-height:395px;max-height:430px;overflow:auto;padding:22px;background:linear-gradient(#fff,#fbfcfd);display:flex;flex-direction:column;gap:11px}.message-row{display:flex;max-width:77%;gap:8px}.message-row.agent{align-self:flex-end;flex-direction:row-reverse}.message-bubble{padding:9px 11px;border-radius:9px 9px 9px 2px;background:#f1f4f8;color:#344054;font-size:12px;line-height:1.45}.message-row.agent .message-bubble{background:var(--blue);color:#fff;border-radius:9px 9px 2px 9px}.message-meta{font-size:9px;color:#98a2b3;margin-top:4px}.message-row.agent .message-meta{text-align:right}.composer,.email-composer{margin:13px 16px;border:1px solid #dce1e8;border-radius:8px;padding:4px 4px 4px 11px;display:flex;align-items:center;gap:8px}.composer input{font-size:12px}.composer .button{padding:8px 10px}.email-composer{display:block;padding:0;margin-bottom:16px}.email-composer>input{display:block;padding:10px 11px;border-bottom:1px solid #edf0f3;font-size:11px}.email-composer .composer{margin:0;border:0;border-radius:0}.directory-card{overflow:hidden}.directory-toolbar{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.compact-input{margin:0;width:290px;height:34px}.compact-input .button{display:none}.muted-label{font-size:11px;color:#98a2b3}.customer-directory{max-height:540px;overflow:auto}.customer-row{display:grid;grid-template-columns:2fr 1.3fr 1.4fr 1fr;gap:15px;align-items:center;padding:13px 16px;border-bottom:1px solid #f0f2f5}.customer-name{display:flex;align-items:center;gap:9px}.customer-name strong{font-size:12px}.customer-name small,.customer-contact{font-size:10px;color:#98a2b3;display:block;margin-top:2px}.customer-code{font-size:10px;color:var(--blue);background:var(--blue-soft);font-weight:700;padding:3px 5px;border-radius:4px}.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:20;place-items:center;padding:20px}.modal-backdrop.active{display:grid}.modal-card{position:relative;width:min(455px,100%);background:#fff;border-radius:12px;padding:27px;box-shadow:0 20px 45px rgba(16,24,40,.2)}.modal-card h2{font:800 20px var(--display);margin:0 0 5px;letter-spacing:-.5px}.modal-description{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 19px}.modal-close{position:absolute;right:15px;top:13px;border:0;background:transparent;color:#98a2b3;font-size:24px;cursor:pointer}.customer-form{display:grid;gap:12px}.customer-form label{color:#475467;font-size:11px;font-weight:700;display:grid;gap:5px}.customer-form input,.customer-form select{border:1px solid #d9dee7;border-radius:7px;padding:9px;font-size:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.incoming-call{text-align:center;width:min(380px,100%)}.call-pulse{width:50px;height:50px;margin:0 auto 12px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:22px;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(37,99,235,.08)}.call-number{font:600 16px var(--display);margin:0;color:#667085}.call-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;margin:20px 0}.call-details div{padding:9px;background:#f8fafc;border-radius:7px}.call-details div:last-child{grid-column:1/-1}.call-details span,.call-details strong{display:block}.call-details span{font-size:9px;color:#98a2b3;margin-bottom:3px}.call-details strong{font-size:11px}.toast-container{position:fixed;right:20px;bottom:20px;z-index:30;display:grid;gap:8px}.toast{background:#182230;color:#fff;border-radius:8px;padding:11px 14px;font-size:12px;box-shadow:0 8px 25px rgba(16,24,40,.2);animation:slideIn .25s ease}.toast.success{border-left:3px solid #35c584}@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:1320px){.app-shell{grid-template-columns:230px minmax(0,1fr)}.utility-rail{display:none}.metric-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.app-shell{display:block}.sidebar{display:none}.topbar{padding:0 16px}.mobile-menu{display:block;border:0;background:transparent;font-size:20px}.global-search{width:min(60vw,380px)}.content-scroll{padding:22px 16px}.dashboard-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-direction:column}.customer-row{grid-template-columns:1.5fr 1fr}.customer-row .customer-contact{display:none}}@media(max-width:600px){.topbar{height:60px}.user-menu>span:not(.user-avatar){display:none}.global-search kbd{display:none}.metric-grid{grid-template-columns:1fr 1fr}.metric-card{padding:12px}.metric-card small{display:none}.inbox-layout{grid-template-columns:1fr}.thread-panel{border-right:0;border-bottom:1px solid var(--line)}.thread-list{max-height:180px}.message-history{min-height:290px}.form-grid{grid-template-columns:1fr}.heading-actions{width:100%}.heading-actions .button{flex:1}.customer-row{display:flex;justify-content:space-between}.customer-row .location-pill{display:none}}
/* Customer actions */
.customer-row{grid-template-columns:2fr 1.3fr 1.4fr 1fr auto}
.customer-actions{display:flex;justify-content:flex-end}
.delete-action{color:var(--red);font-size:16px;line-height:1;width:27px;height:27px;padding:0}
.delete-action:hover{background:#fff1f1;color:#b42318}
@media(max-width:900px){.customer-row{grid-template-columns:1.5fr 1fr auto}}

/* Contact import and customer/driver directory */
.directory-type-tabs{display:flex;gap:7px;margin-bottom:12px}
.directory-type-tab{border:1px solid #d9dee7;background:#fff;color:#667085;border-radius:8px;padding:8px 13px;font:700 12px var(--font);cursor:pointer}
.directory-type-tab span{display:inline-grid;place-items:center;min-width:20px;margin-left:4px;padding:2px 5px;border-radius:10px;background:#f1f3f6;color:#98a2b3;font-size:10px}
.directory-type-tab.active{border-color:#c9dafa;background:var(--blue-soft);color:var(--blue)}
.directory-type-tab.active span{background:#fff;color:var(--blue)}
.import-format-hint{padding:10px 18px;border-bottom:1px solid #f0f2f5;background:#fcfdff;color:#98a2b3;font-size:11px}
.import-format-hint strong{color:#667085;font-weight:600}
.import-result{padding:10px 18px;border-bottom:1px solid #d9f0e4;background:#f2fbf6;color:#18794e;font-size:11px;line-height:1.45}
.driver-row{grid-template-columns:2fr 1.3fr 1.4fr 1fr}
@media(max-width:900px){.driver-row{grid-template-columns:1.5fr 1fr 1fr}}
/* Email inbox */
.email-tools{padding:11px 12px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.email-search{margin:0;width:100%;height:34px}
.email-filter,.email-recipient select{width:100%;border:1px solid #d9dee7;border-radius:7px;padding:8px 9px;background:#fff;color:#344054;font:11px var(--font);outline-color:var(--blue)}
.email-recipient{padding:13px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.email-recipient label{font-size:11px;font-weight:700;color:#667085}
.email-recipient select{flex:1;min-width:0}
.email-inbox-layout .thread-list{max-height:470px}
@media(max-width:600px){.email-recipient{align-items:stretch;flex-direction:column;gap:6px}.email-inbox-layout .thread-list{max-height:180px}}
/* Active call transfer actions */
.agent-call-actions{margin-left:auto;display:flex;align-items:center}
.transfer-agent-button{border:1px solid #8bb4ff;background:#edf4ff;color:#1d4ed8;border-radius:5px;padding:4px 6px;font:700 9px var(--font);cursor:pointer;white-space:nowrap}
.transfer-agent-button:hover{background:#dbeafe;color:#1e40af}
.agent-call-actions + .agent-status-controls{margin-left:0}
.recent-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;text-align:left;margin:16px 0}
.recent-contact-section{min-width:0;padding:10px;background:#f8fafc;border-radius:8px}
.recent-contact-section h3{font:700 10px var(--display);margin:0 0 7px;color:#475467}
.recent-contact-list{display:grid;gap:6px;max-height:126px;overflow:auto}
.recent-message{padding:7px;background:#fff;border:1px solid #edf0f4;border-radius:6px;overflow:hidden}
.recent-message strong,.recent-message p,.recent-message time{display:block}
.recent-message strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-message p{font-size:10px;line-height:1.35;color:#667085;margin:2px 0}
.recent-message time{font-size:8px;color:#98a2b3}
.recent-empty{font-size:9px;color:#98a2b3}
.call-modal-actions{display:grid;gap:7px}
@media(max-width:600px){.recent-contact-grid{grid-template-columns:1fr}}

/* Email layout alignment */
.email-tools {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.email-search {
  width: 100% !important;
  max-width: 100%;
  height: 34px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.email-search > span {
  flex: 0 0 auto;
  font-size: 15px;
  color: #98a2b3;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.email-search > input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 0 0 6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  box-sizing: border-box;
}
.ticket-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
#btn-claim-ticket {
  align-self: flex-end !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px !important;
  margin: 0;
  white-space: nowrap;
}

.search-card{cursor:pointer}
.search-card:focus{outline:2px solid var(--blue);outline-offset:2px}
.customer-detail-view{display:block;min-height:168px}
.customer-detail-back{margin-bottom:14px}
.customer-detail-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}
.customer-detail-heading>div:first-child{display:flex;align-items:center;gap:10px;min-width:0}
.customer-detail-heading h3{font:800 15px var(--display);letter-spacing:-.3px;margin:0 0 3px}
.customer-detail-heading p,.customer-detail-heading small{display:block;color:var(--muted);font-size:10px;margin:0}
.customer-detail-heading small{margin-top:3px;color:#98a2b3}
.customer-detail-actions{display:flex;gap:5px;flex-shrink:0}
.customer-detail-actions .button{padding:7px 8px;font-size:10px}
.customer-detail-actions .button:disabled{opacity:.45;cursor:not-allowed}
.customer-history-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.customer-history-column{min-width:0;border:1px solid #edf0f4;border-radius:8px;padding:10px;background:#fcfcfd}
.history-column-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.history-column-heading h3{font:700 11px var(--display);margin:0}
.history-column-heading span{font-size:9px;color:var(--blue);background:var(--blue-soft);padding:3px 6px;border-radius:8px}
.history-message-list{display:grid;gap:6px;max-height:260px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.history-message{background:#fff;border:1px solid #edf0f4;border-radius:6px;padding:8px}
.history-message.agent-message{background:#f3f7ff;border-color:#d7e5ff}
.history-message-author,.history-message strong,.history-message p,.history-message time{display:block}
.history-message-author{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#98a2b3;margin-bottom:3px}
.history-message.agent-message .history-message-author{color:var(--blue)}
.history-message strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-message p{font-size:10px;line-height:1.35;color:#667085;margin:3px 0}
.history-message time{font-size:8px;color:#98a2b3}
.history-empty{padding:16px 4px;color:#98a2b3;font-size:10px;text-align:center}
@media(max-width:600px){.customer-detail-heading{display:block}.customer-detail-actions{margin-top:12px}.customer-detail-actions .button{flex:1}.customer-history-grid{grid-template-columns:1fr}}

/* ================================================================
   DESIGN REFRESH v3 — Balanced, Accessible, Modern
   Scaled ~10% down from v2. Customer search is now central.
   ================================================================ */

/* --- 1. GLOBAL --- */
body { font-size: 14.5px; line-height: 1.5; }
.page-heading h1 { font-size: 26px; letter-spacing: -.9px; }
.page-heading > div > p:not(.eyebrow) { font-size: 13.5px; }
.eyebrow { font-size: 10.5px; letter-spacing: .13em; }
.button { padding: 9px 14px; font-size: 12.5px; border-radius: 8px; transition: all .22s ease; }
.button-primary { box-shadow: 0 2px 5px rgba(37,99,235,.18); }
.button-primary:hover { box-shadow: 0 3px 12px rgba(37,99,235,.24); transform: translateY(-1px); }
.button-secondary:hover { border-color: #c0c8d4; }

/* --- 2. SIDEBAR --- */
.sidebar { padding: 26px 20px 20px; }
.nav-item { padding: 12px 14px; font-size: 14px; border-radius: 9px; gap: 12px; }
.nav-item > span { font-size: 20px; }
.nav-item b { font-size: 11px; padding: 3px 8px; }
.agent-mini { padding: 11px 12px; gap: 11px; border-radius: 9px; }
.agent-avatar { width: 36px; height: 36px; font-size: 12.5px; }
.agent-avatar:after { width: 9px; height: 9px; }
.agent-mini strong { font-size: 13.5px; }
.agent-mini small { font-size: 11.5px; margin-top: 2px; }
.agent-status-controls button { width: 9px; height: 9px; }
.sidebar-section-label { font-size: 11px; margin: 32px 10px 13px; }
.workspace-switcher strong { font-size: 13.5px; }
.workspace-switcher small { font-size: 11px; }

/* --- DYNAMIC AGENT ACTION CONTROLS ROW --- */
.agent-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -15px 0 22px 0;
}

.agent-controls-row .queue-profile-accordion {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Dynamic Button Color States for Kø Profil Status Card (Matching Left Sidebar Menu Style) */
.queue-card-wrapper {
  width: 100%;
  border-radius: 11px;
  padding: 13px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #202b3e !important;
  border: 1px solid #2d3a50 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.queue-card-wrapper:hover {
  background: #26334a !important;
  border-color: #374762 !important;
}

.queue-card-wrapper .queue-accordion-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  position: relative;
}

.topbar { position: relative !important; }
.global-search-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.queue-card-actions-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 2px;
}

.queue-card-actions-row .pause-control-container {
  flex: 0 0 auto;
}

.queue-card-actions-row .btn-agent-action {
  width: 44px !important;
  height: 36px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.queue-accordion-btn .queue-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #dbe7ff;
  color: #2355b7;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  flex: 0 0 32px;
  margin: 0;
}

.queue-accordion-btn .queue-btn-text {
  text-align: left;
  flex: 1;
  min-width: 0;
}

.queue-accordion-btn .queue-btn-text strong {
  color: #ffffff;
  font: 600 14px var(--font);
  display: block;
  text-align: left;
}

/* Crisp Pastel Sub-Text for Line Name & Timer (Matching Left Menu Typography) */
.status-lines-sub {
  color: #aeb8c8 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  text-shadow: none !important;
  display: block;
  text-align: left;
}

.status-timer-sub {
  font-size: 10.5px !important;
  color: #75829a !important;
  font-weight: 600 !important;
  margin-top: 1px;
  text-shadow: none !important;
  display: block;
  text-align: left;
}

.queue-accordion-btn .queue-chevron {
  color: #aeb8c8;
  margin-left: auto;
}

.queue-accordion-btn .queue-chevron {
  color: rgba(255, 255, 255, 0.9);
}

/* Action Control Buttons (Vibrant Action Buttons) */
.btn-agent-action {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-agent-action:hover {
  transform: translateY(-1px);
}

.btn-agent-action:active {
  transform: translateY(0);
}

.btn-agent-action.disabled-gray {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #9ca3af !important;
  box-shadow: none !important;
  opacity: 0.65;
}

.btn-pause {
  background: #f59e0b;
  border-color: #fbbf24;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}

.btn-pause:hover {
  background: #d97706;
}

.btn-pause.active-resume {
  background: #10b981;
  border-color: #34d399;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  animation: pulseResume 2s infinite;
}

.btn-pause.active-resume:hover {
  background: #059669;
}

@keyframes pulseResume {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.btn-logout {
  background: #ef4444;
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.btn-logout:hover {
  background: #dc2626;
}

/* Pause Dropdown Menu */
.pause-control-container {
  position: relative;
}

.pause-dropdown-menu {
  display: none;
  position: absolute;
  top: 46px;
  right: 0;
  width: 140px;
  background: #172131;
  border: 1px solid #28374f;
  border-radius: 9px;
  padding: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 20;
  animation: fadeInDown 0.18s ease forwards;
}

.pause-control-container.open .pause-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pause-option-btn {
  background: transparent;
  border: 0;
  color: #e2e8f0;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.15s ease;
}

.pause-option-btn:hover {
  background: #273752;
  color: #fff;
}

.queue-profile-accordion {
  position: relative;
}

.queue-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  background: #192436;
  border: 1px solid #28374f;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.queue-accordion-btn:hover {
  background: #202e46;
  border-color: #3b5073;
}

.queue-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(66, 133, 244, 0.15);
  color: #70a5ff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.queue-btn-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.queue-btn-text strong {
  font-size: 12px;
  color: #f1f5f9;
  font-weight: 700;
}

.queue-btn-text small {
  font-size: 10px;
  color: #8da2c0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.queue-chevron {
  font-size: 12px;
  color: #8da2c0;
  transition: transform 0.25s ease;
}

.queue-profile-accordion.open .queue-chevron {
  transform: rotate(180deg);
  color: #70a5ff;
}

.queue-panel-content {
  display: none;
  margin-top: 8px;
  padding: 10px;
  background: #172131;
  border: 1px solid #28374f;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: fadeInDown 0.2s ease forwards;
}

.queue-profile-accordion.open .queue-panel-content {
  display: block;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.queue-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.queue-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  background: #1f2c42;
  border: 1px solid #2c3e5a;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.queue-toggle-item:hover {
  background: #273752;
  border-color: #3b5175;
}

.queue-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.queue-info strong {
  font-size: 11.5px;
  color: #e2e8f0;
  font-weight: 600;
}

.queue-info small {
  font-size: 9.5px;
  color: #8da2c0;
}

/* Modern iOS/SaaS Toggle Switch Slider */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #3a4b66;
  transition: 0.25s ease;
  border-radius: 18px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  transition: 0.25s ease;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(16px);
}

/* --- 3. TOPBAR --- */
.topbar { height: 74px; backdrop-filter: blur(12px); }
.global-search { height: 40px; width: 400px; border-radius: 9px; padding: 0 12px; }
.global-search input { font-size: 13.5px; }
.global-search kbd { font-size: 10.5px; padding: 3px 6px; border-radius: 5px; }
.user-menu { font-size: 12.5px; gap: 8px; }
.workspace-avatar, .user-avatar { width: 30px; height: 30px; font-size: 10.5px; border-radius: 8px; }

/* --- 4. METRICS --- */
.metric-grid { gap: 14px; margin-bottom: 22px; }
.metric-card { padding: 18px 20px; border-radius: 12px; gap: 13px; box-shadow: 0 1px 3px rgba(16,24,40,.04); transition: box-shadow .2s ease, transform .2s ease; }
.metric-card:hover { box-shadow: 0 3px 14px rgba(16,24,40,.07); transform: translateY(-1px); }
.metric-icon, .quick-icon { width: 37px; height: 37px; border-radius: 10px; font-size: 17px; }
.metric-card span { font-size: 11.5px; }
.metric-card strong { font-size: 23px; letter-spacing: -.7px; }
.metric-card small { font-size: 10.5px; }

/* --- 5. DASHBOARD LAYOUT — Customer Search is Central --- */
.surface { border-radius: 13px; box-shadow: 0 1px 3px rgba(16,24,40,.03); }
.surface-heading { padding: 20px 22px 14px; }
.surface-heading h2, .rail-heading h2, .thread-panel-head h2 { font-size: 15px; letter-spacing: -.25px; }
.surface-heading p, .rail-heading p { font-size: 11.5px; }
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.customer-lookup {
  order: -1;
  min-height: 340px;
}
.activity-card {
  min-height: 650px;
  max-height: none;
  overflow: visible;
}
.content-scroll { padding: 30px 32px 50px; }

/* --- 6. CALL LOGS (compact list fitting 15+ items on screen) --- */
.call-log {
  padding: 6px 14px !important;
  gap: 10px !important;
}
.log-symbol {
  width: 26px !important;
  height: 26px !important;
  font-size: 13px !important;
  flex: 0 0 26px !important;
}
.call-log-main strong {
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-log-main span {
  font-size: 10.5px !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-right {
  font-size: 10px !important;
  line-height: 1.2 !important;
}
.call-status {
  font-size: 9.5px !important;
  margin-top: 1px !important;
}

/* --- 7. CUSTOMER SEARCH & CARDS --- */
.lookup-input-wrap { margin: 0 22px; padding: 5px 6px 5px 12px; border-radius: 9px; }
.lookup-input-wrap input { font-size: 13.5px; }
.lookup-input-wrap .button { padding: 8px 13px; }
.search-results { margin: 18px 22px; }
.search-card { padding: 13px 13px; border-radius: 10px; gap: 12px; margin-bottom: 9px; transition: border-color .2s ease, box-shadow .2s ease; }
.search-card:hover { border-color: #c9d2de; box-shadow: 0 2px 10px rgba(16,24,40,.05); }
.customer-initial { width: 35px; height: 35px; border-radius: 9px; font-size: 12px; }
.search-card-main strong { font-size: 13px; }
.search-card-main p { font-size: 11.5px; margin: 3px 0 0; }
.customer-code { font-size: 10.5px; padding: 3px 6px; border-radius: 5px; }
.small-action { padding: 6px 7px; border-radius: 6px; font-size: 12px; }
.location-pill { font-size: 10.5px; padding: 4px 7px; border-radius: 6px; }
.empty-state { font-size: 12.5px; min-height: 180px; border-radius: 10px; }
.empty-icon { font-size: 28px; }

/* --- 8. ★ INCOMING CALL POPUP ★ --- */
.modal-backdrop { background: rgba(10,18,30,.55); backdrop-filter: blur(6px); }
.modal-card { border-radius: 15px; padding: 28px; box-shadow: 0 22px 55px rgba(10,18,30,.26); }
.modal-card h2 { font-size: 20px; }
.modal-close { right: 16px; top: 14px; font-size: 26px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
.modal-close:hover { background: #f2f4f7; }

.incoming-call { width: min(510px, 95vw); padding: 36px 32px; }
.incoming-call .eyebrow { justify-content: center; font-size: 11px; letter-spacing: .15em; margin-bottom: 9px; }
.call-pulse {
  width: 68px; height: 68px; margin: 0 auto 16px;
  font-size: 30px; border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(37,99,235,.1), 0 0 0 22px rgba(37,99,235,.04);
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 9px rgba(37,99,235,.12), 0 0 0 18px rgba(37,99,235,.05); }
  50% { box-shadow: 0 0 0 14px rgba(37,99,235,.08), 0 0 0 27px rgba(37,99,235,.02); }
  100% { box-shadow: 0 0 0 9px rgba(37,99,235,.12), 0 0 0 18px rgba(37,99,235,.05); }
}
.incoming-call h2 { font-size: 25px; letter-spacing: -.6px; margin-bottom: 3px; }
.call-number { font-size: 18px; letter-spacing: -.2px; }
.call-details { gap: 10px; margin: 22px 0; }
.call-details div { padding: 12px 14px; border-radius: 9px; background: #f4f7fb; }
.call-details span { font-size: 11px; margin-bottom: 4px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.call-details strong { font-size: 14px; }
.call-modal-actions { gap: 9px; }
.call-modal-actions .button { padding: 13px; font-size: 14px; border-radius: 10px; }

/* Recent SMS/Email context inside call popup */
.recent-contact-grid { gap: 12px; margin: 22px 0; }
.recent-contact-section { padding: 14px; border-radius: 10px; background: #f6f8fb; }
.recent-contact-section h3 { font-size: 13px; margin-bottom: 9px; letter-spacing: -.1px; }
.recent-contact-list { gap: 7px; max-height: 180px; }
.recent-message { padding: 10px 12px; border-radius: 8px; }
.recent-message strong { font-size: 11px; }
.recent-message p { font-size: 12px; line-height: 1.45; margin: 3px 0; }
.recent-message time { font-size: 9.5px; }
.recent-empty { font-size: 11.5px; }

/* --- 9. ★ CUSTOMER DETAIL — History Panels ★ --- */
.customer-detail-back .text-button { font-size: 12.5px; padding: 5px 0; }
.customer-detail-heading { gap: 14px; margin-bottom: 20px; }
.customer-detail-heading > div:first-child { gap: 12px; }
.customer-detail-heading h3 { font-size: 18px; letter-spacing: -.4px; margin-bottom: 4px; }
.customer-detail-heading p { font-size: 12.5px; }
.customer-detail-heading small { font-size: 11.5px; margin-top: 3px; }
.customer-detail-actions { gap: 6px; }
.customer-detail-actions .button { padding: 8px 11px; font-size: 11.5px; }
.customer-history-grid { gap: 14px; }
.customer-history-column { padding: 14px; border-radius: 11px; }
.history-column-heading { margin-bottom: 10px; }
.history-column-heading h3 { font-size: 13px; }
.history-column-heading span { font-size: 10.5px; padding: 3px 7px; }
.history-message-list { max-height: 360px; gap: 7px; }
.history-message { padding: 11px 13px; border-radius: 8px; }
.history-message-author { font-size: 9.5px; margin-bottom: 4px; }
.history-message.agent-message .history-message-author { font-size: 9.5px; }
.history-message strong { font-size: 12px; }
.history-message p { font-size: 12px; line-height: 1.5; margin: 4px 0; }
.history-message time { font-size: 9.5px; }
.history-empty { font-size: 12px; padding: 22px 6px; }

/* --- 10. ★ SMS / EMAIL INBOX ★ --- */
.inbox-layout { min-height: 600px; }
.thread-panel-head { padding: 18px 16px 14px; }
.thread-list { max-height: 550px; }
.thread-item { padding: 14px 16px; }
.thread-item strong { font-size: 13px; }
.thread-item time { font-size: 9.5px; }
.thread-item p { font-size: 11.5px; margin: 4px 0; }
.thread-meta { font-size: 10.5px; }
.count-pill { font-size: 10.5px; padding: 3px 7px; }
.conversation-head { padding: 18px 22px 14px; }
.conversation-kicker { font-size: 9.5px; }
.conversation-head h2 { font-size: 16px; }
.message-history { min-height: 430px; max-height: 490px; padding: 24px; gap: 12px; }
.message-row { max-width: 76%; }
.message-bubble { padding: 11px 15px; border-radius: 12px 12px 12px 3px; font-size: 13.5px; line-height: 1.5; }
.message-row.agent .message-bubble { border-radius: 12px 12px 3px 12px; }
.message-meta { font-size: 10.5px; margin-top: 4px; }
.composer { margin: 14px 18px; padding: 5px 5px 5px 12px; border-radius: 10px; }
.composer input { font-size: 13.5px; }
.composer .button { padding: 9px 13px; }

/* Email specifics */
.email-tools { padding: 12px 12px; gap: 9px; }
.email-search { width: auto; height: 36px; min-width: 0; overflow: hidden; }
.email-search input { flex: 1 1 auto; width: auto; min-width: 0; }
.email-filter, .email-recipient select { padding: 9px 10px; font-size: 12.5px; border-radius: 8px; }
.email-recipient { padding: 14px 22px; gap: 11px; }
.email-recipient label { font-size: 12.5px; }
.email-inbox-layout .thread-list { max-height: 500px; }
.email-composer > input { padding: 12px 14px; font-size: 12.5px; }

/* --- 11. CUSTOMER DIRECTORY --- */
.directory-toolbar { padding: 14px 18px; }
.compact-input { width: 300px; height: 36px; }
.muted-label { font-size: 12.5px; }
.customer-directory { max-height: 570px; }
.customer-row { padding: 14px 18px; gap: 16px; }
.customer-name { gap: 11px; }
.customer-name strong { font-size: 13px; }
.customer-name small, .customer-contact { font-size: 11.5px; }
.customer-code { font-size: 10.5px; padding: 3px 6px; }
.delete-action { width: 30px; height: 30px; font-size: 17px; border-radius: 6px; }

/* Customer form modal */
.modal-description { font-size: 13px; margin-bottom: 20px; }
.customer-form { gap: 13px; }
.customer-form label { font-size: 12.5px; gap: 5px; }
.customer-form input, .customer-form select { padding: 10px 11px; font-size: 13px; border-radius: 8px; }
.form-grid { gap: 11px; }

/* Transfer button */
.transfer-agent-button { padding: 5px 8px; font-size: 9.5px; border-radius: 5px; }

/* --- 12. UTILITY RAIL --- */
.utility-rail { padding: 24px 20px; }
.service-card { padding: 16px; border-radius: 12px; }
.service-icon { width: 32px; height: 32px; border-radius: 8px; }
.service-card h2 { font-size: 11.5px; }
.service-card strong { font-size: 17px; }
.service-card p { font-size: 11.5px; }
.rail-section { padding: 24px 2px; }
.field-label { font-size: 10.5px; margin-bottom: 7px; }
.utility-rail select { padding: 10px; font-size: 12.5px; border-radius: 8px; }
.simulation-actions { gap: 6px; margin-top: 12px; }
.quick-action { padding: 10px 9px; border-radius: 8px; gap: 9px; }
.quick-action:hover { background: #eef1f6; }
.quick-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.quick-action strong { font-size: 12px; }
.quick-action small { font-size: 9.5px; }
.text-button { font-size: 11.5px; }
.location-cell { height: 30px; font-size: 9.5px; border-radius: 5px; }

/* --- 13. TOASTS --- */
.toast { padding: 12px 16px; font-size: 13px; border-radius: 9px; box-shadow: 0 8px 30px rgba(16,24,40,.22); }
.toast.success { border-left: 4px solid #35c584; }

/* --- 14. MICRO-ANIMATIONS --- */
.surface { transition: box-shadow .25s ease; }
.surface:hover { box-shadow: 0 2px 10px rgba(16,24,40,.06); }
.modal-backdrop.active { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card { animation: modalSlideUp .3s cubic-bezier(.22,.61,.36,1); }
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.search-card, .thread-item, .customer-row { transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.nav-item { transition: background .15s ease, color .15s ease; }
.small-action { transition: all .15s ease; }
.small-action:hover { transform: scale(1.06); }

/* --- 15. SCROLLBAR --- */
.thread-list::-webkit-scrollbar,
.message-history::-webkit-scrollbar,
.customer-directory::-webkit-scrollbar,
.history-message-list::-webkit-scrollbar,
.recent-contact-list::-webkit-scrollbar {
  width: 5px;
}
.thread-list::-webkit-scrollbar-track,
.message-history::-webkit-scrollbar-track,
.customer-directory::-webkit-scrollbar-track,
.history-message-list::-webkit-scrollbar-track,
.recent-contact-list::-webkit-scrollbar-track {
  background: transparent;
}
.thread-list::-webkit-scrollbar-thumb,
.message-history::-webkit-scrollbar-thumb,
.customer-directory::-webkit-scrollbar-thumb,
.history-message-list::-webkit-scrollbar-thumb,
.recent-contact-list::-webkit-scrollbar-thumb {
  background: #d0d5dd;
  border-radius: 5px;
}
.thread-list::-webkit-scrollbar-thumb:hover,
.message-history::-webkit-scrollbar-thumb:hover,
.customer-directory::-webkit-scrollbar-thumb:hover,
.history-message-list::-webkit-scrollbar-thumb:hover,
.recent-contact-list::-webkit-scrollbar-thumb:hover {
  background: #98a2b3;
}

/* --- 16. RESPONSIVE --- */
@media (max-width: 600px) {
  .incoming-call { padding: 24px 18px; }
  .incoming-call h2 { font-size: 20px; }
  .call-pulse { width: 56px; height: 56px; font-size: 24px; }
  .call-number { font-size: 16px; }
  .call-details strong { font-size: 12px; }
  .recent-contact-section h3 { font-size: 11.5px; }
  .message-history { min-height: 320px; max-height: 400px; }
  .history-message-list { max-height: 280px; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   17. TICKET SYSTEM STYLES
   ================================================================ */

.ticket-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.ticket-filter-btn {
  border: 1px solid #d9dee7;
  background: #fff;
  color: #475467;
  font: 600 12.5px var(--font);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
}
.ticket-filter-btn:hover {
  background: #f8fafc;
  border-color: #c9d2de;
}
.ticket-filter-btn.active {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: #b0cdff;
  font-weight: 700;
}
.filter-count {
  background: #e9effd;
  color: var(--blue);
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.ticket-filter-btn.active .filter-count {
  background: var(--blue);
  color: #fff;
}

.ticket-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.ticket-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge-open { background: #eff6ff; color: #1d4ed8; }
.badge-progress { background: #fef3c7; color: #b45309; }
.badge-waiting { background: #f3e8ff; color: #6b21a8; }
.badge-resolved { background: #dcfce7; color: #15803d; }
.badge-closed { background: #f1f5f9; color: #64748b; }

.ticket-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ticket-controls > .button {
  align-self: center;
  white-space: nowrap;
}
.ticket-control-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ticket-control-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.ticket-select {
  border: 1px solid #d9dee7;
  border-radius: 7px;
  padding: 5px 8px;
  background: #fff;
  font: 600 11.5px var(--font);
  color: var(--ink);
  outline-color: var(--blue);
  cursor: pointer;
}
.ticket-select:hover {
  border-color: #b0b8c6;
}

.ticket-compose-area {
  border-top: 1px solid var(--line);
}

/* Recipient Bar & CC styling */
.email-recipient-bar {
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recipient-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.recipient-row label {
  font-size: 11.5px;
  font-weight: 700;
  color: #667085;
  width: 28px;
}
.recipient-row input {
  flex: 1;
  border: 1px solid #d9dee7;
  border-radius: 7px;
  padding: 7px 11px;
  font: 12.5px var(--font);
  background: #fff;
  color: var(--ink);
  outline-color: var(--blue);
}
.recipient-row input[readonly] {
  background: #f1f4f8;
  color: #344054;
  font-weight: 600;
  border-color: #e2e7f0;
}
.message-cc {
  font-size: 10.5px;
  color: #60a5fa;
  margin-top: 4px;
  font-style: italic;
}

/* Contact info grid for customer detail view */
.customer-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
}
.info-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.info-field.full-width {
  grid-column: 1 / -1;
}
.info-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #98a2b3;
}
.info-field strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
@media (max-width: 600px) {
  .customer-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Clickable directory rows & action buttons */
.customer-row.clickable-row {
  cursor: pointer;
  transition: background-color .15s ease;
}
.customer-row.clickable-row:hover {
  background-color: #f8fafc;
}
.row-chevron {
  font-size: 18px;
  color: #bdc5d2;
  font-weight: 700;
  padding-right: 5px;
  text-align: right;
}
.customer-row.clickable-row:hover .row-chevron {
  color: var(--blue);
}
.customer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.customer-actions .small-action {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.customer-actions .delete-action {
  color: #ef4444;
  border-color: #fca5a5;
  padding: 4px 7px;
}
.customer-actions .delete-action:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Custom Delete Confirmation Modal */
.delete-modal-card {
  text-align: center;
  width: min(400px, 100%);
}
.delete-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fef2f2;
  color: #ef4444;
  font-size: 22px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}
.red-eyebrow {
  color: #ef4444 !important;
}
.modal-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.button-danger {
  background: #ef4444;
  color: #fff;
  border: 0;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.2);
}
.button-danger:hover {
  background: #dc2626;
}

/* Agent Status Indicator Dots (Green, Orange, Red) */
.agent-status-controls {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-left: auto;
}

.agent-status-controls button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.35;
  transition: all .2s ease;
}

.agent-status-controls button:hover {
  opacity: 0.8;
  transform: scale(1.15);
}

/* Green dot - Available */
.agent-status-controls button[data-agent-status="AVAILABLE"] {
  background-color: #22c55e;
}
.agent-status-controls button[data-agent-status="AVAILABLE"].active {
  opacity: 1;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  transform: scale(1.2);
}

/* Orange dot - Busy */
.agent-status-controls button[data-agent-status="BUSY"] {
  background-color: #f97316;
}
.agent-status-controls button[data-agent-status="BUSY"].active {
  opacity: 1;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
  transform: scale(1.2);
}

/* Red dot - Offline */
.agent-status-controls button[data-agent-status="OFFLINE"] {
  background-color: #ef4444;
}
.agent-status-controls button[data-agent-status="OFFLINE"].active {
  opacity: 1;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  transform: scale(1.2);
}

.dashboard-grid.single-column {
  grid-template-columns: 1fr;
}

/* Floating Live Search Overlay */
.global-search-wrap {
  position: relative;
}
.search-clear-btn {
  border: 0;
  background: #eaecf0;
  color: #475467;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
  z-index: 10;
  position: relative;
}
.search-clear-btn:hover {
  color: #101828;
  background: #d0d5dd;
}

.live-search-overlay {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 94vw);
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(16, 24, 40, 0.22);
  max-height: 520px;
  overflow-y: auto;
  z-index: 9999;
  padding: 14px;
}
.live-search-overlay.hidden {
  display: none !important;
}

.search-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #667085;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 12px 6px 6px;
}
.search-section-title:first-child {
  margin-top: 2px;
}

.live-search-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid #f2f4f7;
}
.live-search-card:last-child {
  border-bottom: 0;
}
.live-search-card:hover {
  background: #f8fafc;
}
.live-search-card-main {
  flex: 1;
  min-width: 0;
}
.live-search-card-main strong {
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-search-card-main p {
  font-size: 11px;
  color: var(--muted);
  margin: 3px 0 0;
}
.live-search-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.detail-modal-card {
  max-width: 680px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
}
.detail-modal-card .customer-detail-heading {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.detail-modal-card .customer-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  background: #f8fafc;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 20px;
}

/* Mobile Responsive Enhancements */
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@media (max-width: 900px) {
  .sidebar {
    display: none;
  }
  .sidebar.mobile-open {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    z-index: 1000;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.4);
    animation: slideInLeft 0.22s ease-out;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    z-index: 999;
  }
  .global-search {
    width: 100%;
    max-width: 320px;
  }
}

/* Email delete confirmation: application dialog, not the browser prompt. */
.email-delete-modal {
  max-width: 460px;
  padding: 28px;
  border: 1px solid #fecaca;
  box-shadow: 0 24px 70px rgba(127, 29, 29, 0.22);
}

.email-delete-modal .delete-icon-wrap {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 16px;
  color: #b91c1c;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 1px solid #fecaca;
  font-size: 24px;
}

.email-delete-modal .modal-actions-grid {
  margin-top: 24px;
}

.active-agent-select-wrapper.agent-selector-locked {
  opacity: 0.82;
}

.active-agent-select-wrapper.agent-selector-locked select {
  cursor: not-allowed;
}

#ticket-agent-select:disabled {
  cursor: not-allowed;
  color: #64748b;
  background: #f1f5f9;
}

@media (max-width: 760px) {
  .agent-admin-card {
    grid-template-columns: 1fr !important;
  }
}

/* Agent settings: a spacious, readable desktop form. */
.admin-agent-modal {
  width: min(1080px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px);
  overflow: hidden auto;
  padding: 34px !important;
}

.admin-agent-modal #admin-agents-list-container {
  max-height: 58vh !important;
}

.agent-admin-card {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(280px, 1.45fr) auto !important;
  gap: 16px !important;
  padding: 18px !important;
}

.agent-admin-card label {
  margin-bottom: 7px !important;
  font-size: 12.5px !important;
}

.agent-admin-card input {
  min-height: 46px;
  padding: 11px 13px !important;
  font-size: 15px !important;
}

.agent-admin-card .btn-delete-admin-agent {
  min-width: 46px;
  min-height: 46px;
  font-size: 17px !important;
}

/* Match the right rail's dimensions to the left navigation. */
@media (min-width: 1321px) {
  .app-shell {
    grid-template-columns: 310px minmax(0, 1fr) 310px;
  }
}

.utility-rail {
  min-height: 100vh;
  padding: 26px 20px 20px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}

.agent-controls-rail-section {
  padding-top: 24px !important;
}

/* Kø Profil is its own control. The line actions are shown separately below it. */
#queue-card-wrapper .queue-accordion-btn {
  min-height: 48px;
  gap: 12px;
}

#queue-card-wrapper .queue-btn-text strong {
  font: 600 14px var(--font) !important;
  letter-spacing: 0;
}

#queue-card-wrapper .status-lines-sub {
  font: 600 11.5px var(--font) !important;
}

#queue-agent-actions[hidden] {
  display: none !important;
}

#queue-agent-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
}

#queue-agent-actions .pause-control-container,
#queue-agent-actions .btn-agent-action {
  flex: 1 1 0;
}

#queue-agent-actions .btn-agent-action {
  width: 100% !important;
  height: 44px !important;
  border-radius: 8px !important;
  font: 700 14px var(--font) !important;
}

#queue-agent-actions .pause-dropdown-menu {
  top: calc(100% + 8px);
  right: auto;
  left: 0;
  width: max-content;
  min-width: 180px;
}

#queue-agent-actions .pause-dropdown-menu button {
  font: 600 13px var(--font);
}

@media (max-width: 1000px) {
  .admin-agent-modal {
    width: min(720px, calc(100vw - 32px)) !important;
    padding: 24px !important;
  }

  .agent-admin-card {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 600px) {
  .topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .global-search {
    max-width: 220px;
  }
  .customer-detail-inpage-card .customer-detail-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .customer-detail-inpage-card .customer-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }
  .customer-detail-inpage-card .customer-detail-actions .button {
    width: 100%;
    justify-content: center;
    font-size: 11px;
    padding: 8px 10px;
  }
  .inbox-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .thread-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .thread-list {
    max-height: 180px;
  }
  .conversation-panel {
    min-height: 420px;
  }
  .message-history {
  min-height: 260px;
  max-height: 320px;
}

.clickable-sms-item:hover,
.clickable-email-item:hover {
  background: #edf4ff !important;
  border-color: #93c5fd !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
  transition: all 0.15s ease;
}

.log-symbol.violet-icon { background: #f3e8ff; color: #9333ea; }
.log-symbol.orange-icon { background: #ffedd5; color: #ea580c; }
.call-status.live-status { color: #2563eb; }
.call-status.closed-status { color: #64748b; }

}

.badge-count-wrap,
.nav-item .badge-count-wrap {
  margin-left: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  line-height: 1 !important;
}

.total-num,
.nav-item .total-num,
.badge-count-wrap .total-num {
  font-size: 13px !important;
  color: #a0aec0 !important;
  font-weight: 600 !important;
}

.unread-oval,
.nav-item .unread-oval {
  background: var(--blue) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 1px 7px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 16px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.4) !important;
}

.thread-item.unread-thread {
  background-color: #ebf5ff !important;
  border-left: 3.5px solid #2563eb !important;
}

.thread-item.unread-thread:hover {
  background-color: #dbeafe !important;
}

.unread-dot {
  color: #2563eb;
  font-size: 10px;
  margin-left: 4px;
  vertical-align: middle;
}

.clickable-log {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative !important;
}

.clickable-log:hover {
  background: #f0f7ff !important;
}

.clickable-log.selected-log {
  background: #ebf5ff !important;
  border-left: 3.5px solid #2563eb !important;
}

.log-action-overlay {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(235, 245, 255, 0.94) !important;
  border-radius: 6px !important;
  z-index: 5 !important;
  align-items: center !important;
  justify-content: center !important;
}

.clickable-log.selected-log .log-action-overlay {
  display: flex !important;
}

.log-open-btn-centered {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 3px 18px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4) !important;
  transition: all 0.15s ease !important;
}

.log-open-btn-centered:hover {
  background: #1d4ed8 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.5) !important;
}

/* Mobile Viewport Container & Overflow Fixes */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .app-shell, .main-content, .content-scroll {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .dashboard-grid, .metric-grid, .surface, .activity-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Metric cards responsive column layout on mobile */
  .metric-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .metric-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 10px !important;
    gap: 3px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .metric-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
    flex: 0 0 26px !important;
    border-radius: 7px !important;
    margin-bottom: 2px !important;
  }

  .metric-card > div {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .metric-card span {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
    display: block !important;
    width: 100% !important;
  }

  .metric-card strong {
    font-size: 18px !important;
    line-height: 1.2 !important;
    display: block !important;
    margin: 2px 0 1px !important;
  }

  .metric-card small {
    font-size: 9.5px !important;
    color: #98a2b3 !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
    display: block !important;
  }

  /* Call log items responsiveness on mobile */
  .call-log {
    padding: 6px 10px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .call-log-main {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }

  .call-log-main strong {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  .call-log-main span {
    font-size: 9.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  .log-right {
    font-size: 9px !important;
    flex: 0 0 auto !important;
  }

  /* Agent list items responsiveness */
  .agent-mini {
    padding: 6px 8px !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .agent-mini > span:nth-child(2) {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }

  .agent-mini strong {
    font-size: 11.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .agent-mini small {
    font-size: 9.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  /* Ticket filter bar scrollable on mobile */
  .ticket-filter-bar {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
  }

  .ticket-filter-btn {
    flex: 0 0 auto !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* Customer table & lists responsive overflow */
  .customer-directory, .customer-row, .call-log-list, .search-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Dedicated E-post Mobile Responsiveness & Layout Fixes */
  .email-inbox-layout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .email-inbox-layout .thread-panel {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    width: 100% !important;
  }

  .email-inbox-layout .thread-list {
    max-height: 180px !important;
  }

  #email-tab .conversation-panel {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #email-tab .conversation-head {
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #email-tab .conversation-head > div:first-child {
    width: 100% !important;
  }

  #email-tab .conversation-head h2 {
    font-size: 14px !important;
    word-break: break-word !important;
  }

  .ticket-controls {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 6px !important;
    box-sizing: border-box !important;
  }

  .ticket-control-group {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ticket-control-label {
    font-size: 8.5px !important;
  }

  .ticket-select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
    padding: 5px 6px !important;
  }

  .ticket-controls > .button, #btn-claim-ticket {
    grid-column: span 2 !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  .email-recipient-bar {
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .recipient-row {
    width: 100% !important;
    gap: 6px !important;
  }

  .recipient-row label {
    font-size: 11px !important;
    width: 32px !important;
    flex: 0 0 32px !important;
  }

  .recipient-row input {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  #email-chat-history {
    padding: 12px !important;
    min-height: 240px !important;
    max-height: 340px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #email-chat-history .message-row {
    max-width: 88% !important;
  }

  #email-chat-history .message-bubble {
    padding: 9px 12px !important;
    font-size: 12px !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
  }

  .ticket-compose-area {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .email-composer {
    margin: 8px 12px 12px !important;
    width: auto !important;
    box-sizing: border-box !important;
    border: 1px solid #dce1e8 !important;
    border-radius: 8px !important;
  }

  .email-composer > input {
    padding: 8px 10px !important;
    font-size: 11.5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .email-composer .composer {
    margin: 0 !important;
    padding: 4px 4px 4px 8px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
  }

  .email-composer .composer input {
    font-size: 11.5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .email-composer .composer .button {
    padding: 7px 10px !important;
    font-size: 11px !important;
    flex: 0 0 auto !important;
  }
}

.edit-agent-phone-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 11px !important;
  opacity: 0.65 !important;
  padding: 0 2px !important;
}
.edit-agent-phone-btn:hover {
  opacity: 1 !important;
}
.agent-phone-display {
  color: #70a5ff !important;
  font-size: 10.5px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}
.agent-phone-display:hover {
  text-decoration: underline !important;
}

/* Glassmorphic Ongoing Call Control Banner */
.active-call-control-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.call-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.call-live-pulse {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7) !important;
  animation: pulseGreen 1.5s infinite !important;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.call-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.call-title-row strong {
  font-size: 15px !important;
  color: #f8fafc !important;
}

.call-timer-chip {
  background: #3b82f6 !important;
  color: #fff !important;
  font-family: monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 1px !important;
}

.call-agent-info {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  margin-top: 3px !important;
  display: block !important;
}

.call-agent-info strong {
  color: #e2e8f0 !important;
}

.status-badge-blue {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.call-banner-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.transfer-control-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.transfer-select {
  background: #334155 !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
}

.btn-compact {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.btn-danger-call {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 7px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4) !important;
}

.btn-danger-call:hover {
  background: #b91c1c !important;
  transform: translateY(-1px) !important;
}

/* Topbar Active Agent Selector */
.active-agent-select-wrapper {
  position: relative !important;
  display: inline-block !important;
}

.topbar-agent-native-select {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

.user-menu {
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
  transition: all 0.2s !important;
}

.user-menu:hover {
  background: #f8fafc !important;
  border-color: #3b82f6 !important;
}

.active-agent-info-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.active-agent-label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}

.active-agent-phone {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  margin-top: 1px !important;
}

/* Authentication Login Overlay */
.auth-screen-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #0f172a !important;
  z-index: 99999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px !important;
  transition: opacity 0.3s ease !important;
}

.auth-screen-backdrop.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Modal Overlay Styling */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 100000 !important;
  display: none !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px !important;
}

.modal-overlay.active {
  display: flex !important;
}

.auth-card {
  width: 100% !important;
  max-width: 420px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.microsoft-sso-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: #2f2f2f !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  border: 1px solid #1f1f1f !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.microsoft-sso-button:hover {
  background: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.google-sso-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: #ffffff !important;
  color: #3c4043 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 18px !important;
  border-radius: 8px !important;
  border: 1px solid #dadce0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.google-sso-button:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Email controls: keep deletion aligned with Status and Agent selectors. */
#email-tab .ticket-controls {
  align-items: flex-end;
}

#email-tab #btn-delete-email {
  align-self: flex-end;
  height: 28px;
  margin: 0;
  padding: 0 10px !important;
  white-space: nowrap;
}

/* Queue profile reflects the selected agent's line status. */
#queue-card-wrapper.status-btn-green {
  background: linear-gradient(135deg, #15803d, #166534) !important;
  border-color: #4ade80 !important;
}

#queue-card-wrapper.status-btn-light-orange {
  background: linear-gradient(135deg, #fb923c, #f97316) !important;
  border-color: #fdba74 !important;
}

#queue-card-wrapper.status-btn-purple {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  border-color: #c4b5fd !important;
}

#queue-card-wrapper.status-btn-gray {
  background: #202b3e !important;
  border-color: #2d3a50 !important;
}

#queue-card-wrapper.status-btn-green:hover {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  border-color: #86efac !important;
}

#queue-card-wrapper.status-btn-light-orange:hover {
  background: linear-gradient(135deg, #fdba74, #fb923c) !important;
  border-color: #fed7aa !important;
}

#queue-card-wrapper.status-btn-purple:hover {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-color: #ddd6fe !important;
}

#queue-card-wrapper.status-btn-green .queue-btn-icon,
#queue-card-wrapper.status-btn-light-orange .queue-btn-icon,
#queue-card-wrapper.status-btn-purple .queue-btn-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

#queue-card-wrapper.status-btn-green .queue-btn-text,
#queue-card-wrapper.status-btn-light-orange .queue-btn-text,
#queue-card-wrapper.status-btn-purple .queue-btn-text,
#queue-card-wrapper.status-btn-green .queue-btn-text small,
#queue-card-wrapper.status-btn-light-orange .queue-btn-text small,
#queue-card-wrapper.status-btn-purple .queue-btn-text small {
  color: #fff;
}

/* On desktop, the search is centered in the space between the menu and active agent. */
@media (min-width: 901px) {
  .topbar {
    position: sticky !important;
    justify-content: flex-end;
  }

  .topbar .global-search-wrap {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .topbar .topbar-actions {
    margin-left: auto;
    position: relative;
    z-index: 1;
  }
}

/* The active-agent field lives above Sentralbord in the right rail. */
.utility-agent-select {
  width: 100%;
  margin-bottom: 14px;
}

.utility-agent-select .active-agent-select-wrapper {
  display: block !important;
  width: 100%;
}

.utility-agent-select .user-menu {
  width: 100%;
}

.utility-agent-select .active-agent-phone {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  color: #64748b !important;
  background: transparent !important;
  font-size: 11px !important;
}

/* Kø Profil: a larger, centered status summary with state-specific contrast. */
#queue-card-wrapper .queue-accordion-btn {
  min-height: 104px;
  position: relative;
  justify-content: center;
  text-align: center;
  padding: 9px 44px !important;
}

#queue-card-wrapper .queue-btn-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  text-align: center;
}

#queue-card-wrapper .queue-btn-text strong {
  font-size: 17px !important;
  line-height: 1.2;
}

#queue-card-wrapper .status-lines-sub {
  font-size: 14px !important;
  line-height: 1.3;
  text-align: center !important;
}

#queue-card-wrapper .status-timer-sub {
  font-size: 14px !important;
  line-height: 1.35;
  margin-top: auto;
  padding-top: 10px;
  text-align: center !important;
}

#queue-card-wrapper #status-timer-text {
  font-size: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#queue-card-wrapper .queue-btn-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

#queue-card-wrapper .queue-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

#queue-card-wrapper.status-btn-green .queue-btn-text,
#queue-card-wrapper.status-btn-green .queue-btn-text small,
#queue-card-wrapper.status-btn-green .queue-btn-icon,
#queue-card-wrapper.status-btn-green .queue-chevron {
  color: #dbeafe !important;
}

#queue-card-wrapper.status-btn-light-orange .queue-btn-text,
#queue-card-wrapper.status-btn-light-orange .queue-btn-text small,
#queue-card-wrapper.status-btn-light-orange .queue-btn-icon,
#queue-card-wrapper.status-btn-light-orange .queue-chevron {
  color: #1f2937 !important;
}

#queue-card-wrapper.status-btn-light-orange .queue-btn-icon {
  background: rgba(255, 255, 255, 0.45) !important;
}

/* The subject gets a full row; garage and controls sit directly beneath it. */
#email-tab .email-conversation-head {
  display: block;
}

#email-tab .email-heading-content {
  min-width: 0;
}

#email-tab .email-heading-content > h2 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#email-tab .email-heading-actions-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

#email-tab .email-heading-actions-row > .location-pill {
  flex: 0 0 auto;
  margin-bottom: 1px;
}

#email-tab .ticket-controls {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
}

/* Conversation shortcuts stay on the same left-aligned row as the depot. */
.conversation-contact-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.button-contact-action,
#email-tab .ticket-controls > .button-contact-action {
  min-height: 28px;
  height: 28px;
  padding: 0 10px !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#email-tab .ticket-controls > .button-contact-action {
  align-self: flex-end;
  font-size: 11px;
}

.sms-conversation-head {
  align-items: flex-start;
  gap: 12px;
}

.sms-conversation-head .conversation-contact-actions {
  margin-left: auto;
}

.direct-call-search-card .customer-initial {
  background: #eaf1ff;
  color: #2563eb;
}

.direct-call-search-card .small-action {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}

.direct-call-search-card .small-action:hover {
  background: #1d4ed8;
}

/* Center the company contact card and the selected-agent control. */
.utility-rail .service-card {
  text-align: center;
  position: relative;
  background: #202b3e;
  border-color: #2d3a50;
  border-radius: 9px;
}

.utility-rail .service-card strong,
.utility-rail .service-card p {
  display: block;
  color: #aeb8c8;
}

.utility-rail .service-card strong {
  color: #dbeafe;
}

.utility-rail .service-card-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-bottom: 5px;
}

.utility-rail .service-card-heading .service-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #70a5ff;
  background: rgba(66, 133, 244, 0.15);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.utility-rail .service-card-heading h2 {
  margin: 0;
  color: #fff;
}

.utility-agent-select .user-menu,
.utility-agent-select .active-agent-info-wrap {
  justify-content: center;
  text-align: center;
}

.utility-agent-select .user-menu {
  position: relative;
}

.utility-agent-select .active-agent-info-wrap {
  flex: 1;
  align-items: center;
}

.utility-agent-select .user-menu > .chevron {
  position: absolute;
  right: 12px;
}

/* Kø Profil selects lines; the current status and timer have their own thin card. */
#queue-card-wrapper .queue-accordion-btn {
  min-height: 52px;
  padding: 5px 44px !important;
}

#queue-card-wrapper .queue-btn-text {
  justify-content: center;
}

.queue-timer-card {
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  padding: 8px 14px;
  border: 1px solid #2d3a50;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.queue-timer-card[hidden] {
  display: none;
}

.queue-timer-card .status-timer-sub {
  margin: 0;
  padding: 0;
  font-size: 14px !important;
  line-height: 1.35;
}

.queue-timer-card #status-timer-text {
  font-size: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#queue-timer-card.status-btn-green {
  background: linear-gradient(135deg, #15803d, #166534);
  border-color: #4ade80;
  color: #dbeafe;
}

#queue-timer-card.status-btn-light-orange {
  background: linear-gradient(135deg, #fb923c, #f97316);
  border-color: #fdba74;
  color: #1f2937;
}

#queue-timer-card.status-btn-purple {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-color: #c4b5fd;
  color: #fff;
}

#queue-timer-card.status-btn-gray {
  background: #202b3e;
  border-color: #2d3a50;
  color: #aeb8c8;
}

#queue-timer-card .status-timer-sub,
#queue-timer-card .status-timer-sub span {
  color: inherit !important;
}

@media (max-width: 900px) {
  #email-tab .email-heading-content > h2 {
    white-space: normal;
  }

  #email-tab .email-heading-actions-row {
    align-items: stretch;
    flex-direction: column;
  }

  .sms-conversation-head .conversation-contact-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .topbar .global-search-wrap {
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }

  .topbar .topbar-actions {
    margin-left: 0;
  }
}
/* Email bodies are normalized to readable text while preserving paragraph breaks. */
.email-body-text {
  white-space: pre-wrap;
}