:root { --ink:#182230; --muted:#667085; --line:#e7eaf0; --canvas:#f7f8fa; --surface:#fff; --blue:#0d6b5c; --blue-dark:#0a5a4d; --blue-soft:#e9f4f1; --green:#15714e; --green-soft:#e8f5ef; --violet:#7a4f8f; --violet-soft:#f3eef7; --orange:#a3600e; --orange-soft:#f9efe2; --red:#b03d3d; --sidebar:#0e2c26; --sidebar-muted:#93aca5; --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:calc(15px * var(--ui-scale, 1));-webkit-font-smoothing:antialiased}.app-shell{display:grid;grid-template-columns:calc(310px * var(--ui-scale, 1)) minmax(0,1fr) calc(286px * var(--ui-scale, 1));min-height:100vh}.sidebar{background:var(--sidebar);color:white;padding:calc(26px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));display:flex;flex-direction:column;min-height:100vh}.brand{color:#fff;text-decoration:none;font:bold calc(26px * var(--ui-scale, 1)) var(--display);letter-spacing:calc(-1.4px * var(--ui-scale, 1));display:flex;align-items:center;gap:calc(12px * var(--ui-scale, 1));padding:0 calc(10px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1))}.brand-dot{color:#8ad0c0}.brand-mark{width:calc(28px * var(--ui-scale, 1));height:calc(28px * var(--ui-scale, 1));display:flex;align-items:flex-end;gap:calc(3px * var(--ui-scale, 1));padding:calc(5px * var(--ui-scale, 1));border-radius:calc(12px * var(--ui-scale, 1));background:linear-gradient(145deg,#12806d,#0d6b5c)}.brand-mark span{display:block;width:calc(4px * var(--ui-scale, 1));background:#fff;border-radius:calc(10px * var(--ui-scale, 1))}.brand-mark span:nth-child(1){height:calc(8px * var(--ui-scale, 1))}.brand-mark span:nth-child(2){height:calc(14px * var(--ui-scale, 1))}.brand-mark span:nth-child(3){height:calc(18px * var(--ui-scale, 1))}.workspace-switcher{display:flex;align-items:center;gap:calc(11px * var(--ui-scale, 1));padding:calc(13px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));background:#17352e;border:calc(1px * var(--ui-scale, 1)) solid #1f4239;border-radius:calc(14px * var(--ui-scale, 1));margin:0 0 calc(25px * var(--ui-scale, 1))}.workspace-avatar,.user-avatar{width:calc(34px * var(--ui-scale, 1));height:calc(34px * var(--ui-scale, 1));border-radius:calc(12px * var(--ui-scale, 1));background:#d9ede7;color:#0d6b5c;display:grid;place-items:center;font-size:calc(12px * var(--ui-scale, 1));font-weight:700}.workspace-switcher strong,.workspace-switcher small{display:block}.workspace-switcher strong{font-size:calc(13.5px * var(--ui-scale, 1))}.workspace-switcher small{color:#9db0a8;font-size:calc(12px * var(--ui-scale, 1));margin-top:calc(2px * var(--ui-scale, 1))}.chevron{margin-left:auto;color:var(--muted)}.primary-nav{display:grid;gap:calc(5px * var(--ui-scale, 1))}.nav-item{border:0;background:transparent;color:var(--sidebar-muted);border-radius:calc(12px * var(--ui-scale, 1));padding:calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));text-align:left;font:600 calc(14px * var(--ui-scale, 1)) var(--font);cursor:pointer;display:flex;align-items:center;gap:calc(12px * var(--ui-scale, 1))}.nav-icon{width:calc(22px * var(--ui-scale, 1));height:calc(22px * var(--ui-scale, 1));display:inline-flex;align-items:center;justify-content:center;color:currentColor;flex:0 0 calc(22px * var(--ui-scale, 1))}.nav-item:hover{color:#fff;background:#16241f}.nav-item.active{background:#17584c;color:#fff}.nav-item b{margin-left:auto;background:#d99a3d;color:#241303;border-radius:calc(12px * var(--ui-scale, 1));font-size:calc(12px * var(--ui-scale, 1));padding:calc(3px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1))}.sidebar-section-label{font-size:calc(12px * var(--ui-scale, 1));font-weight:700;color:#9db0a8;letter-spacing:.08em;margin:calc(30px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1))}.agents-list{display:grid;gap:calc(6px * var(--ui-scale, 1))}.agent-mini{display:flex;gap:calc(11px * var(--ui-scale, 1));align-items:center;padding:calc(10px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));border-radius:calc(12px * var(--ui-scale, 1))}.agent-mini:hover{background:#14251f}.agent-avatar{width:calc(36px * var(--ui-scale, 1));height:calc(36px * var(--ui-scale, 1));border-radius:50%;background:#1e3a31;color:#cfe7de;display:grid;place-items:center;font-size:calc(12px * var(--ui-scale, 1));font-weight:700;position:relative}.agent-avatar:after{content:'';position:absolute;width:calc(9px * var(--ui-scale, 1));height:calc(9px * var(--ui-scale, 1));border:calc(2px * var(--ui-scale, 1)) solid var(--sidebar);right:calc(-1px * var(--ui-scale, 1));bottom:calc(-1px * var(--ui-scale, 1));border-radius:50%;background:var(--green)}.agent-avatar.busy:after{background:#b5670f}.agent-avatar.offline:after{background:#85958c}.agent-mini strong{font-size:calc(13.5px * var(--ui-scale, 1));display:block}.agent-mini small{display:block;color:#8b9c93;font-size:calc(12px * var(--ui-scale, 1));margin-top:calc(2px * var(--ui-scale, 1))}.agent-status-controls{display:flex;gap:calc(4px * var(--ui-scale, 1));margin-left:auto}.agent-status-controls button{width:calc(9px * var(--ui-scale, 1));height:calc(9px * var(--ui-scale, 1));border-radius:50%;border:0;background:#56645e;padding:0;cursor:pointer}.agent-status-controls button.active{outline:calc(2px * var(--ui-scale, 1)) solid #d9ede7;outline-offset:calc(1px * var(--ui-scale, 1))}.sidebar-footer{margin-top:auto;color:#93a199;font-size:calc(12px * var(--ui-scale, 1));padding:calc(18px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) 0;display:flex;gap:calc(8px * var(--ui-scale, 1));align-items:center;border-top:calc(1px * var(--ui-scale, 1)) solid #17584c}.status-dot{width:calc(8px * var(--ui-scale, 1));height:calc(8px * var(--ui-scale, 1));background:#2fa678;border-radius:50%;display:inline-block;box-shadow:0 0 0 calc(3px * var(--ui-scale, 1)) rgba(47, 166, 120,.12)}.main-content{min-width:0;display:flex;flex-direction:column}.topbar{height:calc(72px * var(--ui-scale, 1));background:rgba(255,255,255,.92);border-bottom:calc(1px * var(--ui-scale, 1)) solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 calc(32px * var(--ui-scale, 1));position:sticky;top:0;z-index:5}.global-search{height:calc(38px * var(--ui-scale, 1));width:calc(375px * var(--ui-scale, 1));border:calc(1px * var(--ui-scale, 1)) solid var(--line);background:#fafbfc;border-radius:calc(12px * var(--ui-scale, 1));display:flex;align-items:center;gap:calc(8px * var(--ui-scale, 1));padding:0 calc(10px * var(--ui-scale, 1));color:#667085}.global-search span{font-size:calc(19px * var(--ui-scale, 1))}.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 calc(12px * var(--ui-scale, 1)) var(--font);color:#667085;background:#f1f3f6;border-radius:calc(10px * var(--ui-scale, 1));padding:calc(3px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));white-space:nowrap}.topbar-actions{display:flex;align-items:center;gap:calc(15px * var(--ui-scale, 1))}.icon-button{border:0;background:transparent;color:#667085;font:600 calc(16px * var(--ui-scale, 1)) var(--font);cursor:pointer;position:relative;width:calc(35px * var(--ui-scale, 1));height:calc(35px * var(--ui-scale, 1));border-radius:calc(12px * var(--ui-scale, 1))}.icon-button:hover{background:#f2f4f7}.icon-button i{position:absolute;width:calc(5px * var(--ui-scale, 1));height:calc(5px * var(--ui-scale, 1));background:var(--red);border-radius:50%;top:calc(8px * var(--ui-scale, 1));right:calc(7px * var(--ui-scale, 1))}.user-menu{border:0;background:transparent;display:flex;align-items:center;gap:calc(8px * var(--ui-scale, 1));font:600 calc(12px * var(--ui-scale, 1)) var(--font);color:#344054}.mobile-menu{display:none}.content-scroll{padding:calc(31px * var(--ui-scale, 1)) calc(32px * var(--ui-scale, 1)) calc(50px * var(--ui-scale, 1))}.tab-view{display:none}.tab-view.active{display:block}.page-heading{display:flex;justify-content:space-between;gap:calc(20px * var(--ui-scale, 1));align-items:flex-end;margin-bottom:calc(26px * var(--ui-scale, 1))}.page-heading.compact{margin-bottom:calc(20px * var(--ui-scale, 1))}.eyebrow{color:var(--blue);font-size:calc(12px * var(--ui-scale, 1));font-weight:700;letter-spacing:.12em;margin:0 0 calc(7px * var(--ui-scale, 1));display:flex;gap:calc(7px * var(--ui-scale, 1));align-items:center}.eyebrow .status-dot{width:calc(6px * var(--ui-scale, 1));height:calc(6px * var(--ui-scale, 1))}.page-heading h1{font:800 calc(25px * var(--ui-scale, 1)) var(--display);letter-spacing:calc(-.9px * var(--ui-scale, 1));margin:0 0 calc(5px * var(--ui-scale, 1))}.page-heading>div>p:not(.eyebrow){color:var(--muted);margin:0;font-size:calc(13px * var(--ui-scale, 1))}.heading-actions{display:flex;gap:calc(9px * var(--ui-scale, 1))}.button{border:0;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(9px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1));font:700 calc(12px * var(--ui-scale, 1)) var(--font);cursor:pointer;display:inline-flex;gap:calc(7px * var(--ui-scale, 1));align-items:center;justify-content:center;transition:.18s}.button-primary{color:#fff;background:var(--blue);box-shadow:0 calc(1px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) rgba(15, 23, 42,.16)}.button-primary:hover{background:var(--blue-dark)}.button-secondary{color:#344054;background:#fff;border:calc(1px * var(--ui-scale, 1)) solid #d9dee7}.button-secondary:hover{background:#f8fafc}.button-full{width:100%;padding:calc(11px * var(--ui-scale, 1))}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(13px * var(--ui-scale, 1));margin-bottom:calc(20px * var(--ui-scale, 1))}.metric-card{background:#fff;border:calc(1px * var(--ui-scale, 1)) solid var(--line);border-radius:calc(12px * var(--ui-scale, 1));padding:calc(17px * var(--ui-scale, 1));display:flex;gap:calc(12px * var(--ui-scale, 1));min-width:0}.metric-icon,.quick-icon{width:calc(35px * var(--ui-scale, 1));height:calc(35px * var(--ui-scale, 1));border-radius:calc(12px * var(--ui-scale, 1));display:grid;place-items:center;font-size:calc(16px * var(--ui-scale, 1));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:calc(12px * var(--ui-scale, 1));display:block;white-space:nowrap}.metric-card strong{font:800 calc(21px * var(--ui-scale, 1)) var(--display);letter-spacing:calc(-.7px * var(--ui-scale, 1));display:block;margin:calc(2px * var(--ui-scale, 1)) 0 calc(1px * var(--ui-scale, 1))}.metric-card small{color:#667085;font-size:calc(12px * var(--ui-scale, 1));white-space:nowrap}.dashboard-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:calc(20px * var(--ui-scale, 1))}.surface{background:#fff;border:calc(1px * var(--ui-scale, 1)) solid var(--line);border-radius:calc(14px * var(--ui-scale, 1))}.activity-card,.customer-lookup{min-height:calc(330px * var(--ui-scale, 1))}.surface-heading{display:flex;justify-content:space-between;align-items:flex-start;padding:calc(19px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1))}.surface-heading h2,.rail-heading h2,.thread-panel-head h2{font:700 calc(14px * var(--ui-scale, 1)) var(--display);letter-spacing:calc(-.2px * var(--ui-scale, 1));margin:0 0 calc(4px * var(--ui-scale, 1))}.surface-heading p,.rail-heading p{color:#667085;margin:0;font-size:calc(12px * var(--ui-scale, 1))}.live-chip{color:var(--green);font-size:calc(12px * var(--ui-scale, 1));font-weight:700;padding:calc(5px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));background:var(--green-soft);border-radius:calc(10px * var(--ui-scale, 1));display:inline-flex;align-items:center;gap:calc(5px * var(--ui-scale, 1))}.live-chip i{width:calc(5px * var(--ui-scale, 1));height:calc(5px * var(--ui-scale, 1));background:var(--green);border-radius:50%}.call-log-list {
  max-height: calc(720px * var(--ui-scale, 1));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-top: calc(1px * var(--ui-scale, 1)) solid #f1f3f6;
}

.call-log-list::-webkit-scrollbar {
  width: calc(6px * var(--ui-scale, 1));
}
.call-log-list::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: calc(10px * var(--ui-scale, 1));
}
.call-log-list::-webkit-scrollbar-thumb {
  background: #d4cbbb;
  border-radius: calc(10px * var(--ui-scale, 1));
}
.call-log-list::-webkit-scrollbar-thumb:hover {
  background: #8b968f;
}

.call-log {
  padding: calc(5px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) !important;
  display: flex !important;
  align-items: center !important;
  gap: calc(8px * var(--ui-scale, 1)) !important;
  border-bottom: calc(1px * var(--ui-scale, 1)) solid #f1f3f6 !important;
  min-height: 0 !important;
}
.call-log:last-child { border: 0 !important; }
.log-symbol {
  width: calc(24px * var(--ui-scale, 1)) !important;
  height: calc(24px * var(--ui-scale, 1)) !important;
  font-size: calc(12px * var(--ui-scale, 1)) !important;
  flex: 0 0 calc(24px * var(--ui-scale, 1)) !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: calc(12px * var(--ui-scale, 1)) !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: calc(12px * var(--ui-scale, 1)) !important;
  color: var(--muted) !important;
  margin-top: calc(1px * var(--ui-scale, 1)) !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: calc(12px * var(--ui-scale, 1)) !important;
  color: #667085 !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: calc(1px * var(--ui-scale, 1)) !important;
  font-size: calc(12px * var(--ui-scale, 1)) !important;
}.call-status.missed{color:var(--red)}.lookup-input-wrap{margin:0 calc(20px * var(--ui-scale, 1));display:flex;align-items:center;gap:calc(8px * var(--ui-scale, 1));border:calc(1px * var(--ui-scale, 1)) solid #d9dee7;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(4px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1))}.lookup-input-wrap>span{font-size:calc(18px * var(--ui-scale, 1));color:#667085}.lookup-input-wrap input{font-size:calc(12px * var(--ui-scale, 1))}.lookup-input-wrap .button{padding:calc(8px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1))}.search-results{margin:calc(17px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1))}.empty-state{min-height:calc(168px * var(--ui-scale, 1));border:calc(1px * var(--ui-scale, 1)) dashed #d9dee7;border-radius:calc(12px * var(--ui-scale, 1));display:grid;place-content:center;text-align:center;color:#667085;font-size:calc(12px * var(--ui-scale, 1));padding:calc(20px * var(--ui-scale, 1))}.empty-state p{margin:calc(6px * var(--ui-scale, 1)) 0 0}.empty-icon{font-size:calc(25px * var(--ui-scale, 1));color:#b8bdb6}.search-card{border:calc(1px * var(--ui-scale, 1)) solid #e7eaf0;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(12px * var(--ui-scale, 1));display:flex;gap:calc(10px * var(--ui-scale, 1));align-items:center;margin-bottom:calc(8px * var(--ui-scale, 1))}.search-card:last-child{margin:0}.customer-initial{width:calc(32px * var(--ui-scale, 1));height:calc(32px * var(--ui-scale, 1));display:grid;place-items:center;border-radius:calc(12px * var(--ui-scale, 1));background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:calc(12px * var(--ui-scale, 1))}.search-card-main{flex:1;min-width:0}.search-card-main strong{font-size:calc(12px * var(--ui-scale, 1))}.search-card-main p{font-size:calc(12px * var(--ui-scale, 1));color:var(--muted);margin:calc(3px * var(--ui-scale, 1)) 0 0}.location-pill{font-size:calc(12px * var(--ui-scale, 1));color:#6d4382;background:#f3eef7;border-radius:calc(10px * var(--ui-scale, 1));padding:calc(4px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));font-weight:700;display:inline-block;margin-top:calc(5px * var(--ui-scale, 1))}.hidden{display:none}.search-card-actions{display:flex;gap:calc(4px * var(--ui-scale, 1))}.small-action{border:calc(1px * var(--ui-scale, 1)) solid #d0d5dd;background:#fff;border-radius:calc(10px * var(--ui-scale, 1));padding:calc(5px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));cursor:pointer;color:#475467;font-size:calc(12px * var(--ui-scale, 1))}.small-action:hover{background:#f8fafc;color:var(--blue)}.utility-rail{background:#fff;border-left:calc(1px * var(--ui-scale, 1)) solid var(--line);padding:calc(22px * var(--ui-scale, 1)) calc(19px * var(--ui-scale, 1));min-height:100vh}.service-card{background:linear-gradient(135deg,#e9f4f1,#f7f6f0);border:calc(1px * var(--ui-scale, 1)) solid #dbe8e3;border-radius:calc(14px * var(--ui-scale, 1));padding:calc(15px * var(--ui-scale, 1))}.service-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(14px * var(--ui-scale, 1))}.service-icon{display:grid;place-items:center;width:calc(29px * var(--ui-scale, 1));height:calc(29px * var(--ui-scale, 1));background:#fff;color:var(--blue);border-radius:calc(12px * var(--ui-scale, 1));font-weight:700}.service-card h2{color:#667085;font-size:calc(12px * var(--ui-scale, 1));margin:0 0 calc(4px * var(--ui-scale, 1))}.service-card strong{font:700 calc(16px * var(--ui-scale, 1)) var(--display);letter-spacing:calc(-.4px * var(--ui-scale, 1))}.service-card p{font-size:calc(12px * var(--ui-scale, 1));color:#667085;margin:calc(5px * var(--ui-scale, 1)) 0 0}.rail-section{padding:calc(23px * var(--ui-scale, 1)) calc(1px * var(--ui-scale, 1));border-bottom:calc(1px * var(--ui-scale, 1)) solid var(--line)}.rail-heading{margin-bottom:calc(14px * var(--ui-scale, 1))}.rail-heading.inline{display:flex;justify-content:space-between;align-items:center}.field-label{font-size:calc(12px * var(--ui-scale, 1));font-weight:700;color:#667085;display:block;margin-bottom:calc(6px * var(--ui-scale, 1))}.utility-rail select{width:100%;border:calc(1px * var(--ui-scale, 1)) solid #d9dee7;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(9px * var(--ui-scale, 1));background:#fff;color:#344054;font:calc(12px * var(--ui-scale, 1)) var(--font);outline-color:var(--blue)}.simulation-actions{display:grid;gap:calc(5px * var(--ui-scale, 1));margin-top:calc(11px * var(--ui-scale, 1))}.quick-action{border:0;border-radius:calc(12px * var(--ui-scale, 1));background:#f8fafc;padding:calc(8px * var(--ui-scale, 1));display:flex;align-items:center;gap:calc(8px * var(--ui-scale, 1));text-align:left;cursor:pointer}.quick-action:hover{background:#f2f4f7}.quick-icon{width:calc(29px * var(--ui-scale, 1));height:calc(29px * var(--ui-scale, 1));border-radius:calc(12px * var(--ui-scale, 1));font-size:calc(13px * var(--ui-scale, 1))}.quick-action strong,.quick-action small{display:block}.quick-action strong{font-size:calc(12px * var(--ui-scale, 1))}.quick-action small{color:#667085;font-size:calc(12px * var(--ui-scale, 1));margin-top:calc(1px * var(--ui-scale, 1))}.text-button{color:var(--blue);border:0;background:transparent;padding:0;font:700 calc(12px * var(--ui-scale, 1)) var(--font);cursor:pointer}.locations-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(5px * var(--ui-scale, 1))}.location-cell{height:calc(28px * var(--ui-scale, 1));display:grid;place-items:center;border:calc(1px * var(--ui-scale, 1)) solid #e7eaf0;border-radius:calc(10px * var(--ui-scale, 1));color:#667085;font-size:calc(12px * var(--ui-scale, 1));font-weight:700}.inbox-layout{display:grid;grid-template-columns:calc(265px * var(--ui-scale, 1)) 1fr;min-height:calc(570px * var(--ui-scale, 1));overflow:hidden}.thread-panel{border-right:calc(1px * var(--ui-scale, 1)) solid var(--line);background:#f8fafc}.thread-panel-head{padding:calc(18px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));display:flex;align-items:center;justify-content:space-between;border-bottom:calc(1px * var(--ui-scale, 1)) solid var(--line)}.count-pill{color:var(--blue);font-size:calc(12px * var(--ui-scale, 1));font-weight:700;background:var(--blue-soft);border-radius:calc(12px * var(--ui-scale, 1));padding:calc(3px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1))}.thread-list{max-height:calc(520px * var(--ui-scale, 1));overflow:auto}.thread-item{padding:calc(13px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));border-bottom:calc(1px * var(--ui-scale, 1)) solid #e7eaf0;cursor:pointer;border-left:calc(2px * var(--ui-scale, 1)) solid transparent}.thread-item:hover{background:#f8f5ee}.thread-item.active{background:#e9f4f1;border-left-color:var(--blue)}.thread-item-top{display:flex;justify-content:space-between;gap:calc(8px * var(--ui-scale, 1))}.thread-item strong{font-size:calc(12px * var(--ui-scale, 1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread-item time{font-size:calc(12px * var(--ui-scale, 1));color:#667085;white-space:nowrap}.thread-item p{font-size:calc(12px * var(--ui-scale, 1));color:#667085;margin:calc(4px * var(--ui-scale, 1)) 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread-meta{font-size:calc(12px * var(--ui-scale, 1));color:#667085}.conversation-panel{min-width:0;display:flex;flex-direction:column}.conversation-head{padding:calc(18px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));border-bottom:calc(1px * var(--ui-scale, 1)) solid var(--line);display:flex;justify-content:space-between}.conversation-kicker{font-size:calc(12px * var(--ui-scale, 1));color:#667085;font-weight:700;letter-spacing:.08em;margin:0 0 calc(3px * var(--ui-scale, 1))}.conversation-head h2{font:700 calc(15px * var(--ui-scale, 1)) var(--display);margin:0}.subtle{background:#f8fafc;font-size:calc(12px * var(--ui-scale, 1))}.message-history{flex:1;min-height:calc(395px * var(--ui-scale, 1));max-height:calc(430px * var(--ui-scale, 1));overflow:auto;padding:calc(22px * var(--ui-scale, 1));background:linear-gradient(#fff,#fbfaf5);display:flex;flex-direction:column;gap:calc(11px * var(--ui-scale, 1))}.message-row{display:flex;max-width:77%;gap:calc(8px * var(--ui-scale, 1))}.message-row.agent{align-self:flex-end;flex-direction:row-reverse}.message-bubble{padding:calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));border-radius:calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1));background:#f2f1ea;color:#344054;font-size:calc(12px * var(--ui-scale, 1));line-height:1.45}.message-row.agent .message-bubble{background:var(--blue);color:#fff;border-radius:calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1))}.message-meta{font-size:calc(12px * var(--ui-scale, 1));color:#667085;margin-top:calc(4px * var(--ui-scale, 1))}.message-row.agent .message-meta{text-align:right}.composer,.email-composer{margin:calc(13px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));border:calc(1px * var(--ui-scale, 1)) solid #ddd4c4;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(4px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));display:flex;align-items:center;gap:calc(8px * var(--ui-scale, 1))}.composer input{font-size:calc(12px * var(--ui-scale, 1))}.composer .button{padding:calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1))}.email-composer{display:block;padding:0;margin-bottom:calc(16px * var(--ui-scale, 1))}.email-composer>input{display:block;padding:calc(10px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));border-bottom:calc(1px * var(--ui-scale, 1)) solid #e7eaf0;font-size:calc(12px * var(--ui-scale, 1))}.email-composer .composer{margin:0;border:0;border-radius:0}.directory-card{overflow:hidden}.directory-toolbar{padding:calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));display:flex;justify-content:space-between;align-items:center;border-bottom:calc(1px * var(--ui-scale, 1)) solid var(--line)}.compact-input{margin:0;width:calc(290px * var(--ui-scale, 1));height:calc(34px * var(--ui-scale, 1))}.compact-input .button{display:none}.muted-label{font-size:calc(12px * var(--ui-scale, 1));color:#667085}.customer-directory{max-height:calc(540px * var(--ui-scale, 1));overflow:auto}.customer-row{display:grid;grid-template-columns:2fr 1.3fr 1.4fr 1fr;gap:calc(15px * var(--ui-scale, 1));align-items:center;padding:calc(13px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));border-bottom:calc(1px * var(--ui-scale, 1)) solid #f1eee6}.customer-name{display:flex;align-items:center;gap:calc(9px * var(--ui-scale, 1))}.customer-name strong{font-size:calc(12px * var(--ui-scale, 1))}.customer-name small,.customer-contact{font-size:calc(12px * var(--ui-scale, 1));color:#667085;display:block;margin-top:calc(2px * var(--ui-scale, 1))}.customer-code{font-size:calc(12px * var(--ui-scale, 1));color:var(--blue);background:var(--blue-soft);font-weight:700;padding:calc(3px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));border-radius:calc(10px * var(--ui-scale, 1))}.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(15, 23, 42,.45);z-index:20;place-items:center;padding:calc(20px * var(--ui-scale, 1))}.modal-backdrop.active{display:grid}.modal-card{position:relative;width:min(calc(455px * var(--ui-scale, 1)),100%);background:#fff;border-radius:calc(14px * var(--ui-scale, 1));padding:calc(27px * var(--ui-scale, 1));box-shadow:0 calc(20px * var(--ui-scale, 1)) calc(45px * var(--ui-scale, 1)) rgba(15, 23, 42,.2)}.modal-card h2{font:800 calc(20px * var(--ui-scale, 1)) var(--display);margin:0 0 calc(5px * var(--ui-scale, 1));letter-spacing:calc(-.5px * var(--ui-scale, 1))}.modal-description{color:var(--muted);font-size:calc(12px * var(--ui-scale, 1));line-height:1.5;margin:0 0 calc(19px * var(--ui-scale, 1))}.modal-close{position:absolute;right:calc(15px * var(--ui-scale, 1));top:calc(13px * var(--ui-scale, 1));border:0;background:transparent;color:#667085;font-size:calc(24px * var(--ui-scale, 1));cursor:pointer}.customer-form{display:grid;gap:calc(12px * var(--ui-scale, 1))}.customer-form label{color:#475467;font-size:calc(12px * var(--ui-scale, 1));font-weight:700;display:grid;gap:calc(5px * var(--ui-scale, 1))}.customer-form input,.customer-form select{border:calc(1px * var(--ui-scale, 1)) solid #d9dee7;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(9px * var(--ui-scale, 1));font-size:calc(12px * var(--ui-scale, 1))}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(10px * var(--ui-scale, 1))}.incoming-call{text-align:center;width:min(calc(380px * var(--ui-scale, 1)),100%)}.call-pulse{width:calc(50px * var(--ui-scale, 1));height:calc(50px * var(--ui-scale, 1));margin:0 auto calc(12px * var(--ui-scale, 1));border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:calc(22px * var(--ui-scale, 1));display:grid;place-items:center;box-shadow:0 0 0 calc(8px * var(--ui-scale, 1)) rgba(13, 107, 92,.08)}.call-number{font:600 calc(16px * var(--ui-scale, 1)) var(--display);margin:0;color:#667085}.call-details{display:grid;grid-template-columns:1fr 1fr;gap:calc(8px * var(--ui-scale, 1));text-align:left;margin:calc(20px * var(--ui-scale, 1)) 0}.call-details div{padding:calc(9px * var(--ui-scale, 1));background:#f8fafc;border-radius:calc(12px * var(--ui-scale, 1))}.call-details div:last-child{grid-column:1/-1}.call-details span,.call-details strong{display:block}.call-details span{font-size:calc(12px * var(--ui-scale, 1));color:#667085;margin-bottom:calc(3px * var(--ui-scale, 1))}.call-details strong{font-size:calc(12px * var(--ui-scale, 1))}.toast-container{position:fixed;right:calc(20px * var(--ui-scale, 1));bottom:calc(20px * var(--ui-scale, 1));z-index:30;display:grid;gap:calc(8px * var(--ui-scale, 1))}.toast{background:#182230;color:#fff;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(11px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));font-size:calc(12px * var(--ui-scale, 1));box-shadow:0 calc(8px * var(--ui-scale, 1)) calc(25px * var(--ui-scale, 1)) rgba(15, 23, 42,.2);animation:slideIn .25s ease}.toast.success{border-left:calc(3px * var(--ui-scale, 1)) solid #2fa678}@keyframes slideIn{from{opacity:0;transform:translateY(calc(8px * var(--ui-scale, 1)))}to{opacity:1;transform:none}}@media(max-width:1320px){.app-shell{grid-template-columns:calc(230px * var(--ui-scale, 1)) 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 calc(16px * var(--ui-scale, 1))}.mobile-menu{display:block;border:0;background:transparent;font-size:calc(20px * var(--ui-scale, 1))}.global-search{width:min(60vw,calc(380px * var(--ui-scale, 1)))}.content-scroll{padding:calc(22px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1))}.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:calc(60px * var(--ui-scale, 1))}.user-menu>span:not(.user-avatar){display:none}.global-search kbd{display:none}.metric-grid{grid-template-columns:1fr 1fr}.metric-card{padding:calc(12px * var(--ui-scale, 1))}.metric-card small{display:none}.inbox-layout{grid-template-columns:1fr}.thread-panel{border-right:0;border-bottom:calc(1px * var(--ui-scale, 1)) solid var(--line)}.thread-list{max-height:calc(180px * var(--ui-scale, 1))}.message-history{min-height:calc(290px * var(--ui-scale, 1))}.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:calc(16px * var(--ui-scale, 1));line-height:1;width:calc(27px * var(--ui-scale, 1));height:calc(27px * var(--ui-scale, 1));padding:0}
.delete-action:hover{background:#fbeded;color:#9c2f2f}
@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:calc(7px * var(--ui-scale, 1));margin-bottom:calc(12px * var(--ui-scale, 1))}
.directory-type-tab{border:calc(1px * var(--ui-scale, 1)) solid #d9dee7;background:#fff;color:#667085;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(8px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1));font:700 calc(12px * var(--ui-scale, 1)) var(--font);cursor:pointer}
.directory-type-tab span{display:inline-grid;place-items:center;min-width:calc(20px * var(--ui-scale, 1));margin-left:calc(4px * var(--ui-scale, 1));padding:calc(2px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));border-radius:calc(12px * var(--ui-scale, 1));background:#f1f3f6;color:#667085;font-size:calc(12px * var(--ui-scale, 1))}
.directory-type-tab.active{border-color:#b9dbd0;background:var(--blue-soft);color:var(--blue)}
.directory-type-tab.active span{background:#fff;color:var(--blue)}
.import-format-hint{padding:calc(10px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));border-bottom:calc(1px * var(--ui-scale, 1)) solid #f1eee6;background:#f8fafc;color:#667085;font-size:calc(12px * var(--ui-scale, 1))}
.import-format-hint strong{color:#667085;font-weight:600}
.import-result{padding:calc(10px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));border-bottom:calc(1px * var(--ui-scale, 1)) solid #cfe9dc;background:#eef7f1;color:#146349;font-size:calc(12px * var(--ui-scale, 1));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:calc(11px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));border-bottom:calc(1px * var(--ui-scale, 1)) solid var(--line);display:grid;gap:calc(8px * var(--ui-scale, 1))}
.email-search{margin:0;width:100%;height:calc(34px * var(--ui-scale, 1))}
.email-filter,.email-recipient select{width:100%;border:calc(1px * var(--ui-scale, 1)) solid #d9dee7;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(8px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));background:#fff;color:#344054;font:calc(12px * var(--ui-scale, 1)) var(--font);outline-color:var(--blue)}
.email-recipient{padding:calc(13px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));border-bottom:calc(1px * var(--ui-scale, 1)) solid var(--line);display:flex;align-items:center;gap:calc(10px * var(--ui-scale, 1))}
.email-recipient label{font-size:calc(12px * var(--ui-scale, 1));font-weight:700;color:#667085}
.email-recipient select{flex:1;min-width:0}
.email-inbox-layout .thread-list{max-height:calc(470px * var(--ui-scale, 1))}
@media(max-width:600px){.email-recipient{align-items:stretch;flex-direction:column;gap:calc(6px * var(--ui-scale, 1))}.email-inbox-layout .thread-list{max-height:calc(180px * var(--ui-scale, 1))}}
/* Active call transfer actions */
.agent-call-actions{margin-left:auto;display:flex;align-items:center}
.transfer-agent-button{width:calc(30px * var(--ui-scale, 1));height:calc(30px * var(--ui-scale, 1));display:inline-grid;place-items:center;border:calc(1px * var(--ui-scale, 1)) solid #8fc9b9;background:#e9f4f1;color:#0a5a4d;border-radius:calc(10px * var(--ui-scale, 1));padding:0;cursor:pointer}
.transfer-agent-button:hover{background:#d9f0ea;color:#0b4f44}
.transfer-agent-button svg{width:calc(16px * var(--ui-scale, 1));height:calc(16px * var(--ui-scale, 1));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.agents-list{justify-items:stretch;text-align:center}
.sidebar .sidebar-section-label{margin-left:0;margin-right:0;text-align:center}
.agent-department-group{width:100%;text-align:center}
.agent-department-group + .agent-department-group{margin-top:calc(16px * var(--ui-scale, 1));padding-top:calc(14px * var(--ui-scale, 1));border-top:calc(1px * var(--ui-scale, 1)) solid rgba(123, 135, 127,.2)}
.agent-department-heading{margin:0 0 calc(8px * var(--ui-scale, 1));padding:0 calc(2px * var(--ui-scale, 1));color:#93aca5;font-size:calc(12px * var(--ui-scale, 1));font-weight:800;letter-spacing:.1em;text-align:center}
.agent-department-empty{padding:calc(8px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1));color:#93aca5;font-size:calc(12px * var(--ui-scale, 1));font-style:italic;text-align:center}
.agent-call-actions + .agent-status-controls{margin-left:0}
.recent-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(9px * var(--ui-scale, 1));text-align:left;margin:calc(16px * var(--ui-scale, 1)) 0}
.recent-contact-section{min-width:0;padding:calc(10px * var(--ui-scale, 1));background:#f8fafc;border-radius:calc(12px * var(--ui-scale, 1))}
.recent-contact-section h3{font:700 calc(12px * var(--ui-scale, 1)) var(--display);margin:0 0 calc(7px * var(--ui-scale, 1));color:#475467}
.recent-contact-list{display:grid;gap:calc(6px * var(--ui-scale, 1));max-height:calc(126px * var(--ui-scale, 1));overflow:auto}
.recent-message{padding:calc(7px * var(--ui-scale, 1));background:#fff;border:calc(1px * var(--ui-scale, 1)) solid #e7eaf0;border-radius:calc(10px * var(--ui-scale, 1));overflow:hidden}
.recent-message strong,.recent-message p,.recent-message time{display:block}
.recent-message strong{font-size:calc(12px * var(--ui-scale, 1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-message p{font-size:calc(12px * var(--ui-scale, 1));line-height:1.35;color:#667085;margin:calc(2px * var(--ui-scale, 1)) 0}
.recent-message time{font-size:calc(12px * var(--ui-scale, 1));color:#667085}
.recent-empty{font-size:calc(12px * var(--ui-scale, 1));color:#667085}
.call-modal-actions{display:grid;gap:calc(7px * var(--ui-scale, 1))}
@media(max-width:600px){.recent-contact-grid{grid-template-columns:1fr}}

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

.search-card{cursor:pointer}
.search-card:focus{outline:calc(2px * var(--ui-scale, 1)) solid var(--blue);outline-offset:calc(2px * var(--ui-scale, 1))}
.customer-detail-view{display:block;min-height:calc(168px * var(--ui-scale, 1))}
.customer-detail-back{margin-bottom:calc(14px * var(--ui-scale, 1))}
.customer-detail-heading{display:flex;justify-content:space-between;gap:calc(12px * var(--ui-scale, 1));align-items:flex-start;margin-bottom:calc(16px * var(--ui-scale, 1))}
.customer-detail-heading>div:first-child{display:flex;align-items:center;gap:calc(10px * var(--ui-scale, 1));min-width:0}
.customer-detail-heading h3{font:800 calc(15px * var(--ui-scale, 1)) var(--display);letter-spacing:calc(-.3px * var(--ui-scale, 1));margin:0 0 calc(3px * var(--ui-scale, 1))}
.customer-detail-heading p,.customer-detail-heading small{display:block;color:var(--muted);font-size:calc(12px * var(--ui-scale, 1));margin:0}
.customer-detail-heading small{margin-top:calc(3px * var(--ui-scale, 1));color:#667085}
.customer-detail-actions{display:flex;gap:calc(5px * var(--ui-scale, 1));flex-shrink:0}
.customer-detail-actions .button{padding:calc(7px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));font-size:calc(12px * var(--ui-scale, 1))}
.customer-detail-actions .button:disabled{opacity:.45;cursor:not-allowed}
.customer-favorite-button{width:calc(36px * var(--ui-scale, 1));height:calc(36px * var(--ui-scale, 1));display:inline-grid;place-items:center;flex:0 0 auto;border:calc(1px * var(--ui-scale, 1)) solid #d0d5dd;border-radius:calc(12px * var(--ui-scale, 1));background:#fff;color:#667085;cursor:pointer;transition:color .18s,background .18s,border-color .18s,transform .18s}.customer-favorite-button:hover{color:#b5670f;border-color:#d9a94d;background:#fdf8ee}.customer-favorite-button.is-favorite{color:#b5670f;border-color:#d99a3d;background:#fdf8ee}.customer-favorite-button:active{transform:scale(.94)}.customer-favorite-button svg{width:calc(19px * var(--ui-scale, 1));height:calc(19px * var(--ui-scale, 1));fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.customer-history-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(10px * var(--ui-scale, 1))}
.customer-history-column{min-width:0;border:calc(1px * var(--ui-scale, 1)) solid #e7eaf0;border-radius:calc(12px * var(--ui-scale, 1));padding:calc(10px * var(--ui-scale, 1));background:#f8fafc}
.history-column-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(8px * var(--ui-scale, 1))}
.history-column-heading h3{font:700 calc(12px * var(--ui-scale, 1)) var(--display);margin:0}
.history-column-heading span{font-size:calc(12px * var(--ui-scale, 1));color:var(--blue);background:var(--blue-soft);padding:calc(3px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));border-radius:calc(12px * var(--ui-scale, 1))}
.history-message-list{display:grid;gap:calc(6px * var(--ui-scale, 1));max-height:calc(260px * var(--ui-scale, 1));overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.history-message{background:#fff;border:calc(1px * var(--ui-scale, 1)) solid #e7eaf0;border-radius:calc(10px * var(--ui-scale, 1));padding:calc(8px * var(--ui-scale, 1))}
.history-message.agent-message{background:#eef6f2;border-color:#d3e9e0}
.history-message-author,.history-message strong,.history-message p,.history-message time{display:block}
.history-message-author{font-size:calc(12px * var(--ui-scale, 1));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#667085;margin-bottom:calc(3px * var(--ui-scale, 1))}
.history-message.agent-message .history-message-author{color:var(--blue)}
.history-message strong{font-size:calc(12px * var(--ui-scale, 1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-message p{font-size:calc(12px * var(--ui-scale, 1));line-height:1.35;color:#667085;margin:calc(3px * var(--ui-scale, 1)) 0}
.history-message time{font-size:calc(12px * var(--ui-scale, 1));color:#667085}
.history-empty{padding:calc(16px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1));color:#667085;font-size:calc(12px * var(--ui-scale, 1));text-align:center}
@media(max-width:600px){.customer-detail-heading{display:block}.customer-detail-actions{margin-top:calc(12px * var(--ui-scale, 1))}.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: calc(14.5px * var(--ui-scale, 1)); line-height: 1.5; }
.page-heading h1 { font-size: calc(26px * var(--ui-scale, 1)); letter-spacing: calc(-.9px * var(--ui-scale, 1)); }
.page-heading > div > p:not(.eyebrow) { font-size: calc(13.5px * var(--ui-scale, 1)); }
.eyebrow { font-size: calc(12px * var(--ui-scale, 1)); letter-spacing: .13em; }
.button { padding: calc(9px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); font-size: calc(12.5px * var(--ui-scale, 1)); border-radius: calc(12px * var(--ui-scale, 1)); transition: all .22s ease; }
.button-primary { box-shadow: 0 calc(2px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1)) rgba(13, 107, 92,.18); }
.button-primary:hover { box-shadow: 0 calc(3px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) rgba(13, 107, 92,.24); transform: translateY(calc(-1px * var(--ui-scale, 1))); }
.button-secondary:hover { border-color: #bfc6bd; }

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

/* --- DYNAMIC AGENT ACTION CONTROLS ROW --- */
.agent-controls-row {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  margin: calc(-15px * var(--ui-scale, 1)) 0 calc(22px * var(--ui-scale, 1)) 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: calc(10px * var(--ui-scale, 1));
  padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--ui-scale, 1));
  background: #17352e !important;
  border: calc(1px * var(--ui-scale, 1)) solid #1f4239 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.queue-card-wrapper:hover {
  background: #1a2d26 !important;
  border-color: #2b473c !important;
}

.queue-card-wrapper .queue-accordion-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100%;
  min-height: calc(26px * var(--ui-scale, 1));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
  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: calc(12px * var(--ui-scale, 1));
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: calc(9px * var(--ui-scale, 1));
  border-top: calc(1px * var(--ui-scale, 1)) solid rgba(255, 255, 255, 0.12);
  margin-top: calc(2px * var(--ui-scale, 1));
}

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

.queue-card-actions-row .btn-agent-action {
  width: calc(44px * var(--ui-scale, 1)) !important;
  height: calc(36px * var(--ui-scale, 1)) !important;
  border-radius: calc(12px * var(--ui-scale, 1)) !important;
  font-size: calc(16px * var(--ui-scale, 1)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.queue-accordion-btn .queue-btn-icon {
  width: calc(32px * var(--ui-scale, 1));
  height: calc(32px * var(--ui-scale, 1));
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #d9ede7;
  color: #0d6b5c;
  display: grid;
  place-items: center;
  font-size: calc(15px * var(--ui-scale, 1));
  font-weight: 700;
  flex: 0 0 calc(32px * var(--ui-scale, 1));
  margin: 0;
}

.queue-accordion-btn .queue-btn-text {
  text-align: center;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.queue-accordion-btn .queue-btn-text strong {
  color: #ffffff;
  font: 600 calc(14px * var(--ui-scale, 1)) var(--font);
  display: block;
  text-align: center;
  width: 100%;
}

/* Hidden to avoid duplicating "Ingen linje valgt" on the Område card */
.zisson-line-summary {
  display: none !important;
}

.zisson-line-summary[data-state="on"] { color: #7ee0bf; }
.zisson-line-summary[data-state="off"] { color: #9db0a8; font-style: italic; }

/* Crisp Pastel Sub-Text for Line Name & Timer (Matching Left Menu Typography) */
.status-lines-sub {
  color: #9db0a8 !important;
  font-weight: 600 !important;
  font-size: calc(12px * var(--ui-scale, 1)) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: calc(2px * var(--ui-scale, 1));
  text-shadow: none !important;
  display: block;
  text-align: center !important;
  width: 100%;
}

.status-timer-sub {
  font-size: calc(12px * var(--ui-scale, 1)) !important;
  color: #7b8a80 !important;
  font-weight: 600 !important;
  margin-top: calc(1px * var(--ui-scale, 1));
  text-shadow: none !important;
  display: block;
  text-align: center;
}

.queue-accordion-btn .queue-chevron {
  color: rgba(255, 255, 255, 0.9);
  flex: 0 0 calc(32px * var(--ui-scale, 1));
  width: calc(32px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

/* Action Control Buttons (Vibrant Action Buttons) */
.btn-agent-action {
  width: calc(42px * var(--ui-scale, 1));
  height: calc(42px * var(--ui-scale, 1));
  border-radius: calc(12px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--ui-scale, 1));
  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(calc(-1px * var(--ui-scale, 1)));
}

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

.btn-agent-action.disabled-gray {
  background: #2f3d37 !important;
  border-color: #44524c !important;
  color: #8a9690 !important;
  box-shadow: none !important;
  opacity: 0.65;
}

.btn-pause {
  background: #b5670f;
  border-color: #d99a3d;
  color: #ffffff;
  box-shadow: 0 calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) rgba(181, 103, 15, 0.2);
}

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

.btn-pause.active-resume {
  background: #0f805f;
  border-color: #3fbf83;
  color: #ffffff;
  box-shadow: 0 calc(2px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) rgba(15, 128, 95, 0.3);
  animation: pulseResume 2s infinite;
}

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

@keyframes pulseResume {
  0% { box-shadow: 0 0 0 0 rgba(15, 128, 95, 0.5); }
  70% { box-shadow: 0 0 0 calc(8px * var(--ui-scale, 1)) rgba(15, 128, 95, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 128, 95, 0); }
}

.btn-logout {
  background: #c24747;
  border-color: #d98a8a;
  color: #ffffff;
  box-shadow: 0 calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) rgba(194, 71, 71, 0.2);
}

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

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

.pause-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(46px * var(--ui-scale, 1));
  right: 0;
  width: calc(140px * var(--ui-scale, 1));
  background: #14251f;
  border: calc(1px * var(--ui-scale, 1)) solid #24382f;
  border-radius: calc(12px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1));
  box-shadow: 0 calc(8px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1)) 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: calc(3px * var(--ui-scale, 1));
}

.pause-option-btn {
  background: transparent;
  border: 0;
  color: #e4e7ec;
  padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  font-family: inherit;
  font-size: calc(12.5px * var(--ui-scale, 1));
  font-weight: 600;
  text-align: left;
  border-radius: calc(10px * var(--ui-scale, 1));
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  transition: background-color 0.15s ease;
}

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

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

.queue-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
  background: #152720;
  border: calc(1px * var(--ui-scale, 1)) solid #24382f;
  border-radius: calc(12px * var(--ui-scale, 1));
  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: #1a342a;
  border-color: #2d4f42;
}

.queue-btn-icon {
  width: calc(28px * var(--ui-scale, 1));
  height: calc(28px * var(--ui-scale, 1));
  border-radius: calc(12px * var(--ui-scale, 1));
  background: rgba(18, 128, 109, 0.15);
  color: #8ad0c0;
  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: calc(12px * var(--ui-scale, 1));
  color: #e4e7ec;
  font-weight: 700;
}

.queue-btn-text small {
  font-size: calc(12px * var(--ui-scale, 1));
  color: #8ea79e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: calc(1px * var(--ui-scale, 1));
}

.queue-chevron {
  font-size: calc(12px * var(--ui-scale, 1));
  color: #8ea79e;
  transition: transform 0.25s ease;
}

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

.queue-panel-content {
  display: none;
  margin-top: calc(8px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1));
  background: #14251f;
  border: calc(1px * var(--ui-scale, 1)) solid #24382f;
  border-radius: calc(12px * var(--ui-scale, 1));
  box-shadow: 0 calc(8px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1)) 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(calc(-6px * var(--ui-scale, 1))); }
  to { opacity: 1; transform: translateY(0); }
}

.queue-toggle-list {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-scale, 1));
}

.queue-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  background: #182c25;
  border: calc(1px * var(--ui-scale, 1)) solid #25423a;
  border-radius: calc(12px * var(--ui-scale, 1));
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.queue-toggle-item:hover {
  background: #23382e;
  border-color: #2f5245;
}

.queue-info {
  display: flex;
  flex-direction: column;
  gap: calc(1px * var(--ui-scale, 1));
}

.queue-info strong {
  font-size: calc(12px * var(--ui-scale, 1));
  color: #e4e7ec;
  font-weight: 600;
}

.queue-info small {
  font-size: calc(12px * var(--ui-scale, 1));
  color: #8ea79e;
}

/* Modern iOS/SaaS Toggle Switch Slider */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: calc(34px * var(--ui-scale, 1));
  height: calc(18px * var(--ui-scale, 1));
  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: #32453c;
  transition: 0.25s ease;
  border-radius: calc(18px * var(--ui-scale, 1));
}

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

.toggle-switch input:checked + .toggle-slider {
  background-color: #0f8a76;
  box-shadow: 0 0 calc(8px * var(--ui-scale, 1)) rgba(15, 138, 118, 0.4);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(calc(16px * var(--ui-scale, 1)));
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Customer form modal */
.modal-description { font-size: calc(13px * var(--ui-scale, 1)); margin-bottom: calc(20px * var(--ui-scale, 1)); }
.customer-form { gap: calc(13px * var(--ui-scale, 1)); }
.customer-form label { font-size: calc(12.5px * var(--ui-scale, 1)); gap: calc(5px * var(--ui-scale, 1)); }
.customer-form input, .customer-form select { padding: calc(10px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)); font-size: calc(13px * var(--ui-scale, 1)); border-radius: calc(12px * var(--ui-scale, 1)); }
.form-grid { gap: calc(11px * var(--ui-scale, 1)); }

/* Transfer button */
.transfer-agent-button { padding: 0; border-radius: calc(10px * var(--ui-scale, 1)); }

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

/* --- 13. TOASTS --- */
.toast { padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)); font-size: calc(13px * var(--ui-scale, 1)); border-radius: calc(12px * var(--ui-scale, 1)); box-shadow: 0 calc(8px * var(--ui-scale, 1)) calc(30px * var(--ui-scale, 1)) rgba(15, 23, 42,.22); }
.toast.success { border-left: calc(4px * var(--ui-scale, 1)) solid #2fa678; }

/* --- 14. MICRO-ANIMATIONS --- */
.surface { transition: box-shadow .25s ease; }
.surface:hover { box-shadow: 0 calc(2px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) rgba(15, 23, 42,.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(calc(14px * var(--ui-scale, 1))) 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: calc(5px * var(--ui-scale, 1));
}
.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: #cbd5e1;
  border-radius: calc(10px * var(--ui-scale, 1));
}
.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: #9aa39c;
}

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

/* E-post 2.0: compact mailbox layout with progressive disclosure. */
.email-page-heading { margin-bottom: calc(10px * var(--ui-scale, 1)); }
.email-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--ui-scale, 1)); margin-bottom: calc(10px * var(--ui-scale, 1)); }
.email-folder-tabs { display: inline-flex; align-items: center; gap: calc(4px * var(--ui-scale, 1)); padding: calc(3px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid #e4e7ec; border-radius: calc(12px * var(--ui-scale, 1)); background: #fff; }
.email-folder-btn { border: 0; border-radius: calc(10px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); background: transparent; color: #667085; font: 700 calc(12px * var(--ui-scale, 1)) var(--font); cursor: pointer; }
.email-folder-btn span { margin-left: calc(4px * var(--ui-scale, 1)); padding: calc(2px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1)); border-radius: calc(999px * var(--ui-scale, 1)); background: #efebe0; color: #475467; font-size: calc(12px * var(--ui-scale, 1)); }
.email-folder-btn.active { color: #0a5a4d; background: #e9f4f1; }
.email-folder-btn.active span { color: #fff; background: #0d6b5c; }
.email-toolbar-row .ticket-filter-bar { margin: 0; }
.email-list-search { display: flex; align-items: center; gap: calc(7px * var(--ui-scale, 1)); margin: calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid #e4e7ec; border-radius: calc(12px * var(--ui-scale, 1)); background: #fff; color: #667085; }
.email-list-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: calc(12px * var(--ui-scale, 1)) var(--font); }

#email-tab .email-heading-actions-row { margin-top: calc(8px * var(--ui-scale, 1)); gap: calc(8px * var(--ui-scale, 1)); }
#email-tab .ticket-controls { gap: calc(7px * var(--ui-scale, 1)); }
#email-tab .ticket-controls .button,
#email-tab .ticket-select { min-height: calc(30px * var(--ui-scale, 1)); height: calc(30px * var(--ui-scale, 1)); }
.email-more-wrap { position: relative; align-self: flex-end; }
.email-more-button { min-width: calc(34px * var(--ui-scale, 1)); padding: 0 calc(8px * var(--ui-scale, 1)) !important; font-size: calc(14px * var(--ui-scale, 1)) !important; letter-spacing: calc(1px * var(--ui-scale, 1)); }
.email-more-menu { position: absolute; z-index: 18; right: 0; top: calc(100% + calc(6px * var(--ui-scale, 1))); display: grid; min-width: calc(205px * var(--ui-scale, 1)); padding: calc(6px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid #e4e7ec; border-radius: calc(12px * var(--ui-scale, 1)); background: #fff; box-shadow: 0 calc(14px * var(--ui-scale, 1)) calc(34px * var(--ui-scale, 1)) rgba(15, 23, 42,.16); }
.email-more-menu.hidden { display: none; }
.email-more-menu button { border: 0; border-radius: calc(10px * var(--ui-scale, 1)); padding: calc(9px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); background: transparent; color: #344054; font: 650 calc(12px * var(--ui-scale, 1)) var(--font); text-align: left; cursor: pointer; }
.email-more-menu button:hover { background: #f8fafc; }
.email-more-menu button.danger { color: #b03d3d; }
.email-menu-separator { height: calc(1px * var(--ui-scale, 1)); margin: calc(4px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1)); background: #e9e2d6; }

#email-tab .email-recipient-bar { padding: calc(8px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); gap: calc(6px * var(--ui-scale, 1)); }
#email-tab .recipient-row { gap: calc(7px * var(--ui-scale, 1)); }
#email-tab .recipient-row label { width: calc(52px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); }
#email-tab .recipient-row input { padding: calc(6px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); }
.email-copy-fields { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10px * var(--ui-scale, 1)); }
.email-forward-mode-button { width: calc(31px * var(--ui-scale, 1)); height: calc(31px * var(--ui-scale, 1)); flex: 0 0 calc(31px * var(--ui-scale, 1)); display: grid; place-items: center; border: calc(1px * var(--ui-scale, 1)) solid #d9dee7; border-radius: calc(12px * var(--ui-scale, 1)); background: #fff; color: #475467; cursor: pointer; }
.email-forward-mode-button:hover:not(:disabled) { color: #0a5a4d; border-color: #b4d9cc; background: #e9f4f1; }
.email-forward-mode-button:disabled { opacity: .4; cursor: default; }
.email-forward-mode-button svg { width: calc(17px * var(--ui-scale, 1)); height: calc(17px * var(--ui-scale, 1)); fill: currentColor; transform: scaleX(-1); }
.email-wide-toggle { width: calc(31px * var(--ui-scale, 1)); height: calc(31px * var(--ui-scale, 1)); flex: 0 0 calc(31px * var(--ui-scale, 1)); display: grid; place-items: center; border: calc(1px * var(--ui-scale, 1)) solid #d9dee7; border-radius: calc(12px * var(--ui-scale, 1)); background: #fff; color: #475467; cursor: pointer; }
.email-wide-toggle:hover { color: #0a5a4d; border-color: #b4d9cc; background: #e9f4f1; }
.email-wide-toggle.active { color: #fff; border-color: #0d6b5c; background: #0d6b5c; }
.email-wide-toggle svg { width: calc(16px * var(--ui-scale, 1)); height: calc(16px * var(--ui-scale, 1)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#email-tab .email-forward-selection-bar { padding: calc(7px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); }
#email-tab .email-forward-selection-bar > div { display: flex; gap: calc(7px * var(--ui-scale, 1)); margin-left: auto; }
#email-tab .email-forward-selection-bar .button { min-height: calc(28px * var(--ui-scale, 1)); }

#email-tab .message-history { padding: calc(13px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)); gap: calc(12px * var(--ui-scale, 1)); background: #f8f5ee; }
.email-message-card { width: 94%; align-self: flex-start; border: calc(1px * var(--ui-scale, 1)) solid #e7eaf0; border-radius: calc(12px * var(--ui-scale, 1)); background: #fff; box-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) rgba(15, 23, 42,.04); }
.email-message-card.agent { align-self: flex-end; border-color: #c9e0d8; }
.email-message-card .email-message-wrap { width: 100%; gap: 0; }
.email-message-card .email-message-content { flex: 1; width: 100%; }
.email-message-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); border-bottom: calc(1px * var(--ui-scale, 1)) solid #e7eaf0; background: #fbfaf5; border-radius: calc(10px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) 0 0; }
.email-message-card.agent .email-message-card-head { background: #eef6f2; }
.email-message-card-head strong,
.email-message-card-head span { display: block; }
.email-message-card-head strong { color: #202b26; font-size: calc(12px * var(--ui-scale, 1)); }
.email-message-card-head span { margin-top: calc(3px * var(--ui-scale, 1)); color: #64748b; font-size: calc(12px * var(--ui-scale, 1)); }
.email-message-card-head time { color: #667085; font-size: calc(12px * var(--ui-scale, 1)); white-space: nowrap; }
.email-body-html { padding: calc(13px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); color: #344054; font-size: calc(12px * var(--ui-scale, 1)); line-height: 1.55; overflow-wrap: anywhere; }
.email-body-html p:first-child { margin-top: 0; }
.email-body-html p:last-child { margin-bottom: 0; }
.email-body-html img { display: block; max-width: 100%; height: auto; margin: calc(8px * var(--ui-scale, 1)) 0; border-radius: calc(10px * var(--ui-scale, 1)); }
.email-body-html img:not([src]) { display: none; }
.email-body-html blockquote { margin: calc(12px * var(--ui-scale, 1)) 0; padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); border-left: calc(3px * var(--ui-scale, 1)) solid #d0d5dd; color: #64748b; background: #f8fafc; }
.email-load-images { margin: 0 calc(14px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); border: 0; background: transparent; color: #0d6b5c; font: 700 calc(12px * var(--ui-scale, 1)) var(--font); cursor: pointer; }
.email-message-select { display: none; flex: 0 0 calc(31px * var(--ui-scale, 1)); width: calc(31px * var(--ui-scale, 1)); height: calc(38px * var(--ui-scale, 1)); margin: 0; }
.email-forward-selecting .email-message-select { display: grid; }
.email-forward-selecting .email-message-card { cursor: pointer; }
.email-topic-separator { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin: calc(5px * var(--ui-scale, 1)) 0; color: #64748b; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.email-topic-separator::before { content: ''; position: absolute; left: 0; right: 0; height: calc(1px * var(--ui-scale, 1)); background: #e4e7ec; }
.email-topic-separator span { position: relative; max-width: 70%; overflow: hidden; padding: 0 calc(9px * var(--ui-scale, 1)); background: #f8f5ee; text-overflow: ellipsis; white-space: nowrap; }
.email-message-attachments { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(8px * var(--ui-scale, 1)); padding: 0 calc(14px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); }
.email-message-file-attachment { display: inline-flex; align-items: center; gap: calc(6px * var(--ui-scale, 1)); padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid #dbd6c6; border-radius: calc(12px * var(--ui-scale, 1)); background: #f8fafc; color: #2a594c; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; text-decoration: none; }
.email-message-file-attachment svg,
.email-message-image-attachment figcaption svg { width: calc(15px * var(--ui-scale, 1)); height: calc(15px * var(--ui-scale, 1)); flex: 0 0 calc(15px * var(--ui-scale, 1)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.email-message-image-attachment { width: min(calc(260px * var(--ui-scale, 1)), 100%); overflow: hidden; margin: 0; border: calc(1px * var(--ui-scale, 1)) solid #dbd6c6; border-radius: calc(12px * var(--ui-scale, 1)); background: #f8fafc; }
.email-message-image-preview { display: grid; place-items: center; min-height: calc(110px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)); border-bottom: calc(1px * var(--ui-scale, 1)) solid #dbd6c6; background: #eef4ef; }
.email-message-image-preview img { display: block; width: 100%; height: calc(140px * var(--ui-scale, 1)); object-fit: contain; border-radius: calc(10px * var(--ui-scale, 1)); background: #fff; }
.email-message-image-attachment figcaption { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)); color: #2a594c; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; }
.email-message-image-attachment figcaption > span { min-width: 0; display: flex; align-items: center; gap: calc(5px * var(--ui-scale, 1)); }
.email-message-image-attachment figcaption > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-message-image-attachment figcaption > a { flex: 0 0 auto; color: var(--blue); text-decoration: none; }
.email-forwarded-stack { display: grid; gap: calc(10px * var(--ui-scale, 1)); margin: 0 calc(14px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1)); }
.email-forwarded-card { overflow: hidden; border: calc(1px * var(--ui-scale, 1)) solid #e4e7ec; border-left: calc(3px * var(--ui-scale, 1)) solid #6aa892; border-radius: calc(12px * var(--ui-scale, 1)); background: #fff; }
.email-forwarded-card header { display: flex; justify-content: space-between; gap: calc(12px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); border-bottom: calc(1px * var(--ui-scale, 1)) solid #e9e2d6; background: #f8fafc; }
.email-forwarded-card header strong { font-size: calc(12px * var(--ui-scale, 1)); }
.email-forwarded-card header span { color: #64748b; font-size: calc(12px * var(--ui-scale, 1)); }
.email-forwarded-body { padding: calc(10px * var(--ui-scale, 1)); color: #475467; font-size: calc(12px * var(--ui-scale, 1)); line-height: 1.5; }
.email-forward-summary { margin: 0 calc(14px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); }

#email-tab .ticket-compose-area { background: #fff; }
#email-tab .email-composer { margin: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)); border-radius: calc(12px * var(--ui-scale, 1)); }
#email-tab .email-subject-row {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--ui-scale, 1));
  padding: calc(4px * var(--ui-scale, 1));
  border-bottom: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
}
#email-tab .email-subject-row > input {
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(4px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: calc(12.5px * var(--ui-scale, 1)) var(--font);
}
#email-tab .email-subject-row .email-composer-expand-button {
  flex: 0 0 auto;
  min-height: calc(31px * var(--ui-scale, 1));
  padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
}

#email-tab .ticket-controls.draft-controls {
  display: flex !important;
  justify-content: flex-end;
}

#email-tab .ticket-controls.draft-controls > :not(.email-more-wrap),
#email-tab .ticket-controls.draft-controls .email-more-menu > :not([data-email-action="delete"]) {
  display: none !important;
}
.email-format-toolbar { display: flex; align-items: center; gap: calc(3px * var(--ui-scale, 1)); padding: calc(5px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)); border-bottom: calc(1px * var(--ui-scale, 1)) solid #e7eaf0; background: #fafbfc; }
.email-format-toolbar.hidden { display: none; }
.email-format-toolbar button { min-width: calc(28px * var(--ui-scale, 1)); height: calc(27px * var(--ui-scale, 1)); padding: 0 calc(7px * var(--ui-scale, 1)); border: 0; border-radius: calc(10px * var(--ui-scale, 1)); background: transparent; color: #475467; font: 650 calc(12px * var(--ui-scale, 1)) var(--font); cursor: pointer; }
.email-format-toolbar button:hover { color: #0a5a4d; background: #e9f4f1; }
.email-rich-editor { min-height: calc(74px * var(--ui-scale, 1)); max-height: calc(170px * var(--ui-scale, 1)); overflow-y: auto; padding: calc(10px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)); outline: 0; color: #202b26; font-size: calc(12px * var(--ui-scale, 1)); line-height: 1.5; }
.email-rich-editor:empty::before { content: attr(data-placeholder); color: #667085; pointer-events: none; }
.email-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)); border-top: calc(1px * var(--ui-scale, 1)) solid #e7eaf0; }
.email-compose-tools,
.email-compose-submit { display: flex; align-items: center; gap: calc(7px * var(--ui-scale, 1)); }
.email-composer-actions .button { min-height: calc(31px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)); }

@media (min-width: 901px) {
  #email-tab.active { display: flex; flex-direction: column; height: calc(100vh - calc(134px * var(--ui-scale, 1))); min-height: calc(620px * var(--ui-scale, 1)); gap: 0; }
  #email-tab .email-inbox-layout { display: grid; flex: 1 1 auto; min-height: 0 !important; height: auto; overflow: hidden !important; }
  #email-tab .thread-panel,
  #email-tab .conversation-panel { min-height: 0; overflow: hidden; }
  #email-tab .thread-panel { display: flex; flex-direction: column; }
  #email-tab .email-inbox-layout .thread-list { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto !important; }
  #email-tab .email-inbox-layout .message-history { flex: 1 1 auto; min-height: calc(180px * var(--ui-scale, 1)) !important; max-height: none !important; overflow-y: auto !important; }
  #email-tab .conversation-head { padding: calc(10px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)); }
}

.email-more-menu #btn-delete-email {
  align-self: auto;
  width: 100%;
  height: auto;
  margin: 0;
  padding: calc(9px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
  white-space: normal;
}

@media (max-width: 900px) {
  .email-toolbar-row { align-items: stretch; flex-direction: column; }
  .email-folder-tabs { align-self: flex-start; }
  .email-toolbar-row .ticket-filter-bar { overflow-x: auto; padding-bottom: calc(2px * var(--ui-scale, 1)); }
  .email-copy-fields { grid-template-columns: 1fr; }
  #email-tab .email-recipient-bar { padding: calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)); }
  .email-more-menu { position: fixed; left: calc(16px * var(--ui-scale, 1)); right: calc(16px * var(--ui-scale, 1)); top: auto; bottom: calc(20px * var(--ui-scale, 1)); min-width: 0; }
  .email-message-card { width: 100%; }
  .email-composer-actions { align-items: stretch; flex-direction: column; }
  .email-compose-tools,
  .email-compose-submit { width: 100%; }
  .email-compose-submit { justify-content: flex-end; }
  .email-compose-tools .template-picker { flex: 1; }
  .email-compose-tools #btn-email-templates { width: 100%; }
}

@media (max-width: 600px) {
  .email-page-heading > div > p:not(.eyebrow) { display: none; }
  .email-page-heading { gap: calc(8px * var(--ui-scale, 1)); }
  #email-tab .recipient-row label { width: calc(46px * var(--ui-scale, 1)); }
  #email-tab .email-heading-actions-row { align-items: flex-start; }
  #email-tab .ticket-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  #email-tab .ticket-control-group { min-width: 0; }
  #email-tab .ticket-control-group .ticket-select { width: 100%; }
  .email-more-wrap { align-self: end; }
  .email-rich-editor { min-height: calc(92px * var(--ui-scale, 1)); max-height: calc(220px * var(--ui-scale, 1)); }
  .email-forward-selection-bar { align-items: flex-start !important; flex-direction: column; }
  #email-tab .email-forward-selection-bar > div { width: 100%; margin-left: 0; }
  #email-tab .email-forward-selection-bar .button { flex: 1; }
}

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

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

.activity-heading { gap: calc(16px * var(--ui-scale, 1)); flex-wrap: wrap; }
.activity-heading > div { min-width: 0; flex: 1 1 auto; }
.activity-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(7px * var(--ui-scale, 1));
  margin-top: calc(12px * var(--ui-scale, 1));
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
}
.activity-log-search {
  flex: 0 1 calc(360px * var(--ui-scale, 1));
  width: calc(360px * var(--ui-scale, 1));
  height: calc(34px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  margin-top: 0;
  padding: 0 calc(10px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d9dee7;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fafbfc;
  color: #667085;
}
.activity-log-search span { font-size: calc(17px * var(--ui-scale, 1)); line-height: 1; }
.activity-log-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 500 calc(12px * var(--ui-scale, 1)) var(--font);
}
.activity-log-search:focus-within { border-color: #8fc9b9; box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(13, 107, 92, .1); }
.activity-filter-btn {
  border: calc(1px * var(--ui-scale, 1)) solid #d9dee7;
  background: #fff;
  color: #475467;
  font: 600 calc(12px * var(--ui-scale, 1)) var(--font);
  padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border-radius: calc(12px * var(--ui-scale, 1));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  min-width: 0;
}
.activity-filter-btn .filter-count { flex: 0 0 auto; }
.activity-filter-btn:hover { background: #f8fafc; border-color: #d0d5dd; }
.activity-filter-btn.active { background: var(--blue-soft); color: var(--blue); border-color: #bfe0d6; font-weight: 700; }
.activity-filter-btn.active .filter-count { background: var(--blue); color: #fff; }
.missed-call-callback {
  flex: 0 0 auto;
  border: calc(1px * var(--ui-scale, 1)) solid #e5b8b8;
  background: #fcf0f0;
  color: #a83a3a;
  border-radius: calc(10px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.missed-call-callback:hover { background: #fbe9e9; border-color: #d89797; }

.ticket-meta-row {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  margin-top: calc(5px * var(--ui-scale, 1));
}
.thread-item-trailing {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(7px * var(--ui-scale, 1));
}
.email-thread-attachment {
  display: inline-flex;
  align-items: center;
  gap: calc(2px * var(--ui-scale, 1));
  color: #4a7a6c;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
}
.email-thread-attachment svg {
  width: calc(13px * var(--ui-scale, 1));
  height: calc(13px * var(--ui-scale, 1));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ticket-badge {
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  padding: calc(2px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  border-radius: calc(10px * var(--ui-scale, 1));
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge-open { background: #ecf5f1; color: #0a5a4d; }
.badge-progress { background: #f9efe2; color: #94580a; }
.badge-draft { background: #f2f4f7; color: #667085; }
.badge-waiting { background: #f3eef7; color: #6d4382; }
.badge-resolved { background: #e0f3e6; color: #15714e; }
.badge-closed { background: #f8fafc; color: #64748b; }

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

.ticket-compose-area {
  border-top: calc(1px * var(--ui-scale, 1)) solid var(--line);
}

.email-message-heading { display: flex; align-items: flex-start; gap: calc(7px * var(--ui-scale, 1)); }
.email-message-heading strong { flex: 1; min-width: 0; }
.email-message-wrap { display: flex; align-items: flex-start; gap: calc(6px * var(--ui-scale, 1)); }
.email-message-content { min-width: 0; }
.email-message-select { display: grid; place-items: center; width: calc(23px * var(--ui-scale, 1)); height: calc(25px * var(--ui-scale, 1)); margin-top: calc(4px * var(--ui-scale, 1)); color: #64748b; cursor: pointer; }
.email-message-select input { width: calc(15px * var(--ui-scale, 1)); height: calc(15px * var(--ui-scale, 1)); accent-color: var(--blue); cursor: pointer; }
.email-forward-button {
  position: relative;
  flex: 0 0 auto;
  width: calc(25px * var(--ui-scale, 1));
  height: calc(25px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  padding: 0;
  color: #64748b;
  background: rgba(255,255,255,.72);
  border: calc(1px * var(--ui-scale, 1)) solid rgba(123, 135, 127,.5);
  border-radius: 50%;
  cursor: pointer;
}
.message-row.agent .email-forward-button { color: #bfe8dd; background: rgba(10, 35, 31,.18); border-color: rgba(191, 232, 221,.4); }
.email-forward-button:hover { color: #0a5a4d; background: #fff; transform: translateX(calc(1px * var(--ui-scale, 1))); }
.email-forward-button svg { width: calc(16px * var(--ui-scale, 1)); height: calc(16px * var(--ui-scale, 1)); fill: currentColor; stroke: none; }
.email-forward-button::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: calc(100% + calc(6px * var(--ui-scale, 1)));
  padding: calc(4px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
  color: #fff;
  background: #182230;
  border-radius: calc(10px * var(--ui-scale, 1));
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(2px * var(--ui-scale, 1)));
  transition: opacity .15s, transform .15s;
}
.email-forward-button:hover::after, .email-forward-button:focus-visible::after { opacity: 1; transform: translateY(0); }
.email-forward-summary { margin-top: calc(6px * var(--ui-scale, 1)); color: #0a5a4d; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; }
.message-row.agent .email-forward-summary { color: #bfe8dd; }
.email-forward-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: calc(10px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)); border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line); background: #f8fafc; color: #0b4f44; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; }
.email-forward-selection-bar.hidden,
.email-attachments.hidden { display: none; }
.email-forward-selection-bar .button { padding: calc(6px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); }
.email-forward-selection-bar svg { width: calc(16px * var(--ui-scale, 1)); height: calc(16px * var(--ui-scale, 1)); fill: currentColor; }
.email-attachments { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)); border-bottom: calc(1px * var(--ui-scale, 1)) solid #e7eaf0; background: #f8fafc; }
.email-attachment-chip { display: inline-flex; align-items: center; gap: calc(5px * var(--ui-scale, 1)); max-width: 100%; padding: calc(4px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid #d9e9e2; border-radius: calc(999px * var(--ui-scale, 1)); background: #fff; color: #2a594c; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; }
.email-attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(170px * var(--ui-scale, 1)); }
.email-attachment-chip button { border: 0; background: transparent; color: #64748b; font: 700 calc(14px * var(--ui-scale, 1)) var(--font); line-height: 1; cursor: pointer; padding: 0 calc(1px * var(--ui-scale, 1)); }
.email-attachment-button { cursor: pointer; }
.email-message-attachment-summary { display: inline-flex; align-items: center; gap: calc(5px * var(--ui-scale, 1)); margin: calc(6px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); color: #467a69; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; }
.email-message-attachment-summary svg { width: calc(15px * var(--ui-scale, 1)); height: calc(15px * var(--ui-scale, 1)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.message-row.agent .email-message-attachment-summary { color: #bfe8dd; }
@media (max-width: 600px) { .email-forward-selection-bar { padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); } .email-message-wrap { gap: calc(3px * var(--ui-scale, 1)); } .email-message-select { width: calc(19px * var(--ui-scale, 1)); } .email-forward-button { width: calc(23px * var(--ui-scale, 1)); height: calc(23px * var(--ui-scale, 1)); } }

.admin-agents-list-container { display: grid; gap: calc(12px * var(--ui-scale, 1)); margin-bottom: calc(18px * var(--ui-scale, 1)); max-height: 58vh; overflow-y: auto; padding: calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) 0; }
.agent-admin-card { border: calc(1px * var(--ui-scale, 1)) solid #dbd5c6; border-radius: calc(14px * var(--ui-scale, 1)); background: #fff; overflow: hidden; box-shadow: 0 calc(4px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) rgba(22, 58, 47, .04); }
.agent-admin-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(12px * var(--ui-scale, 1)); min-height: calc(72px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); background: #fff; }
.agent-admin-card.is-expanded .agent-admin-card-header { background: #f8fafc; border-bottom: calc(1px * var(--ui-scale, 1)) solid #e4ddcf; }
.agent-admin-summary { min-width: 0; display: grid; grid-template-columns: auto minmax(calc(150px * var(--ui-scale, 1)), 1fr) minmax(calc(120px * var(--ui-scale, 1)), auto) auto; align-items: center; gap: calc(12px * var(--ui-scale, 1)); padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.agent-admin-avatar { width: calc(42px * var(--ui-scale, 1)); height: calc(42px * var(--ui-scale, 1)); border-radius: calc(14px * var(--ui-scale, 1)); display: grid; place-items: center; flex: 0 0 auto; color: #0a5a4d; background: #e9f4f1; font: 800 calc(15px * var(--ui-scale, 1)) var(--display); }
.agent-admin-identity { min-width: 0; display: block; }
.agent-admin-identity strong, .agent-admin-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-admin-identity strong { color: #202b26; font: 800 calc(14px * var(--ui-scale, 1)) var(--display); }
.agent-admin-identity small { max-width: calc(360px * var(--ui-scale, 1)); margin-top: calc(3px * var(--ui-scale, 1)); color: #64748b; font-size: calc(12px * var(--ui-scale, 1)); }
.agent-admin-department-summary { display: flex; justify-content: flex-end; gap: calc(5px * var(--ui-scale, 1)); flex-wrap: wrap; }
.agent-admin-department-summary span { padding: calc(5px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)); border-radius: calc(999px * var(--ui-scale, 1)); background: #efebe0; color: #4d5c55; font: 700 calc(12px * var(--ui-scale, 1)) var(--font); white-space: nowrap; }
.agent-admin-edit-label { display: inline-flex; align-items: center; gap: calc(5px * var(--ui-scale, 1)); color: #0d6b5c; font: 750 calc(12px * var(--ui-scale, 1)) var(--font); white-space: nowrap; }
.agent-admin-chevron { display: inline-block; font-size: calc(15px * var(--ui-scale, 1)); transform-origin: center; transition: transform .18s ease; }
.agent-admin-card.is-expanded .agent-admin-chevron { transform: rotate(180deg); }
.agent-admin-state { display: flex; align-items: center; justify-content: flex-end; gap: calc(8px * var(--ui-scale, 1)); }
.agent-account-status { border-radius: calc(999px * var(--ui-scale, 1)); padding: calc(5px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); font-weight: 800; white-space: nowrap; }
.agent-account-status.active { color: #0c6647; background: #e8f5ef; }
.agent-account-status.invitation_sent { color: #0a5a4d; background: #e9f4f1; }
.agent-account-status.not_invited { color: #667085; background: #e7eaf0; }
.agent-admin-delete { width: calc(32px * var(--ui-scale, 1)); height: calc(32px * var(--ui-scale, 1)); display: grid; place-items: center; border: calc(1px * var(--ui-scale, 1)) solid #e7eaf0; border-radius: calc(12px * var(--ui-scale, 1)); background: #fff; cursor: pointer; filter: grayscale(1); opacity: .72; }
.agent-admin-delete:hover { border-color: #eec9c9; background: #fcf1f1; filter: none; opacity: 1; }
.agent-admin-details { display: none; }
.agent-admin-card.is-expanded .agent-admin-details { display: grid; gap: 0; }
.agent-admin-section { padding: calc(17px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)); border-bottom: calc(1px * var(--ui-scale, 1)) solid #eeeae0; }
.agent-admin-section-heading { display: flex; align-items: flex-start; gap: calc(10px * var(--ui-scale, 1)); margin-bottom: calc(13px * var(--ui-scale, 1)); }
.agent-admin-section-heading strong, .agent-admin-section-heading small { display: block; }
.agent-admin-section-heading strong { color: #20352c; font: 800 calc(12px * var(--ui-scale, 1)) var(--font); }
.agent-admin-section-heading small { margin-top: calc(2px * var(--ui-scale, 1)); color: #64748b; font: 600 calc(12px * var(--ui-scale, 1)) var(--font); }
.agent-admin-section-icon { width: calc(23px * var(--ui-scale, 1)); height: calc(23px * var(--ui-scale, 1)); display: grid; place-items: center; border-radius: calc(12px * var(--ui-scale, 1)); background: #e9f4f1; color: #0d6b5c; font: 800 calc(12px * var(--ui-scale, 1)) var(--font); }
.agent-admin-fields { display: grid; grid-template-columns: 1fr .8fr 1.25fr; gap: calc(12px * var(--ui-scale, 1)); }
.agent-admin-fields label { display: grid; gap: calc(6px * var(--ui-scale, 1)); color: #475467; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 800; }
.agent-admin-fields label > span { color: #667085; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 650; }
.agent-admin-fields input, .agent-admin-fields select { min-width: 0; width: 100%; min-height: calc(42px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid #d0d5dd; border-radius: calc(12px * var(--ui-scale, 1)); padding: calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)); background: #fff; color: var(--ink); font: 650 calc(13px * var(--ui-scale, 1)) var(--font); outline-color: var(--blue); }
.agent-admin-departments { min-width: 0; margin: 0; padding: 0; border: 0; }
.agent-admin-department-options { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8px * var(--ui-scale, 1)); min-height: calc(34px * var(--ui-scale, 1)); }
.agent-admin-department-option { display: inline-flex; align-items: center; gap: calc(7px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid #d8d1c2; border-radius: calc(999px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)); background: #f8fafc; color: #344054; font: 750 calc(12px * var(--ui-scale, 1)) var(--font); cursor: pointer; }
.agent-admin-department-option:has(input:checked) { border-color: #9ccfbf; background: #e9f4f1; color: #0a5a4d; }
.agent-admin-card .agent-admin-department-option input { width: calc(15px * var(--ui-scale, 1)); min-width: calc(15px * var(--ui-scale, 1)); height: calc(15px * var(--ui-scale, 1)); min-height: calc(15px * var(--ui-scale, 1)); margin: 0; padding: 0 !important; accent-color: var(--blue); }
.agent-admin-invitation-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(14px * var(--ui-scale, 1)); padding: calc(15px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)); background: #f8fafc; }
.agent-admin-invitation-copy { min-width: 0; display: flex; align-items: center; gap: calc(10px * var(--ui-scale, 1)); }
.agent-admin-invitation-copy strong, .agent-admin-invitation-copy small { display: block; }
.agent-admin-invitation-copy strong { color: #20352c; font: 800 calc(12px * var(--ui-scale, 1)) var(--font); }
.agent-admin-invitation-copy small { margin-top: calc(2px * var(--ui-scale, 1)); color: #64748b; font: 600 calc(12px * var(--ui-scale, 1)) var(--font); }
.agent-admin-invitation-icon { width: calc(34px * var(--ui-scale, 1)); height: calc(34px * var(--ui-scale, 1)); display: grid; place-items: center; border-radius: calc(12px * var(--ui-scale, 1)); background: #e9f4f1; color: #0d6b5c; font-size: calc(16px * var(--ui-scale, 1)); }
.agent-admin-invitation-actions { display: flex; align-items: center; gap: calc(8px * var(--ui-scale, 1)); }
.agent-admin-invitation-actions .button { min-height: calc(36px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); }
.agent-admin-invitation-actions .button:disabled { opacity: .45; cursor: not-allowed; }
.admin-agent-empty { min-height: calc(210px * var(--ui-scale, 1)); display: grid; place-items: center; align-content: center; gap: calc(6px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) dashed #d0d5dd; border-radius: calc(14px * var(--ui-scale, 1)); background: #f8fafc; text-align: center; color: #64748b; }
.admin-agent-empty > span { width: calc(44px * var(--ui-scale, 1)); height: calc(44px * var(--ui-scale, 1)); display: grid; place-items: center; border-radius: calc(14px * var(--ui-scale, 1)); background: #e9f4f1; color: #0d6b5c; font-size: calc(22px * var(--ui-scale, 1)); }
.admin-agent-empty strong { color: #334155; font-size: calc(13px * var(--ui-scale, 1)); }
.admin-agent-empty p { margin: 0 0 calc(8px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); }

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

/* Contact info grid for customer detail view */
.customer-detail-heading > div.customer-detail-identity {
  display: grid;
  grid-template-columns: calc(35px * var(--ui-scale, 1)) minmax(0, auto);
  grid-template-rows: minmax(calc(35px * var(--ui-scale, 1)), auto) auto;
  column-gap: calc(12px * var(--ui-scale, 1));
  row-gap: calc(7px * var(--ui-scale, 1));
  align-items: center;
  min-width: 0;
}
.customer-detail-identity > .customer-initial {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
.customer-detail-identity > h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-size: calc(20px * var(--ui-scale, 1));
  line-height: 1.15;
}
.customer-detail-badges {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(8px * var(--ui-scale, 1));
  min-width: 0;
}
.customer-detail-badges .customer-code,
.customer-detail-badges .location-pill {
  white-space: nowrap;
}
.customer-detail-badges .location-pill {
  margin-top: 0;
}

.customer-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(10px * var(--ui-scale, 1));
  padding: calc(16px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));
  border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
  background: #fafbfc;
}
.info-field {
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--ui-scale, 1));
}
.info-field.full-width {
  grid-column: 1 / -1;
}
.info-label {
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #667085;
}
.info-field strong {
  font-size: calc(12.5px * var(--ui-scale, 1));
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
@media (max-width: 600px) {
  .customer-detail-heading > div.customer-detail-identity {
    grid-template-columns: calc(35px * var(--ui-scale, 1)) minmax(0, 1fr);
  }
  .customer-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Authentication feedback must remain visible above the login and invitation
   overlays; previously the messages were rendered behind both layers. */
.toast-container {
  z-index: 100100;
}

.auth-invitation-feedback {
  margin: 0 0 calc(15px * var(--ui-scale, 1));
  padding: calc(11px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid transparent;
  border-radius: calc(12px * var(--ui-scale, 1));
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
}

.auth-invitation-feedback.error {
  border-color: #eec9c9;
  background: #fbecec;
  color: #862929;
}

.auth-invitation-feedback.success {
  border-color: #b6e6c6;
  background: #ecf8f1;
  color: #186046;
}

.auth-access-message {
  margin: calc(16px * var(--ui-scale, 1)) 0 0;
  padding: calc(11px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #eec9c9;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fbecec;
  color: #862929;
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 900px) {
  /* Give the entire mobile workspace a small top margin, including search. */
  .main-content {
    padding-top: calc(18px * var(--ui-scale, 1));
  }
}

/* Clickable directory rows & action buttons */
.customer-row.clickable-row {
  cursor: pointer;
  transition: background-color .15s ease;
}
.customer-row.clickable-row:hover {
  background-color: #f8fafc;
}
.customer-name-title {
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
  min-width: 0;
}
.customer-favorite-indicator {
  color: #b5670f;
  font-size: calc(15px * var(--ui-scale, 1));
  line-height: 1;
  text-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) rgba(148, 88, 10, .18);
}
.row-chevron {
  font-size: calc(18px * var(--ui-scale, 1));
  color: #b8bdb6;
  font-weight: 700;
  padding-right: calc(5px * var(--ui-scale, 1));
  text-align: right;
}
.customer-row.clickable-row:hover .row-chevron {
  color: var(--blue);
}
.customer-actions {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  justify-content: flex-end;
}
.customer-actions .small-action {
  padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--ui-scale, 1));
}
.customer-actions .delete-action {
  color: #c24747;
  border-color: #eaa8a8;
  padding: calc(4px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
}
.customer-actions .delete-action:hover {
  background: #fbecec;
  color: #b03d3d;
}

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

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

.agent-status-controls button {
  width: calc(9px * var(--ui-scale, 1));
  height: calc(9px * var(--ui-scale, 1));
  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: #1f9a63;
}
.agent-status-controls button[data-agent-status="AVAILABLE"].active {
  opacity: 1;
  box-shadow: 0 0 calc(8px * var(--ui-scale, 1)) rgba(31, 154, 99, 0.6);
  transform: scale(1.2);
}

/* Orange dot - Busy */
.agent-status-controls button[data-agent-status="BUSY"] {
  background-color: #c1621a;
}
.agent-status-controls button[data-agent-status="BUSY"].active {
  opacity: 1;
  box-shadow: 0 0 calc(8px * var(--ui-scale, 1)) rgba(193, 98, 26, 0.6);
  transform: scale(1.2);
}

/* Red dot - Offline */
.agent-status-controls button[data-agent-status="OFFLINE"] {
  background-color: #c24747;
}
.agent-status-controls button[data-agent-status="OFFLINE"].active {
  opacity: 1;
  box-shadow: 0 0 calc(8px * var(--ui-scale, 1)) rgba(194, 71, 71, 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: #ebe7dd;
  color: #475467;
  font-size: calc(15px * var(--ui-scale, 1));
  font-weight: 700;
  cursor: pointer;
  width: calc(22px * var(--ui-scale, 1));
  height: calc(22px * var(--ui-scale, 1));
  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: #0c2620;
  background: #cbd5e1;
}

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

.search-section-title {
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  color: #667085;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: calc(12px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
}
.search-section-title:first-child {
  margin-top: calc(2px * var(--ui-scale, 1));
}

.live-search-card {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  border-radius: calc(12px * var(--ui-scale, 1));
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: calc(1px * var(--ui-scale, 1)) 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: calc(13px * var(--ui-scale, 1));
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
}
.live-search-card-main p {
  font-size: calc(12px * var(--ui-scale, 1));
  color: var(--muted);
  margin: calc(3px * var(--ui-scale, 1)) 0 0;
}
.live-search-empty {
  padding: calc(30px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));
  text-align: center;
  color: var(--muted);
  font-size: calc(13px * var(--ui-scale, 1));
}

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

/* 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: calc(270px * var(--ui-scale, 1));
    z-index: 1000;
    box-shadow: calc(6px * var(--ui-scale, 1)) 0 calc(30px * var(--ui-scale, 1)) rgba(0, 0, 0, 0.4);
    animation: slideInLeft 0.22s ease-out;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 35, 31, 0.55);
    backdrop-filter: blur(calc(2px * var(--ui-scale, 1)));
    z-index: 999;
  }
  .global-search {
    width: 100%;
    max-width: calc(320px * var(--ui-scale, 1));
  }
}

/* Email delete confirmation: application dialog, not the browser prompt. */
.email-delete-modal {
  max-width: calc(460px * var(--ui-scale, 1));
  padding: calc(28px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #eec9c9;
  box-shadow: 0 calc(24px * var(--ui-scale, 1)) calc(70px * var(--ui-scale, 1)) rgba(124, 45, 45, 0.22);
}

.email-delete-modal .delete-icon-wrap {
  width: calc(52px * var(--ui-scale, 1));
  height: calc(52px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  margin-bottom: calc(14px * var(--ui-scale, 1));
  border-radius: calc(16px * var(--ui-scale, 1));
  color: #9c2f2f;
  background: linear-gradient(135deg, #fbecec, #f9dcdc);
  border: calc(1px * var(--ui-scale, 1)) solid #eec9c9;
  font-size: calc(24px * var(--ui-scale, 1));
}

.email-delete-modal .modal-actions-grid {
  margin-top: calc(24px * var(--ui-scale, 1));
}

.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: #f8fafc;
}

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

/* On mobile, agent administration behaves like a fixed workspace: the form
   controls remain reachable while the agent list is the only scroll area. */
@media (max-width: 900px) {
  .admin-company-toolbar {
    grid-template-columns: 1fr;
    gap: calc(10px * var(--ui-scale, 1));
    padding: calc(13px * var(--ui-scale, 1));
  }

  .admin-agent-directory-toolbar { grid-template-columns: 1fr auto; }
  .admin-agent-directory-heading { grid-column: 1 / -1; }

  #admin-agent-settings-modal {
    padding: calc(12px * var(--ui-scale, 1));
    place-items: stretch;
  }

  #admin-agent-settings-modal .admin-agent-modal {
    width: 100% !important;
    height: 100%;
    max-height: none;
    padding: calc(22px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #admin-agent-settings-modal .admin-agent-modal > .eyebrow,
  #admin-agent-settings-modal .admin-agent-modal > h2,
  #admin-agent-settings-modal .admin-agent-modal > .modal-description {
    flex: 0 0 auto;
  }

  #admin-agents-form {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }

  #admin-agents-form > .admin-company-toolbar,
  #admin-agents-form > .admin-mailbox-card,
  #admin-agents-form > .admin-agent-directory-toolbar,
  #admin-agents-form > .admin-agent-form-actions {
    flex: 0 0 auto;
  }

  #admin-agents-list-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    margin-bottom: calc(16px * var(--ui-scale, 1)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-right: calc(4px * var(--ui-scale, 1)) !important;
  }

  #admin-agents-form > .admin-agent-form-actions {
    padding-bottom: 0 !important;
  }
}

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

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

.admin-company-toolbar {
  display: grid;
  grid-template-columns: minmax(calc(220px * var(--ui-scale, 1)), .8fr) minmax(0, 1.2fr);
  gap: calc(18px * var(--ui-scale, 1));
  align-items: end;
  margin: 0 0 calc(18px * var(--ui-scale, 1));
  padding: calc(15px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d0d5dd;
  border-radius: calc(14px * var(--ui-scale, 1));
  background: linear-gradient(135deg, #f8fafc, #ecf5f1);
}

.admin-company-toolbar label {
  display: block;
  margin: 0 0 calc(6px * var(--ui-scale, 1));
  color: #64748b;
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
}

.admin-company-toolbar select {
  width: 100%;
  min-height: calc(40px * var(--ui-scale, 1));
  padding: 0 calc(11px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #b4c4ba;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
  color: #1e2a25;
  font: 700 calc(14px * var(--ui-scale, 1)) var(--font);
}

.admin-company-context {
  min-width: 0;
  padding: calc(2px * var(--ui-scale, 1)) 0;
}

.admin-company-context strong,
.admin-company-context small {
  display: block;
}

.admin-company-context strong {
  color: #1d463a;
  font: 750 calc(15px * var(--ui-scale, 1)) var(--font);
}

.admin-company-context small {
  margin-top: calc(4px * var(--ui-scale, 1));
  color: #64748b;
  font: 600 calc(12px * var(--ui-scale, 1)) var(--font);
}

.admin-mailbox-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(13px * var(--ui-scale, 1));
  margin: 0 0 calc(18px * var(--ui-scale, 1));
  padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d0d5dd;
  border-radius: calc(14px * var(--ui-scale, 1));
  background: #fff;
}

.admin-mailbox-icon {
  width: calc(40px * var(--ui-scale, 1));
  height: calc(40px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #e9f4f1;
  color: #0d6b5c;
  font-size: calc(19px * var(--ui-scale, 1));
}

.admin-mailbox-copy {
  min-width: 0;
}

.admin-mailbox-copy strong,
.admin-mailbox-copy span,
.admin-mailbox-copy small {
  display: block;
}

.admin-mailbox-copy strong {
  color: #1e2a25;
  font: 750 calc(13px * var(--ui-scale, 1)) var(--font);
}

.admin-mailbox-copy span {
  margin-top: calc(2px * var(--ui-scale, 1));
  overflow: hidden;
  color: #334155;
  font: 700 calc(13px * var(--ui-scale, 1)) var(--font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-mailbox-copy small {
  margin-top: calc(3px * var(--ui-scale, 1));
  color: #64748b;
  font: 600 calc(12px * var(--ui-scale, 1)) var(--font);
}

.admin-mailbox-copy small.connected { color: #0c6647; }
.admin-mailbox-copy small.disconnected { color: #94580a; }

.admin-agent-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(calc(120px * var(--ui-scale, 1)), auto) minmax(calc(220px * var(--ui-scale, 1)), 1fr) auto;
  align-items: center;
  gap: calc(12px * var(--ui-scale, 1));
  margin-bottom: calc(14px * var(--ui-scale, 1));
}

.admin-agent-directory-heading strong,
.admin-agent-directory-heading span { display: block; }
.admin-agent-directory-heading strong { color: #1d332a; font: 800 calc(14px * var(--ui-scale, 1)) var(--font); }
.admin-agent-directory-heading span { margin-top: calc(2px * var(--ui-scale, 1)); color: #87968d; font: 650 calc(12px * var(--ui-scale, 1)) var(--font); }
.admin-agent-search-field { min-width: 0; }
.admin-agent-search-field input { width: 100%; min-height: calc(40px * var(--ui-scale, 1)); padding: calc(9px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)) calc(34px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid #d0d5dd; border-radius: calc(12px * var(--ui-scale, 1)); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238493a5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat calc(11px * var(--ui-scale, 1)) center; color: #20352c; font: 650 calc(12px * var(--ui-scale, 1)) var(--font); outline-color: #9ccfbf; }
.admin-agent-directory-toolbar > .button { min-height: calc(40px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); }
.admin-agent-form-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: calc(10px * var(--ui-scale, 1)); padding-top: calc(14px * var(--ui-scale, 1)); border-top: calc(1px * var(--ui-scale, 1)) solid #e7eaf0; background: #fff; }
.admin-agent-modal-title { margin-top: calc(5px * var(--ui-scale, 1)); }
.admin-agent-modal-description { margin-bottom: calc(20px * var(--ui-scale, 1)); }

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

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

.agent-controls-rail-section {
  padding-top: 0 !important;
  width: 100%;
}

/* Kø Profil is its own control. The line actions are shown compactly below it. */
#queue-card-wrapper .queue-accordion-btn {
  min-height: calc(26px * var(--ui-scale, 1));
  gap: calc(8px * var(--ui-scale, 1));
}

#queue-card-wrapper .queue-btn-text strong {
  font: 700 calc(12.5px * var(--ui-scale, 1)) var(--font) !important;
  letter-spacing: 0;
}

#queue-card-wrapper .status-lines-sub {
  font: 600 calc(11.5px * var(--ui-scale, 1)) var(--font) !important;
}

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

#queue-agent-actions {
  display: flex;
  gap: calc(6px * var(--ui-scale, 1));
  width: 100%;
  margin-top: calc(4px * var(--ui-scale, 1));
  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: calc(28px * var(--ui-scale, 1)) !important;
  min-height: calc(28px * var(--ui-scale, 1)) !important;
  border-radius: calc(6px * var(--ui-scale, 1)) !important;
  font: 700 calc(11.5px * var(--ui-scale, 1)) var(--font) !important;
  padding: 0 calc(8px * var(--ui-scale, 1)) !important;
  box-shadow: none !important;
}

#queue-agent-actions .pause-dropdown-menu {
  top: calc(100% + calc(4px * var(--ui-scale, 1)));
  right: auto;
  left: 0;
  width: max-content;
  min-width: calc(180px * var(--ui-scale, 1));
}

#queue-agent-actions .pause-dropdown-menu button {
  font: 600 calc(13px * var(--ui-scale, 1)) var(--font);
}

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

  .agent-admin-summary { grid-template-columns: auto minmax(calc(130px * var(--ui-scale, 1)), 1fr) auto; }
  .agent-admin-department-summary { display: none; }
  .agent-admin-fields { grid-template-columns: 1fr 1fr; }
  .agent-admin-fields label:last-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .topbar {
    padding: 0 calc(12px * var(--ui-scale, 1));
    gap: calc(8px * var(--ui-scale, 1));
  }

  .admin-mailbox-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-mailbox-card .button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .admin-agent-directory-toolbar { grid-template-columns: 1fr auto; }
  .admin-agent-directory-heading { grid-column: 1 / -1; }
  .admin-agent-search-field { min-width: 0; }
  .agent-admin-card-header { grid-template-columns: minmax(0, 1fr); }
  .agent-admin-summary { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; }
  .agent-admin-state { justify-content: space-between; padding-left: calc(54px * var(--ui-scale, 1)); }
  .agent-admin-fields { grid-template-columns: 1fr; }
  .agent-admin-fields label:last-child { grid-column: auto; }
  .agent-admin-invitation-panel { grid-template-columns: 1fr; }
  .agent-admin-invitation-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .agent-admin-invitation-actions .button { width: 100%; }
  .global-search {
    max-width: calc(220px * var(--ui-scale, 1));
  }
  .customer-detail-inpage-card .customer-detail-heading {
    flex-direction: column;
    align-items: stretch;
    gap: calc(14px * var(--ui-scale, 1));
  }
  .customer-detail-inpage-card .customer-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(8px * var(--ui-scale, 1));
    width: 100%;
  }
  .customer-detail-inpage-card .customer-detail-actions .button {
    width: 100%;
    justify-content: center;
    font-size: calc(12px * var(--ui-scale, 1));
    padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  }
  .inbox-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .thread-panel {
    border-right: 0;
    border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
  }
  .thread-list {
    max-height: calc(180px * var(--ui-scale, 1));
  }
  .conversation-panel {
    min-height: calc(420px * var(--ui-scale, 1));
  }
  .message-history {
  min-height: calc(260px * var(--ui-scale, 1));
  max-height: calc(320px * var(--ui-scale, 1));
}

.clickable-sms-item:hover,
.clickable-email-item:hover {
  background: #e9f4f1 !important;
  border-color: #a7d5c7 !important;
  transform: translateY(calc(-1px * var(--ui-scale, 1)));
  box-shadow: 0 calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) rgba(13, 107, 92, 0.1);
  transition: all 0.15s ease;
}

.log-symbol.violet-icon { background: #f3eef7; color: #8a5fa0; }
.log-symbol.orange-icon { background: #f9efe2; color: #c1621a; }
.call-status.live-status { color: #0d6b5c; }
.call-status.closed-status { color: #64748b; }

}

.badge-count-wrap,
.nav-item .badge-count-wrap {
  margin-left: calc(6px * var(--ui-scale, 1)) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(3px * var(--ui-scale, 1)) !important;
  font-size: calc(13px * var(--ui-scale, 1)) !important;
  font-weight: 600 !important;
  color: #64748b !important;
  line-height: 1 !important;
}

.total-num,
.nav-item .total-num,
.badge-count-wrap .total-num {
  font-size: calc(13px * var(--ui-scale, 1)) !important;
  color: #98a29b !important;
  font-weight: 600 !important;
}

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

.thread-item.unread-thread {
  background-color: #eaf5f1 !important;
  border-left: calc(3.5px * var(--ui-scale, 1)) solid #0d6b5c !important;
}

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

.unread-dot {
  color: #0d6b5c;
  font-size: calc(12px * var(--ui-scale, 1));
  margin-left: calc(4px * var(--ui-scale, 1));
  vertical-align: middle;
}

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

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

.clickable-log.selected-log {
  background: #eaf5f1 !important;
  border-left: calc(3.5px * var(--ui-scale, 1)) solid #0d6b5c !important;
}

.log-action-overlay {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(236, 245, 241, 0.94) !important;
  border-radius: calc(10px * var(--ui-scale, 1)) !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: #0d6b5c !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: calc(14px * var(--ui-scale, 1)) !important;
  padding: calc(3px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) !important;
  font-size: calc(12px * var(--ui-scale, 1)) !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 calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) rgba(13, 107, 92, 0.4) !important;
  transition: all 0.15s ease !important;
}

.log-open-btn-centered:hover {
  background: #0a5a4d !important;
  transform: scale(1.06) !important;
  box-shadow: 0 calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) rgba(13, 107, 92, 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: calc(10px * var(--ui-scale, 1)) !important;
    padding-right: calc(10px * var(--ui-scale, 1)) !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: calc(8px * var(--ui-scale, 1)) !important;
  }

  .metric-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: calc(10px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
    gap: calc(3px * var(--ui-scale, 1)) !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .metric-icon {
    width: calc(26px * var(--ui-scale, 1)) !important;
    height: calc(26px * var(--ui-scale, 1)) !important;
    font-size: calc(13px * var(--ui-scale, 1)) !important;
    flex: 0 0 calc(26px * var(--ui-scale, 1)) !important;
    border-radius: calc(12px * var(--ui-scale, 1)) !important;
    margin-bottom: calc(2px * var(--ui-scale, 1)) !important;
  }

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

  .metric-card span {
    font-size: calc(12px * var(--ui-scale, 1)) !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: calc(18px * var(--ui-scale, 1)) !important;
    line-height: 1.2 !important;
    display: block !important;
    margin: calc(2px * var(--ui-scale, 1)) 0 calc(1px * var(--ui-scale, 1)) !important;
  }

  .metric-card small {
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    color: #667085 !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: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
    gap: calc(8px * var(--ui-scale, 1)) !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: calc(12px * var(--ui-scale, 1)) !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: calc(12px * var(--ui-scale, 1)) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  .log-right {
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    flex: 0 0 auto !important;
  }

  /* Agent list items responsiveness */
  .agent-mini {
    padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
    gap: calc(6px * var(--ui-scale, 1)) !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: calc(12px * var(--ui-scale, 1)) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .agent-mini small {
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

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

  .activity-filter-bar {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
  }

  .activity-log-search {
    flex: 1 0 100%;
    width: 100%;
    margin-top: calc(4px * var(--ui-scale, 1));
  }

  .ticket-filter-btn {
    flex: 0 0 auto !important;
    padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
    font-size: calc(12px * var(--ui-scale, 1)) !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: calc(1px * var(--ui-scale, 1)) solid var(--line) !important;
    width: 100% !important;
  }

  .email-inbox-layout .thread-list {
    max-height: calc(180px * var(--ui-scale, 1)) !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: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: calc(10px * var(--ui-scale, 1)) !important;
  }

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

  #email-tab .conversation-head h2 {
    font-size: calc(14px * var(--ui-scale, 1)) !important;
    word-break: break-word !important;
  }

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

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

  .ticket-control-label {
    font-size: calc(12px * var(--ui-scale, 1)) !important;
  }

  .ticket-select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    padding: calc(5px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) !important;
  }

  .ticket-controls > .button, #btn-claim-ticket {
    grid-column: span 2 !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
  }

  .email-recipient-bar {
    padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .recipient-row {
    width: 100% !important;
    gap: calc(6px * var(--ui-scale, 1)) !important;
  }

  .recipient-row label {
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    width: calc(32px * var(--ui-scale, 1)) !important;
    flex: 0 0 calc(32px * var(--ui-scale, 1)) !important;
  }

  .recipient-row input {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
  }

  #email-chat-history {
    padding: calc(12px * var(--ui-scale, 1)) !important;
    min-height: calc(240px * var(--ui-scale, 1)) !important;
    max-height: calc(340px * var(--ui-scale, 1)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

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

  #email-chat-history .message-bubble {
    padding: calc(9px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) !important;
    font-size: calc(12px * var(--ui-scale, 1)) !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: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) !important;
    width: auto !important;
    box-sizing: border-box !important;
    border: calc(1px * var(--ui-scale, 1)) solid #ddd4c4 !important;
    border-radius: calc(12px * var(--ui-scale, 1)) !important;
  }

  .email-composer > input {
    padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .email-composer .composer {
    margin: 0 !important;
    padding: calc(4px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
    gap: calc(6px * var(--ui-scale, 1)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: calc(1px * var(--ui-scale, 1)) solid #e7eaf0 !important;
    border-radius: 0 !important;
  }

  .email-composer .composer input {
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .email-composer .composer .button {
    padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    flex: 0 0 auto !important;
  }
}

.edit-agent-phone-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: calc(12px * var(--ui-scale, 1)) !important;
  opacity: 0.65 !important;
  padding: 0 calc(2px * var(--ui-scale, 1)) !important;
}
.edit-agent-phone-btn:hover {
  opacity: 1 !important;
}
.agent-phone-display {
  color: #8ad0c0 !important;
  font-size: calc(12px * var(--ui-scale, 1)) !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, #0a231f 0%, #1e2a25 100%) !important;
  border: calc(1px * var(--ui-scale, 1)) solid rgba(15, 138, 118, 0.4) !important;
  border-radius: calc(14px * var(--ui-scale, 1)) !important;
  padding: calc(14px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) !important;
  margin-bottom: calc(20px * var(--ui-scale, 1)) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #fff !important;
  box-shadow: 0 calc(4px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) rgba(0, 0, 0, 0.15), 0 0 0 calc(1px * var(--ui-scale, 1)) rgba(15, 138, 118, 0.2) !important;
  gap: calc(16px * var(--ui-scale, 1)) !important;
  flex-wrap: wrap !important;
}

.call-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: calc(14px * var(--ui-scale, 1)) !important;
}

.call-live-pulse {
  width: calc(12px * var(--ui-scale, 1)) !important;
  height: calc(12px * var(--ui-scale, 1)) !important;
  border-radius: 50% !important;
  background: #1f9a63 !important;
  box-shadow: 0 0 0 0 rgba(31, 154, 99, 0.7) !important;
  animation: pulseGreen 1.5s infinite !important;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(31, 154, 99, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 calc(8px * var(--ui-scale, 1)) rgba(31, 154, 99, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(31, 154, 99, 0); }
}

.call-title-row {
  display: flex !important;
  align-items: center !important;
  gap: calc(10px * var(--ui-scale, 1)) !important;
}

.call-title-row strong {
  font-size: calc(15px * var(--ui-scale, 1)) !important;
  color: #f2f7f3 !important;
}

.call-timer-chip {
  background: #0f8a76 !important;
  color: #fff !important;
  font-family: monospace !important;
  font-size: calc(13px * var(--ui-scale, 1)) !important;
  font-weight: 700 !important;
  padding: calc(2px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
  border-radius: calc(10px * var(--ui-scale, 1)) !important;
  letter-spacing: calc(1px * var(--ui-scale, 1)) !important;
}

.call-agent-info {
  color: #64748b !important;
  font-size: calc(12px * var(--ui-scale, 1)) !important;
  margin-top: calc(3px * var(--ui-scale, 1)) !important;
  display: block !important;
}

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

.status-badge-blue {
  background: rgba(15, 138, 118, 0.2) !important;
  color: #4fb3a0 !important;
  padding: calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)) !important;
  border-radius: calc(10px * var(--ui-scale, 1)) !important;
  font-size: calc(12px * var(--ui-scale, 1)) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.call-banner-right {
  display: flex !important;
  align-items: center !important;
  gap: calc(12px * var(--ui-scale, 1)) !important;
}

.transfer-control-group {
  display: flex !important;
  align-items: center !important;
  gap: calc(6px * var(--ui-scale, 1)) !important;
}

.transfer-select {
  background: #334155 !important;
  color: #f2f7f3 !important;
  border: calc(1px * var(--ui-scale, 1)) solid #64748b !important;
  font-size: calc(12px * var(--ui-scale, 1)) !important;
  padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
  border-radius: calc(10px * var(--ui-scale, 1)) !important;
}

.btn-compact {
  padding: calc(6px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) !important;
  font-size: calc(12px * var(--ui-scale, 1)) !important;
}

.btn-danger-call {
  background: #b03d3d !important;
  color: #ffffff !important;
  border: none !important;
  padding: calc(7px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) !important;
  font-size: calc(12.5px * var(--ui-scale, 1)) !important;
  font-weight: 700 !important;
  border-radius: calc(10px * var(--ui-scale, 1)) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 calc(2px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) rgba(176, 61, 61, 0.4) !important;
}

.btn-danger-call:hover {
  background: #9c2f2f !important;
  transform: translateY(calc(-1px * var(--ui-scale, 1))) !important;
}

/* Global live-call controls stay available on every page. */
#active-call-control-host {
  position: sticky;
  top: 0;
  z-index: 8;
}

.global-active-call-panel {
  margin: calc(12px * var(--ui-scale, 1)) calc(32px * var(--ui-scale, 1)) 0;
  padding: calc(11px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid rgba(15, 138, 118, .45);
  border-radius: calc(14px * var(--ui-scale, 1));
  background: linear-gradient(135deg, #0a231f, #1e2a25);
  box-shadow: 0 calc(8px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1)) rgba(10, 35, 31, .18);
  color: #f2f7f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14px * var(--ui-scale, 1));
}

.global-call-summary,
.global-call-actions {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
  min-width: 0;
}

.global-call-summary > div {
  display: grid;
  gap: calc(2px * var(--ui-scale, 1));
  min-width: 0;
}

.global-call-summary strong { font-size: calc(13px * var(--ui-scale, 1)); }
.global-call-summary span:not(.global-call-pulse) { color: #cfd8d2; font-size: calc(12px * var(--ui-scale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-call-summary .global-call-participants { color: #a7d5c7; }
.global-call-context, .global-call-recent { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)); min-width: 0; }
.global-call-summary .global-call-context-chip { color: #bfe8dd; background: rgba(15, 138, 118, .18); border: calc(1px * var(--ui-scale, 1)) solid rgba(167, 213, 199, .24); border-radius: calc(10px * var(--ui-scale, 1)); padding: calc(2px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); white-space: nowrap; }
.global-call-summary .global-call-recent span { color: #cfd8d2; background: rgba(10, 35, 31, .28); border-radius: calc(10px * var(--ui-scale, 1)); padding: calc(2px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); max-width: 100%; white-space: nowrap; }
.global-call-recent b { color: #a7d5c7; font-weight: 700; }
.global-call-summary .global-call-unknown { color: #d9a94d; font-size: calc(12px * var(--ui-scale, 1)); font-style: italic; }
.global-call-zisson { margin-top: calc(3px * var(--ui-scale, 1)); }
.sms-zisson-result { margin-top: calc(4px * var(--ui-scale, 1)); }

.zisson-lookup-line {
  font-size: calc(12px * var(--ui-scale, 1));
  opacity: .85;
}

.zisson-lookup-line.is-error { color: #e06666; opacity: 1; }

.zisson-lookup-chip {
  border: calc(1px * var(--ui-scale, 1)) solid currentColor;
  border-radius: calc(10px * var(--ui-scale, 1));
  padding: calc(1px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
  white-space: nowrap;
  opacity: .9;
}

.zisson-lookup-chip b { font-weight: 600; }
.zisson-lookup-chip small { opacity: .7; margin-left: calc(3px * var(--ui-scale, 1)); }

/* Employee number from the contact card, written the way Zisson shows it. */
.zisson-lookup-ansatt {
  margin-left: calc(4px * var(--ui-scale, 1));
  padding: 0 calc(4px * var(--ui-scale, 1));
  border-radius: calc(6px * var(--ui-scale, 1));
  background: rgba(127, 127, 127, .18);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(11px * var(--ui-scale, 1));
}

/* "＋ Lagre": opens RelayHub's contact form prefilled from the Zisson match. */
.zisson-lookup-save {
  margin-left: calc(5px * var(--ui-scale, 1));
  padding: 0 calc(4px * var(--ui-scale, 1));
  border: 0;
  border-radius: calc(6px * var(--ui-scale, 1));
  background: rgba(127, 127, 127, .22);
  color: inherit;
  font: inherit;
  font-size: calc(11px * var(--ui-scale, 1));
  cursor: pointer;
}

.zisson-lookup-save:hover { background: rgba(127, 127, 127, .34); }

.zisson-lookup-button {
  padding: calc(2px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
}
.global-call-pulse { width: calc(10px * var(--ui-scale, 1)); height: calc(10px * var(--ui-scale, 1)); flex: 0 0 calc(10px * var(--ui-scale, 1)); border-radius: 50%; background: #1f9a63; box-shadow: 0 0 0 0 rgba(31, 154, 99, .65); animation: pulseGreen 1.5s infinite; }
.global-call-timer { margin-left: calc(4px * var(--ui-scale, 1)); background: #0d6b5c; border-radius: calc(10px * var(--ui-scale, 1)); padding: calc(3px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1)); font: 700 calc(13px * var(--ui-scale, 1)) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: calc(.5px * var(--ui-scale, 1)); }
.global-call-actions .button { min-height: calc(34px * var(--ui-scale, 1)); white-space: nowrap; }
.global-call-mute.is-muted { color: #f9efe2; background: #94580a; border-color: #a3600e; }
.global-call-menu { position: relative; min-width: 0; }
.global-call-menu-trigger { width: 100%; min-height: calc(34px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); color: #f2f7f3; background: #334155; border: calc(1px * var(--ui-scale, 1)) solid #64748b; border-radius: calc(10px * var(--ui-scale, 1)); }
.global-call-menu-trigger:hover:not(:disabled), .global-call-menu-trigger[aria-expanded="true"] { background: #34473c; border-color: #8ad0c0; }
.global-call-menu-trigger:disabled { opacity: .62; cursor: not-allowed; }
.global-call-menu-trigger svg { width: calc(17px * var(--ui-scale, 1)); height: calc(17px * var(--ui-scale, 1)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.global-call-dropdown { position: absolute; z-index: 16; top: calc(100% + calc(7px * var(--ui-scale, 1))); right: 0; width: min(calc(250px * var(--ui-scale, 1)), calc(100vw - calc(48px * var(--ui-scale, 1)))); padding: calc(5px * var(--ui-scale, 1)); display: grid; gap: calc(3px * var(--ui-scale, 1)); background: #14251f; border: calc(1px * var(--ui-scale, 1)) solid #64748b; border-radius: calc(12px * var(--ui-scale, 1)); box-shadow: 0 calc(12px * var(--ui-scale, 1)) calc(26px * var(--ui-scale, 1)) rgba(10, 35, 31, .36); }
.global-call-dropdown[hidden] { display: none !important; }
.global-call-menu-item { width: 100%; border: 0; border-radius: calc(10px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)); color: #f2f7f3; background: transparent; text-align: left; font: 700 calc(12px * var(--ui-scale, 1)) var(--font); cursor: pointer; }
.global-call-menu-item:hover { background: #23382e; }
.global-call-menu-item small { display: block; margin-top: calc(2px * var(--ui-scale, 1)); color: #9db0a8; font: 600 calc(12px * var(--ui-scale, 1)) var(--font); }
.global-call-menu-item:disabled { cursor: not-allowed; }
.global-call-menu-item:disabled:hover { background: transparent; }
.global-call-emergency-option { color: #eec9c9; background: rgba(124, 45, 45, .18); border: calc(1px * var(--ui-scale, 1)) solid rgba(217, 138, 138, .28); opacity: .72; }
.global-call-emergency-option:disabled:hover { background: rgba(124, 45, 45, .18); }
.global-call-emergency-option small { color: #cfd8d2; }
.global-call-menu-empty { padding: calc(9px * var(--ui-scale, 1)); color: #9db0a8; font-size: calc(12px * var(--ui-scale, 1)); text-align: center; }

@media (max-width: 900px) {
  #active-call-control-host { top: 0; }
  .global-active-call-panel { margin: calc(8px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) 0; align-items: stretch; flex-direction: column; gap: calc(10px * var(--ui-scale, 1)); }
  .global-call-summary { width: 100%; }
  .global-call-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; }
  .global-call-menu { min-width: 0; }
}

@media (max-width: 480px) {
  .global-call-summary { flex-wrap: wrap; }
  .global-call-timer { margin-left: auto; }
  .global-call-actions { grid-template-columns: 1fr 1fr; }
  .global-call-hangup { grid-column: 1 / -1; }
  .global-call-summary .global-call-recent span { max-width: 100%; }
  .global-call-dropdown { right: auto; left: 0; width: min(calc(280px * var(--ui-scale, 1)), calc(100vw - calc(48px * var(--ui-scale, 1)))); }
}

/* 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: calc(1px * var(--ui-scale, 1)) solid #d0d5dd !important;
  background: #ffffff !important;
  padding: calc(6px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) !important;
  border-radius: calc(12px * var(--ui-scale, 1)) !important;
  display: flex !important;
  align-items: center !important;
  gap: calc(10px * var(--ui-scale, 1)) !important;
  box-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1)) rgba(15, 23, 42, 0.06) !important;
  transition: all 0.2s !important;
}

.user-menu:hover {
  background: #f8fafc !important;
  border-color: #0f8a76 !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: calc(12.5px * var(--ui-scale, 1)) !important;
  font-weight: 700 !important;
  color: #0a231f !important;
  line-height: 1.2 !important;
}

.active-agent-phone {
  font-size: calc(12px * var(--ui-scale, 1)) !important;
  font-weight: 600 !important;
  color: #0d6b5c !important;
  margin-top: calc(1px * var(--ui-scale, 1)) !important;
}

/* Authentication Login Overlay */
.auth-screen-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #0a231f !important;
  z-index: 99999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: calc(20px * var(--ui-scale, 1)) !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(10, 35, 31, 0.75) !important;
  backdrop-filter: blur(calc(8px * var(--ui-scale, 1))) !important;
  z-index: 100000 !important;
  display: none !important;
  justify-content: center !important;
  align-items: center !important;
  padding: calc(20px * var(--ui-scale, 1)) !important;
}

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

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

/* RelayHub entrance page */
.auth-screen-backdrop {
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(calc(20px * var(--ui-scale, 1)), 4vw, calc(56px * var(--ui-scale, 1))) !important;
  background:
    radial-gradient(circle at 9% 12%, rgba(13, 107, 92, 0.26), transparent 28rem),
    radial-gradient(circle at 84% 82%, rgba(47, 166, 120, 0.16), transparent 26rem),
    #0a1f18 !important;
}

.auth-landing-shell {
  width: min(calc(1100px * var(--ui-scale, 1)), 100%);
  min-height: min(calc(700px * var(--ui-scale, 1)), calc(100dvh - calc(40px * var(--ui-scale, 1))));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(calc(360px * var(--ui-scale, 1)), 0.85fr);
  align-items: stretch;
  gap: clamp(calc(32px * var(--ui-scale, 1)), 7vw, calc(92px * var(--ui-scale, 1)));
}

.auth-landing-story {
  align-self: center;
  color: #f2f7f3;
  padding: clamp(calc(16px * var(--ui-scale, 1)), 3vw, calc(34px * var(--ui-scale, 1))) 0;
}

.auth-landing-brand {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
  color: #ffffff;
  font-size: calc(25px * var(--ui-scale, 1));
  font-weight: 800;
  letter-spacing: -0.04em;
}

.auth-landing-brand .brand-mark {
  width: calc(27px * var(--ui-scale, 1));
  height: calc(27px * var(--ui-scale, 1));
}

.auth-landing-eyebrow {
  margin: calc(70px * var(--ui-scale, 1)) 0 calc(13px * var(--ui-scale, 1));
  color: #9ccfbf;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  letter-spacing: 0.18em;
}

.auth-landing-story h1 {
  max-width: calc(620px * var(--ui-scale, 1));
  margin: 0;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: clamp(calc(44px * var(--ui-scale, 1)), 6.3vw, calc(76px * var(--ui-scale, 1)));
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.auth-landing-story h1 span {
  color: #9ccfbf;
}

.auth-landing-intro {
  max-width: calc(540px * var(--ui-scale, 1));
  margin: calc(23px * var(--ui-scale, 1)) 0 calc(32px * var(--ui-scale, 1));
  color: #b3c0b8;
  font-size: calc(18px * var(--ui-scale, 1));
  line-height: 1.55;
}

.auth-landing-benefits {
  display: grid;
  gap: calc(12px * var(--ui-scale, 1));
  max-width: calc(500px * var(--ui-scale, 1));
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-landing-benefits li {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--ui-scale, 1));
  min-height: calc(61px * var(--ui-scale, 1));
  padding: calc(11px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid rgba(170, 205, 193, 0.16);
  border-radius: calc(14px * var(--ui-scale, 1));
  background: rgba(20, 45, 38, 0.62);
}

.auth-benefit-icon {
  display: inline-grid;
  flex: 0 0 calc(31px * var(--ui-scale, 1));
  width: calc(31px * var(--ui-scale, 1));
  height: calc(31px * var(--ui-scale, 1));
  place-items: center;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: rgba(27, 138, 118, 0.2);
  color: #b4d9cc;
  font-family: "DM Sans", sans-serif;
  font-size: calc(21px * var(--ui-scale, 1));
  font-weight: 700;
}

.auth-landing-benefits strong,
.auth-landing-benefits small {
  display: block;
}

.auth-landing-benefits strong {
  color: #f2f7f3;
  font-size: calc(14px * var(--ui-scale, 1));
  line-height: 1.3;
}

.auth-landing-benefits small {
  margin-top: calc(2px * var(--ui-scale, 1));
  color: #9dafaa;
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1.35;
}

.auth-landing-security {
  margin: calc(26px * var(--ui-scale, 1)) 0 0;
  color: #88978e;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 600;
}

.auth-landing-security::before {
  content: "✓";
  display: inline-grid;
  width: calc(17px * var(--ui-scale, 1));
  height: calc(17px * var(--ui-scale, 1));
  margin-right: calc(8px * var(--ui-scale, 1));
  place-items: center;
  border: calc(1px * var(--ui-scale, 1)) solid rgba(139, 183, 255, 0.45);
  border-radius: 50%;
  color: #b4d9cc;
  font-size: calc(12px * var(--ui-scale, 1));
}

.auth-card.auth-login-card {
  align-self: center;
  transform: translateY(clamp(calc(12px * var(--ui-scale, 1)), 2vh, calc(24px * var(--ui-scale, 1))));
  max-width: calc(440px * var(--ui-scale, 1)) !important;
  padding: calc(34px * var(--ui-scale, 1)) !important;
  border: calc(1px * var(--ui-scale, 1)) solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 calc(28px * var(--ui-scale, 1)) calc(64px * var(--ui-scale, 1)) rgba(0, 0, 0, 0.34), 0 0 0 calc(1px * var(--ui-scale, 1)) rgba(20, 45, 38, 0.08) !important;
}

@media (max-width: 800px) {
  .auth-screen-backdrop {
    align-items: flex-start !important;
    padding: calc(24px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) !important;
  }

  .auth-landing-shell {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .auth-landing-story {
    display: contents;
  }

  .auth-landing-brand {
    order: 1;
    margin: calc(4px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) 0;
  }

  .auth-landing-eyebrow {
    order: 2;
    margin: calc(38px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1));
  }

  .auth-landing-story h1 {
    order: 3;
    margin: 0 calc(2px * var(--ui-scale, 1));
    font-size: clamp(calc(42px * var(--ui-scale, 1)), 13vw, calc(62px * var(--ui-scale, 1)));
  }

  .auth-card.auth-login-card {
    order: 5;
    margin: calc(26px * var(--ui-scale, 1)) 0 calc(28px * var(--ui-scale, 1));
  }

  .auth-landing-intro {
    order: 4;
    margin: calc(16px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) 0;
    font-size: calc(16px * var(--ui-scale, 1));
  }

  .auth-landing-benefits {
    order: 6;
    gap: calc(8px * var(--ui-scale, 1));
    margin: 0 calc(2px * var(--ui-scale, 1));
  }

  .auth-landing-benefits li {
    min-height: calc(53px * var(--ui-scale, 1));
    padding: calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
  }

  .auth-landing-security {
    order: 7;
    margin: calc(19px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) 0;
  }

  .auth-card.auth-login-card {
    max-width: none !important;
    padding: calc(26px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1)) !important;
    transform: none;
  }
}

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

.microsoft-sso-button:hover {
  background: #000000 !important;
  transform: translateY(calc(-1px * var(--ui-scale, 1))) !important;
  box-shadow: 0 calc(4px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) rgba(0, 0, 0, 0.15) !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: calc(28px * var(--ui-scale, 1));
  margin: 0;
  padding: 0 calc(10px * var(--ui-scale, 1)) !important;
  white-space: nowrap;
}

/* Queue profile reflects the selected agent's line status. */
#queue-card-wrapper.status-btn-green {
  background: linear-gradient(135deg, #15714e, #186046) !important;
  border-color: #54c98f !important;
}

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

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

#queue-card-wrapper.status-btn-gray {
  background: #17352e !important;
  border-color: #1f4239 !important;
}

#queue-card-wrapper.status-btn-green:hover {
  background: linear-gradient(135deg, #178a5a, #15714e) !important;
  border-color: #a5e0bd !important;
}

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

#queue-card-wrapper.status-btn-purple:hover {
  background: linear-gradient(135deg, #ab84c4, #7a4f8f) !important;
  border-color: #e6d9ee !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: calc(14px * var(--ui-scale, 1));
}

.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: calc(12px * var(--ui-scale, 1)) !important;
}

/* Kø Profil: a larger, centered status summary with state-specific contrast. */
#queue-card-wrapper .queue-accordion-btn {
  min-height: calc(104px * var(--ui-scale, 1));
  position: relative;
  justify-content: center;
  text-align: center;
  padding: calc(9px * var(--ui-scale, 1)) calc(44px * var(--ui-scale, 1)) !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: calc(17px * var(--ui-scale, 1)) !important;
  line-height: 1.2;
}

#queue-card-wrapper .status-lines-sub {
  font-size: calc(14px * var(--ui-scale, 1)) !important;
  line-height: 1.3;
  text-align: center !important;
}

#queue-card-wrapper .status-timer-sub {
  font-size: calc(14px * var(--ui-scale, 1)) !important;
  line-height: 1.35;
  margin-top: auto;
  padding-top: calc(10px * var(--ui-scale, 1));
  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: calc(12px * var(--ui-scale, 1));
  top: 50%;
  transform: translateY(-50%);
}

#queue-card-wrapper .queue-chevron {
  position: absolute;
  right: calc(14px * var(--ui-scale, 1));
  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: #bfe8dd !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: #202b26 !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: calc(12px * var(--ui-scale, 1));
  margin-top: calc(12px * var(--ui-scale, 1));
}

#email-tab .email-context-labels {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: calc(12px * var(--ui-scale, 1));
  padding-bottom: calc(1px * var(--ui-scale, 1));
}

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

#email-tab #btn-claim-ticket {
  min-height: calc(28px * var(--ui-scale, 1));
  height: calc(28px * var(--ui-scale, 1));
  padding: 0 calc(10px * var(--ui-scale, 1)) !important;
  white-space: nowrap;
  font-size: calc(12px * var(--ui-scale, 1));
}

/* 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: calc(8px * var(--ui-scale, 1));
}

.button-contact-action,
#email-tab .ticket-controls > .button-contact-action {
  min-height: calc(28px * var(--ui-scale, 1));
  height: calc(28px * var(--ui-scale, 1));
  padding: 0 calc(10px * var(--ui-scale, 1)) !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: calc(12px * var(--ui-scale, 1));
}

.sms-conversation-head {
  align-items: flex-start;
  gap: calc(12px * var(--ui-scale, 1));
}

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

.direct-call-search-card .customer-initial {
  background: #e9f4f1;
  color: #0d6b5c;
}

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

.direct-call-search-card .small-action:hover {
  background: #0a5a4d;
}

/* Center the company contact card and the selected-agent control. */
.utility-rail .service-card {
  text-align: center;
  position: relative;
  background: #17352e;
  border-color: #1f4239;
  border-radius: calc(12px * var(--ui-scale, 1));
}

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

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

.utility-rail .service-card-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(28px * var(--ui-scale, 1));
  margin-bottom: calc(5px * var(--ui-scale, 1));
}

.utility-rail .service-card-heading .service-icon {
  width: calc(28px * var(--ui-scale, 1));
  height: calc(28px * var(--ui-scale, 1));
  border-radius: calc(12px * var(--ui-scale, 1));
  color: #8ad0c0;
  background: rgba(18, 128, 109, 0.15);
  position: absolute;
  left: calc(12px * var(--ui-scale, 1));
  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: calc(12px * var(--ui-scale, 1));
}

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

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

.queue-timer-card {
  width: 100%;
  min-height: unset;
  margin-top: calc(3px * var(--ui-scale, 1));
  padding: calc(3px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid rgba(255, 255, 255, 0.12);
  border-radius: calc(6px * var(--ui-scale, 1));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.2) !important;
}

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

.queue-timer-card .status-timer-sub {
  margin: 0;
  padding: 0;
  font-size: calc(11.5px * var(--ui-scale, 1)) !important;
  font-weight: 600;
  line-height: 1.25;
}

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

#queue-timer-card.status-btn-green,
#queue-timer-card.status-btn-light-orange,
#queue-timer-card.status-btn-purple,
#queue-timer-card.status-btn-gray {
  background: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

#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;
}
#btn-enable-notifications.notification-enabled {
  color: var(--green);
  border-color: #b0e0c4;
  background: var(--green-soft);
}
.notification-toggle {
  width: calc(36px * var(--ui-scale, 1));
  height: calc(35px * var(--ui-scale, 1));
  padding: 0 !important;
  font-size: calc(17px * var(--ui-scale, 1)) !important;
}
.notification-toggle.notification-disabled {
  color: #667085;
  background: #f8fafc;
}

.notification-permission-modal {
  max-width: calc(430px * var(--ui-scale, 1));
}

.notification-permission-icon {
  width: calc(52px * var(--ui-scale, 1));
  height: calc(52px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  margin-bottom: calc(14px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #c9e6dd;
  border-radius: calc(16px * var(--ui-scale, 1));
  color: #0a5a4d;
  background: #ecf5f1;
  font-size: calc(24px * var(--ui-scale, 1));
}

.mobile-operation-controls {
  display: none;
}

.mobile-sentralbord-slot {
  display: none;
}

.mobile-sms-list-button {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0 calc(12px * var(--ui-scale, 1)) 0 0;
}

.sms-composer-actions {
  display: contents;
}

@media (max-width: 900px) {
  /* Mobile overview focuses on the live call feed rather than summary cards. */
  #dashboard-tab .metric-grid {
    display: none;
  }

  .content-scroll.mobile-scroll-locked {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Keep the dashboard inside the mobile viewport; only the call log scrolls. */
  #dashboard-tab.active {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: hidden;
    gap: calc(12px * var(--ui-scale, 1));
  }

  #dashboard-tab .page-heading {
    flex: 0 0 auto;
    margin: 0;
  }

  #dashboard-tab .dashboard-grid {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  #dashboard-tab .activity-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: hidden;
  }

  #dashboard-tab .call-log-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Ansatte uses the same fixed frame: only the directory or detail scrolls. */
  #customers-tab.active {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: hidden;
    gap: calc(12px * var(--ui-scale, 1));
  }

  #customers-tab .page-heading {
    flex: 0 0 auto;
    margin: 0;
  }

  #customers-tab #customer-directory-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* The directory must truly disappear while a contact detail is open. */
  #customers-tab #customer-directory-card.hidden {
    display: none !important;
  }

  #customers-tab .customer-directory,
  #customers-tab #customer-detail-view-container:not(.hidden) {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sidebar.mobile-open {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
    gap: calc(3px * var(--ui-scale, 1)) !important;
  }

  .sidebar.mobile-open #agents-list {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }

  .mobile-operation-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: calc(3px * var(--ui-scale, 1)) !important;
    margin: 0 !important;
    padding-bottom: calc(4px * var(--ui-scale, 1)) !important;
    border-bottom: calc(1px * var(--ui-scale, 1)) solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mobile-operation-controls .utility-agent-select,
  .mobile-operation-controls .agent-controls-rail-section,
  .mobile-sentralbord-slot,
  .mobile-sentralbord-slot .service-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .mobile-operation-controls .utility-agent-select {
    margin: 0;
  }

  .mobile-operation-controls .utility-agent-select .user-menu,
  .mobile-operation-controls .active-agent-select-wrapper,
  .mobile-operation-controls #queue-card-wrapper,
  .mobile-operation-controls .queue-profile-accordion {
    width: 100%;
    min-width: 0;
  }

  .mobile-operation-controls .agent-controls-rail-section {
    padding: 0 !important;
  }

  .mobile-operation-controls #queue-agent-actions {
    margin-bottom: 0;
  }

  .mobile-sentralbord-slot {
    display: block !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .sidebar.mobile-open .sidebar-footer {
    margin-top: calc(8px * var(--ui-scale, 1));
  }

  /* On mobile, open one SMS conversation at a time. */
  #sms-tab.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: calc(12px * var(--ui-scale, 1));
  }

  #sms-tab .inbox-layout {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
  }

  #sms-tab .thread-panel,
  #sms-tab .conversation-panel {
    height: 100%;
    min-height: 0;
  }

  #sms-tab .thread-panel {
    display: flex;
    flex-direction: column;
  }

  #sms-tab .inbox-layout.mobile-sms-thread-open .thread-panel {
    display: none;
  }

  #sms-tab .inbox-layout:not(.mobile-sms-thread-open) .conversation-panel {
    display: none;
  }

  #sms-tab .thread-list,
  #sms-tab .message-history {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .mobile-sms-list-button {
    display: inline-flex;
    margin-bottom: calc(10px * var(--ui-scale, 1));
  }

  .sms-conversation-head {
    display: block;
    flex: 0 0 auto;
  }

  .sms-composer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(10px * var(--ui-scale, 1));
    padding: calc(10px * var(--ui-scale, 1));
    flex: 0 0 auto;
  }

  .sms-composer-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(8px * var(--ui-scale, 1));
  }

  .sms-composer-actions .button,
  .sms-composer-actions .send-action-wrap {
    width: 100%;
  }

  .sms-composer-actions .send-action-wrap {
    display: flex;
  }

  .sms-composer input {
    min-height: calc(42px * var(--ui-scale, 1));
    padding: 0 calc(4px * var(--ui-scale, 1));
  }
}

@media (max-width: 900px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell,
  .main-content {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .main-content {
    display: flex;
    flex-direction: column;
  }

  .content-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* E-post follows the same list-first mobile flow as SMS. */
  #email-tab.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: calc(12px * var(--ui-scale, 1));
  }

  #email-tab .email-inbox-layout {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  #email-tab .thread-panel,
  #email-tab .conversation-panel {
    height: 100%;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }

  #email-tab .thread-panel {
    display: flex;
    flex-direction: column;
  }

  #email-tab .email-inbox-layout.mobile-email-thread-open .thread-panel {
    display: none;
  }

  #email-tab .email-inbox-layout:not(.mobile-email-thread-open) .conversation-panel {
    display: none;
  }

  #email-tab .thread-list,
  #email-tab #email-chat-history {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
  }

  .mobile-email-list-button {
    display: inline-flex;
    margin-bottom: calc(10px * var(--ui-scale, 1));
  }

  #email-tab .email-conversation-head {
    display: block;
    flex: 0 0 auto;
    overflow-x: hidden;
  }

  #email-tab .email-heading-content,
  #email-tab .email-heading-actions-row,
  #email-tab .ticket-controls,
  #email-tab .email-recipient-bar,
  #email-tab .ticket-compose-area,
  #email-tab .email-composer {
    max-width: 100%;
    min-width: 0;
  }

  #email-tab .email-composer .composer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
    gap: calc(9px * var(--ui-scale, 1));
  }

  #email-tab .email-composer .composer > input {
    order: 2;
    flex: 1 1 100%;
    min-height: calc(40px * var(--ui-scale, 1));
  }

  #email-tab .email-composer .composer > div[style] {
    order: 1;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(7px * var(--ui-scale, 1)) !important;
    width: 100%;
    min-width: 0;
  }

  #email-tab .email-composer .composer > div[style] > *,
  #email-tab .email-composer .composer > div[style] .button,
  #email-tab .email-composer .composer > div[style] .send-action-wrap {
    width: 100%;
    min-width: 0;
  }
}

.mobile-email-list-button {
  display: none;
}

@media (max-width: 900px) {
  .mobile-email-list-button {
    display: inline-flex;
  }
}

@media (max-width: 900px) {
  /* Keep the company contact card visually identical to the inactive Kø Profil card. */
  .mobile-sentralbord-slot #sentralbord-card {
    background: #17352e !important;
    border-color: #1f4239 !important;
  }

  .mobile-sentralbord-slot #sentralbord-card .service-card-heading h2 {
    color: #e4e7ec;
  }

  .mobile-sentralbord-slot #sentralbord-card strong {
    color: #e4e7ec;
  }

  .mobile-sentralbord-slot #sentralbord-card p {
    color: #8ea79e;
  }

  .mobile-sentralbord-slot #sentralbord-card .service-icon {
    color: #8ad0c0;
    background: rgba(18, 128, 109, 0.15);
  }

  /* Match the mobile navigation label size, including Oversikt. */
  #queue-card-wrapper .queue-btn-text strong {
    font: 600 calc(14px * var(--ui-scale, 1)) var(--font) !important;
  }
}

/* Thin request indicator placed directly under the Send button. */
.send-action-wrap {
  position: relative;
  display: inline-flex;
  padding-bottom: calc(4px * var(--ui-scale, 1));
}

.send-progress {
  position: absolute;
  right: calc(2px * var(--ui-scale, 1));
  bottom: 0;
  left: calc(2px * var(--ui-scale, 1));
  height: calc(2px * var(--ui-scale, 1));
  overflow: hidden;
  border-radius: calc(99px * var(--ui-scale, 1));
  background: rgba(13, 107, 92, .15);
  opacity: 0;
  transition: opacity .16s ease;
}

.send-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width .12s linear;
}

.send-action-wrap.is-sending .send-progress {
  opacity: 1;
}

.send-action-wrap.is-sending .button {
  cursor: wait;
  opacity: .88;
}

/* Align Sentralbord with the Kø Profil card in the right rail. */
.utility-rail .service-card-heading {
  position: relative;
}

.utility-rail .service-card-heading h2 {
  font: 600 calc(17px * var(--ui-scale, 1)) var(--font) !important;
  letter-spacing: 0;
}

.utility-rail .service-card-heading .service-icon {
  left: calc(12px * var(--ui-scale, 1));
  top: 50%;
  width: calc(32px * var(--ui-scale, 1));
  height: calc(32px * var(--ui-scale, 1));
  border-radius: calc(12px * var(--ui-scale, 1));
  color: #0d6b5c;
  background: #d9ede7;
}

.agent-controls-rail-section {
  padding-top: calc(8px * var(--ui-scale, 1)) !important;
}

/* Personal message templates for SMS and email. */
.template-picker {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.template-trigger {
  white-space: nowrap;
}

.template-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + calc(8px * var(--ui-scale, 1)));
  width: min(calc(310px * var(--ui-scale, 1)), calc(100vw - calc(40px * var(--ui-scale, 1))));
  max-height: calc(320px * var(--ui-scale, 1));
  overflow-y: auto;
  padding: calc(7px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d8d2c3;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
  box-shadow: 0 calc(14px * var(--ui-scale, 1)) calc(34px * var(--ui-scale, 1)) rgba(15, 23, 42, .18);
  z-index: 35;
}

.template-menu-list {
  display: grid;
  gap: calc(3px * var(--ui-scale, 1));
}

.template-menu-item {
  display: flex;
  align-items: stretch;
  gap: calc(4px * var(--ui-scale, 1));
}

.template-insert-button {
  min-width: 0;
  flex: 1;
  padding: calc(8px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  border: 0;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: transparent;
  color: #344054;
  cursor: pointer;
  text-align: left;
}

.template-insert-button:hover {
  background: #ecf5f1;
}

.template-insert-button strong,
.template-insert-button small {
  display: block;
}

.template-insert-button strong {
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
}

.template-insert-button small {
  margin-top: calc(2px * var(--ui-scale, 1));
  overflow: hidden;
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-delete-button {
  width: calc(28px * var(--ui-scale, 1));
  border: 0;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: transparent;
  color: #667085;
  cursor: pointer;
  font-size: calc(18px * var(--ui-scale, 1));
}

.template-delete-button:hover {
  color: #9c2f2f;
  background: #fbeded;
}

.template-menu-empty {
  margin: calc(5px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  text-align: center;
}

.template-add-button {
  width: 100%;
  margin-top: calc(5px * var(--ui-scale, 1));
  padding: calc(8px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) dashed #b6c1b8;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #f8fafc;
  color: #0d6b5c;
  cursor: pointer;
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
}

.template-add-button:hover {
  background: #e9f4f1;
  border-color: #8ad0c0;
}

.message-template-modal {
  max-width: calc(470px * var(--ui-scale, 1));
}

.message-template-form {
  display: grid;
  gap: calc(13px * var(--ui-scale, 1));
}

.message-template-form label {
  display: grid;
  gap: calc(5px * var(--ui-scale, 1));
  color: #475467;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
}

.message-template-form input,
.message-template-form textarea {
  width: 100%;
  border: calc(1px * var(--ui-scale, 1)) solid #cbd5e1;
  border-radius: calc(12px * var(--ui-scale, 1));
  color: var(--ink);
  font: inherit;
  outline-color: var(--blue);
  padding: calc(10px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
}

.message-template-form textarea {
  min-height: calc(130px * var(--ui-scale, 1));
  resize: vertical;
}

@media (max-width: 600px) {
  .template-trigger {
    padding: calc(8px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)) !important;
  }

  /* Open template menus into the mobile viewport, never past its left edge. */
  .template-menu {
    right: auto;
    left: 0;
    width: min(calc(310px * var(--ui-scale, 1)), calc(100vw - calc(24px * var(--ui-scale, 1))));
    max-height: min(calc(320px * var(--ui-scale, 1)), 45dvh);
  }
}

/* Desktop workspace: fixed side rails and header, scrollable central content. */
@media (min-width: 901px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    height: 100vh;
    min-height: 0;
  }

  .sidebar,
  .utility-rail {
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main-content {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .topbar {
    flex: 0 0 auto;
  }

  .content-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  /* Keep the overview complete in the first desktop viewport. */
  #dashboard-tab.active {
    display: grid;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: calc(16px * var(--ui-scale, 1)) 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: calc(14px * var(--ui-scale, 1));
  }

  #dashboard-tab .page-heading,
  #dashboard-tab .metric-grid {
    margin: 0;
  }

  #dashboard-tab .metric-grid {
    gap: calc(11px * var(--ui-scale, 1));
  }

  #dashboard-tab .metric-card {
    padding: calc(13px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1));
  }

  #dashboard-tab .dashboard-grid {
    min-height: 0;
  }

  #dashboard-tab .activity-card {
    display: flex;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
  }

  #dashboard-tab .surface-heading {
    padding: calc(15px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  }

  #dashboard-tab .call-log-list {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
  }

  /* Keep inboxes and the customer directory within the desktop workspace too.
     Lists and message histories become the overflow reserve when needed. */
  #sms-tab.active,
  #email-tab.active,
  #customers-tab.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: calc(16px * var(--ui-scale, 1)) 0;
    gap: calc(12px * var(--ui-scale, 1));
  }

  #sms-tab .page-heading,
  #email-tab .page-heading,
  #customers-tab .page-heading,
  #sms-tab .ticket-filter-bar,
  #email-tab .ticket-filter-bar {
    flex: 0 0 auto;
    margin: 0;
  }

  #sms-tab .inbox-layout,
  #email-tab .inbox-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  #sms-tab .thread-panel,
  #email-tab .thread-panel,
  #sms-tab .conversation-panel,
  #email-tab .conversation-panel {
    min-height: 0;
  }

  #sms-tab .conversation-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  #sms-tab .thread-panel,
  #email-tab .thread-panel {
    display: flex;
    flex-direction: column;
  }

  #sms-tab .thread-list,
  #email-tab .thread-list,
  #sms-tab .message-history,
  #email-tab .message-history {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  #customers-tab #customer-directory-card {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }

  /* Do not let the desktop directory compete with an open contact detail. */
  #customers-tab #customer-directory-card.hidden {
    display: none !important;
  }

  #customers-tab .customer-directory,
  #customers-tab #customer-detail-view-container:not(.hidden) {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
}

/* Fine alignment for the fixed side panels. */
.utility-rail .service-card-heading {
  position: static;
}

.utility-rail .service-card-heading .service-icon {
  /* Queue icon: calc(14px * var(--ui-scale, 1)) wrapper padding + calc(12px * var(--ui-scale, 1)) button inset. */
  left: calc(26px * var(--ui-scale, 1));
}

.workspace-switcher strong {
  font-size: calc(18px * var(--ui-scale, 1));
}

.workspace-switcher small {
  font-size: calc(14px * var(--ui-scale, 1));
}

.workspace-department-select {
  display: none;
  width: 100%;
  margin-top: calc(8px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #2f4a3f;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #142822;
  color: #bfe8dd;
  font: 600 calc(12px * var(--ui-scale, 1)) var(--font);
  padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
}

.workspace-switcher.has-department-switcher {
  display: grid;
  grid-template-columns: calc(34px * var(--ui-scale, 1)) minmax(0, 1fr) auto;
}

.workspace-switcher.has-department-switcher .workspace-department-select {
  display: block;
  grid-column: 1 / -1;
}

.workspace-switcher .workspace-department-select.hidden {
  display: none;
}

.agents-empty-state {
  width: 100%;
  padding: calc(10px * var(--ui-scale, 1));
  color: #64748b;
  font-size: calc(12px * var(--ui-scale, 1));
  font-style: italic;
  text-align: center;
}

#queue-card-wrapper .queue-btn-icon {
  left: 0;
}

#queue-card-wrapper .status-lines-sub {
  font: 400 calc(14px * var(--ui-scale, 1)) var(--font) !important;
}

.flow-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(5px * var(--ui-scale, 1));
  min-width: calc(31px * var(--ui-scale, 1));
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.flow-action-button:hover:not(:disabled) {
  transform: translateY(calc(-1px * var(--ui-scale, 1)));
  box-shadow: 0 calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) rgba(15, 23, 42, .1);
}

.flow-action-icon {
  width: calc(15px * var(--ui-scale, 1));
  height: calc(15px * var(--ui-scale, 1));
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-search-sms], [data-sms-customer] {
  color: #0d6b5c;
  border-color: #c9e6dd;
  background: #ecf5f1;
}

/* Mobile SMS uses one scrollable conversation frame so the name, actions,
   history and composer move together, matching the e-post reading flow. */
@media (max-width: 900px) {
  #sms-tab .inbox-layout.mobile-sms-thread-open .conversation-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  #sms-tab .inbox-layout.mobile-sms-thread-open .message-history {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
}

[data-search-email], [data-email-customer] {
  color: #b34d7a;
  border-color: #ecc9dd;
  background: #f9eef4;
}

.video-action {
  color: #7a4f8f;
  border-color: #e6d9ee;
  background: #f3eef7;
}

.video-action:hover:not(:disabled) {
  background: #e6d9ee;
  color: #6d4382;
}

.softphone-toggle { width: calc(36px * var(--ui-scale, 1)); height: calc(36px * var(--ui-scale, 1)); padding: 0; color: #667085; background: #f8fafc; border-color: #d9dee7; }
.softphone-toggle:hover:not(.active) { color: #667085; background: #f1f3f6; }
.softphone-toggle svg { width: calc(18px * var(--ui-scale, 1)); height: calc(18px * var(--ui-scale, 1)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.softphone-toggle.active { color: #fff; background: #15714e; border-color: #15714e; box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(31, 154, 99, .18); }

/* E-post has enough room for message text and uses the central page scroll.
   The conversation is no longer squeezed into a small internal history box. */
@media (min-width: 901px) {
  #email-tab.active {
    height: auto;
    min-height: 0;
  }

  #email-tab .email-inbox-layout {
    flex: 0 0 auto;
    min-height: max(calc(640px * var(--ui-scale, 1)), calc(100vh - calc(180px * var(--ui-scale, 1))));
    overflow: visible;
  }

  #email-tab .email-inbox-layout .thread-list,
  #email-tab .email-inbox-layout .message-history {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }

  #email-tab .email-inbox-layout .message-history {
    min-height: calc(520px * var(--ui-scale, 1));
  }
}

@media (max-width: 600px) {
  .live-search-card,
  .search-card {
    align-items: flex-start;
  }

  .live-search-card .search-card-actions,
  .search-card .search-card-actions {
    flex: 0 0 calc(132px * var(--ui-scale, 1));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(5px * var(--ui-scale, 1));
  }

  .live-search-card .search-card-actions .small-action,
  .search-card .search-card-actions .small-action {
    width: 100%;
    min-width: 0;
    padding: calc(6px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1));
    white-space: nowrap;
  }
}

/* Final E-post 2.0 sizing overrides older mailbox rules below the main theme. */
@media (min-width: 901px) {
  #email-tab.active { display: flex; flex-direction: column; height: calc(100vh - calc(134px * var(--ui-scale, 1))); min-height: calc(620px * var(--ui-scale, 1)); }
  #email-tab .email-inbox-layout { display: grid; flex: 1 1 auto; height: auto; min-height: 0 !important; overflow: hidden !important; }
  #email-tab .email-inbox-layout .thread-list,
  #email-tab .email-inbox-layout .message-history { flex: 1 1 auto; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; }
}

#email-tab .email-more-menu #btn-delete-email {
  align-self: auto;
  width: 100%;
  height: auto;
  margin: 0;
  padding: calc(9px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
  white-space: normal;
}

/* Give each e-mail view and filter the same outlined button treatment as SMS. */
#email-tab .email-toolbar-row {
  justify-content: flex-start;
}

#email-tab .email-toolbar-tabs {
  display: flex;
  align-items: center;
  gap: calc(4px * var(--ui-scale, 1));
  padding: calc(3px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #e4e7ec;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
}

#email-tab .email-toolbar-tabs .email-folder-btn,
#email-tab .email-toolbar-tabs .ticket-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
  min-height: calc(32px * var(--ui-scale, 1));
  padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d9dee7;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
  color: #667085;
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  white-space: nowrap;
}

#email-tab .email-toolbar-tabs .email-folder-btn:hover,
#email-tab .email-toolbar-tabs .ticket-filter-btn:hover {
  border-color: #d0d5dd;
  background: #f8fafc;
}

#email-tab .email-toolbar-tabs .email-folder-btn.active,
#email-tab .email-toolbar-tabs .ticket-filter-btn.active {
  border-color: #bfe0d6;
  background: #e9f4f1;
  color: #0a5a4d;
}

#email-tab .email-toolbar-tabs .email-folder-btn span,
#email-tab .email-toolbar-tabs .filter-count {
  margin: 0;
  padding: calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  background: #efebe0;
  color: #475467;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
}

#email-tab .email-toolbar-tabs .active span,
#email-tab .email-toolbar-tabs .active .filter-count {
  background: #0d6b5c;
  color: #fff;
}

#email-tab .email-toolbar-divider {
  display: none;
}

/* Keep the e-mail heading compact so the conversation starts higher. */
#email-tab .email-page-heading {
  align-items: center;
  margin-bottom: calc(7px * var(--ui-scale, 1));
}

#email-tab .email-page-heading .eyebrow,
#email-tab .email-page-heading > div > p:not(.eyebrow) {
  display: none;
}

#email-tab .email-page-heading h1 {
  margin: 0;
  font-size: calc(24px * var(--ui-scale, 1));
}

#email-tab .email-page-heading #btn-new-email {
  min-height: calc(34px * var(--ui-scale, 1));
  padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
}

/* Give an opened e-mail substantially more reading space on desktop. */
@media (min-width: 901px) {
  #email-tab.active {
    height: auto;
    min-height: 0;
  }

  #email-tab .email-inbox-layout {
    flex: 0 0 auto;
    min-height: max(calc(820px * var(--ui-scale, 1)), calc(100vh - calc(100px * var(--ui-scale, 1)))) !important;
    height: max(calc(820px * var(--ui-scale, 1)), calc(100vh - calc(100px * var(--ui-scale, 1))));
  }

  #email-tab .conversation-panel {
    min-height: calc(820px * var(--ui-scale, 1));
  }

  #email-tab .email-inbox-layout .message-history {
    min-height: calc(600px * var(--ui-scale, 1)) !important;
  }
}

@media (max-width: 900px) {
  #email-tab .email-toolbar-row {
    display: block;
  }

  #email-tab .email-toolbar-tabs {
    width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
    gap: calc(4px * var(--ui-scale, 1));
    box-sizing: border-box;
  }

  #email-tab .email-toolbar-tabs .email-folder-btn,
  #email-tab .email-toolbar-tabs .ticket-filter-btn {
    min-height: calc(30px * var(--ui-scale, 1));
    padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
    font-size: calc(12px * var(--ui-scale, 1));
  }

  #email-tab .email-toolbar-divider {
    display: none;
  }
}

/* Forwarding selection is deliberately opt-in and uses circular selectors. */
#email-tab .email-message-select {
  display: none !important;
  flex: 0 0 calc(31px * var(--ui-scale, 1));
  width: calc(31px * var(--ui-scale, 1));
  height: calc(38px * var(--ui-scale, 1));
  margin: 0;
  place-items: center;
}

#email-tab #email-chat-history.email-forward-selecting .email-message-select {
  display: grid !important;
}

#email-tab .email-message-select input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: calc(18px * var(--ui-scale, 1));
  height: calc(18px * var(--ui-scale, 1));
  margin: 0;
  border: calc(2px * var(--ui-scale, 1)) solid #b6c1b8;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#email-tab .email-message-select input[type="checkbox"]:checked {
  border-color: #0d6b5c;
  background: #0d6b5c;
  box-shadow: inset 0 0 0 calc(3px * var(--ui-scale, 1)) #fff;
}

/* Keep the e-mail composer reachable after the expanded reading-area layout.
   The message history owns only the remaining space; the reply editor stays
   visible at the bottom instead of being pushed outside its fixed workspace. */
@media (min-width: 901px) {
  #email-tab.active {
    height: 100%;
    min-height: 0;
  }

  #email-tab .email-inbox-layout {
    flex: 1 1 auto;
    height: auto;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #email-tab .conversation-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #email-tab .email-conversation-head,
  #email-tab .email-recipient-bar,
  #email-tab .email-forward-selection-bar,
  #email-tab .ticket-compose-area {
    flex: 0 0 auto;
  }

  #email-tab #email-chat-history {
    flex: 1 1 auto;
    min-height: calc(140px * var(--ui-scale, 1)) !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  #email-tab .ticket-compose-area {
    border-top: calc(1px * var(--ui-scale, 1)) solid var(--line);
    background: #fff;
  }
}

/* On phones, the complete opened conversation is one scrollable frame so the
   reply field and its actions are never clipped below the viewport. */
@media (max-width: 900px) {
  #email-tab .email-inbox-layout.mobile-email-thread-open .conversation-panel {
    display: block;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #email-tab .email-inbox-layout.mobile-email-thread-open #email-chat-history {
    display: flex;
    flex: none;
    min-height: calc(260px * var(--ui-scale, 1)) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #email-tab .ticket-compose-area {
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  #btn-toggle-email-wide {
    display: none;
  }
}

/* E-post detail controls: keep operational controls together and metadata calm. */
#email-tab .email-heading-actions-row {
  align-items: stretch;
  flex-direction: column;
  gap: calc(7px * var(--ui-scale, 1));
}

#email-tab .ticket-controls {
  width: 100%;
}

#email-tab .email-context-labels {
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: calc(9px * var(--ui-scale, 1));
  padding-bottom: 0;
}

.email-bcc-send {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: calc(7px * var(--ui-scale, 1));
}

.email-bcc-send .recipient-row {
  flex: 1 1 auto;
  min-width: 0;
}

.email-top-send {
  min-height: calc(31px * var(--ui-scale, 1));
  padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  white-space: nowrap;
}

@media (min-width: 901px) {
  #email-tab .ticket-controls .email-more-wrap {
    align-self: flex-end;
  }
}

@media (max-width: 900px) {
  #email-tab .ticket-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) calc(42px * var(--ui-scale, 1)) !important;
    align-items: end;
  }

  #email-tab .ticket-controls > .button-contact-action,
  #email-tab #btn-claim-ticket {
    grid-column: 1 / -1 !important;
  }

  #email-tab .ticket-controls .ticket-control-group {
    grid-column: auto;
  }

  #email-tab .ticket-controls .email-more-wrap {
    grid-column: 3;
    align-self: end;
    width: calc(42px * var(--ui-scale, 1));
  }

  #email-tab .ticket-controls .email-more-button {
    width: calc(42px * var(--ui-scale, 1));
    min-width: calc(42px * var(--ui-scale, 1));
    height: calc(30px * var(--ui-scale, 1));
  }

  #email-tab .email-context-labels {
    justify-content: center;
  }
}

/* Meldinger stays compact; desktop starts at the same left edge as E-post. */
#sms-tab .sms-page-heading {
  align-items: center;
  flex-direction: column;
  margin-bottom: calc(7px * var(--ui-scale, 1));
  text-align: center;
}

#sms-tab .sms-page-heading > div {
  display: grid;
  justify-items: center;
}

#sms-tab .sms-page-heading .eyebrow {
  justify-content: center;
}

#sms-tab .sms-filter-bar {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto calc(14px * var(--ui-scale, 1));
  padding: calc(4px * var(--ui-scale, 1));
  justify-content: center;
  border: calc(1px * var(--ui-scale, 1)) solid #e4e7ec;
  border-radius: calc(14px * var(--ui-scale, 1));
  background: #fff;
}

@media (min-width: 901px) {
  #sms-tab .sms-page-heading {
    align-items: flex-start;
    text-align: left;
  }

  #sms-tab .sms-page-heading > div {
    justify-items: start;
  }

  #sms-tab .sms-page-heading .eyebrow {
    justify-content: flex-start;
  }

  #sms-tab .sms-filter-bar {
    margin: 0 0 calc(14px * var(--ui-scale, 1));
    justify-content: flex-start;
  }
}

.sms-conversation-content {
  flex: 1 1 auto;
  min-width: 0;
}

.sms-contact-meta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(7px * var(--ui-scale, 1));
  margin-top: calc(7px * var(--ui-scale, 1));
}

.sms-context-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(6px * var(--ui-scale, 1));
}

.sms-context-labels .location-pill {
  margin-top: 0;
}

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

@media (max-width: 900px) {
  #sms-tab .sms-filter-bar {
    width: 100%;
    overflow-x: visible !important;
  }

  .sms-conversation-head .sms-conversation-content {
    text-align: center;
  }

  .sms-conversation-head .conversation-kicker {
    justify-content: center;
  }

  .sms-contact-meta-actions {
    justify-content: center;
  }

  .sms-conversation-head .conversation-contact-actions {
    width: auto;
    justify-content: center;
  }
}

/* Keep e-mail context labels visually equal and anchored below the controls. */
#email-tab .email-context-labels {
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(9px * var(--ui-scale, 1));
}

#email-tab .email-context-labels > .location-pill,
#email-tab .email-context-labels > .customer-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(116px * var(--ui-scale, 1));
  height: calc(29px * var(--ui-scale, 1));
  margin: 0;
  padding: 0 calc(9px * var(--ui-scale, 1));
  box-sizing: border-box;
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1;
  white-space: nowrap;
}

/* Utvid turns the complete opened e-mail into one internal scroll frame, like
   the mobile detail view. This keeps recipients, messages and the reply editor
   inside the card instead of making the page itself grow. */
@media (min-width: 901px) {
  #email-tab.email-vertical-expanded {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #email-tab .email-inbox-layout.email-vertical-mode {
    grid-template-columns: calc(265px * var(--ui-scale, 1)) minmax(0, 1fr) !important;
    flex: 1 1 auto;
    height: auto;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #email-tab .email-inbox-layout.email-vertical-mode .thread-panel {
    display: flex !important;
  }

  #email-tab .email-inbox-layout.email-vertical-mode .conversation-panel {
    display: block;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  #email-tab .email-inbox-layout.email-vertical-mode #email-chat-history {
    display: flex;
    flex: none;
    min-height: max(calc(680px * var(--ui-scale, 1)), calc(100vh - calc(230px * var(--ui-scale, 1)))) !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* The composer can grow independently from the reading pane. Attached images
   remain visible as previews inside the compose card. */
#email-tab .email-composer.composer-expanded .email-rich-editor {
  min-height: calc(360px * var(--ui-scale, 1));
  max-height: min(56vh, calc(560px * var(--ui-scale, 1)));
}

#email-tab .email-composer.composer-expanded .email-subject-row {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

#email-tab .conversation-panel.email-composer-expanded {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#email-tab .conversation-panel.email-composer-expanded #email-chat-history {
  flex: 0 0 calc(180px * var(--ui-scale, 1));
  min-height: calc(180px * var(--ui-scale, 1)) !important;
}

#email-tab .email-composer.composer-expanded .email-attachments {
  max-height: calc(190px * var(--ui-scale, 1));
  overflow-y: auto;
}

#email-tab .email-composer-expand-button.active {
  color: #0a5a4d;
  border-color: #bfe0d6;
  background: #e9f4f1;
}

#email-tab .email-attachments {
  align-items: flex-start;
  border-top: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
  border-bottom: 0;
}

#email-tab .email-attachment-preview {
  position: relative;
  width: calc(118px * var(--ui-scale, 1));
  margin: 0;
  padding: calc(4px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d9e9e2;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
}

#email-tab .email-attachment-preview img {
  display: block;
  width: calc(108px * var(--ui-scale, 1));
  height: calc(76px * var(--ui-scale, 1));
  border-radius: calc(10px * var(--ui-scale, 1));
  object-fit: cover;
  background: #f8fafc;
}

#email-tab .email-attachment-preview figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(4px * var(--ui-scale, 1));
  padding: calc(4px * var(--ui-scale, 1)) calc(1px * var(--ui-scale, 1)) 0;
  color: #2a594c;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
}

#email-tab .email-attachment-preview figcaption span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#email-tab .email-attachment-preview button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #64748b;
  font: 700 calc(14px * var(--ui-scale, 1)) var(--font);
  line-height: 1;
  cursor: pointer;
  padding: 0 calc(1px * var(--ui-scale, 1));
}

@media (max-width: 900px) {
  #email-tab .email-composer.composer-expanded .email-rich-editor {
    min-height: calc(280px * var(--ui-scale, 1));
    max-height: 52vh;
  }

  #email-tab .email-compose-tools {
    flex-wrap: wrap;
  }

  #email-tab .email-subject-row .email-composer-expand-button {
    min-width: calc(78px * var(--ui-scale, 1));
  }
}

/* Statistics */
.statistics-page-heading {
  align-items: center;
}

.statistics-filter-panel {
  display: grid;
  grid-template-columns: auto minmax(calc(180px * var(--ui-scale, 1)), calc(240px * var(--ui-scale, 1))) 1fr;
  gap: calc(18px * var(--ui-scale, 1));
  align-items: end;
  padding: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  margin-bottom: calc(14px * var(--ui-scale, 1));
}

.statistics-day-drilldown {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-scale, 1));
  padding: calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #c9e2d9;
  border-radius: calc(14px * var(--ui-scale, 1));
  background: #f2f5f0;
}

.statistics-day-drilldown.hidden { display: none; }

.statistics-day-drilldown > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: calc(7px * var(--ui-scale, 1));
}

.statistics-day-drilldown span {
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.statistics-day-drilldown strong {
  overflow: hidden;
  color: #0a5a4d;
  font-size: calc(12px * var(--ui-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics-day-drilldown button {
  flex: 0 0 auto;
  border: calc(1px * var(--ui-scale, 1)) solid #a7cfc2;
  border-radius: calc(999px * var(--ui-scale, 1));
  background: #fff;
  color: #0d6b5c;
  padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  font: 750 calc(12px * var(--ui-scale, 1)) var(--font);
  cursor: pointer;
}

.statistics-period-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: calc(7px * var(--ui-scale, 1));
}

.statistics-period-button {
  min-height: calc(34px * var(--ui-scale, 1));
  padding: calc(7px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d9dee7;
  border-radius: calc(999px * var(--ui-scale, 1));
  background: #fff;
  color: #667085;
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.statistics-period-button:hover {
  color: var(--blue);
  border-color: #bfe0d6;
  background: #f7f6f0;
}

.statistics-period-button.active {
  color: var(--blue);
  border-color: #bfe0d6;
  background: var(--blue-soft);
}

.statistics-department-filter,
.statistics-period-caption {
  display: grid;
  gap: calc(5px * var(--ui-scale, 1));
}

.statistics-department-filter > span,
.statistics-period-caption > span {
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.statistics-department-filter select {
  width: 100%;
  min-height: calc(34px * var(--ui-scale, 1));
  padding: calc(7px * var(--ui-scale, 1)) calc(30px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d9dee7;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
  color: #344054;
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
}

.statistics-period-caption {
  justify-self: end;
  text-align: right;
}

.statistics-period-caption strong {
  color: #344054;
  font-size: calc(12px * var(--ui-scale, 1));
}

.statistics-loading,
.statistics-error {
  padding: calc(22px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  text-align: center;
}

.statistics-error {
  border-color: #eec9c9;
  background: #fcf0f0;
  color: #9c2f2f;
}

.statistics-content {
  display: grid;
  gap: calc(14px * var(--ui-scale, 1));
}

.statistics-content.hidden {
  display: none;
}

.statistics-response-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(12px * var(--ui-scale, 1));
}

.statistics-response-time-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(11px * var(--ui-scale, 1));
  padding: calc(12px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
}

.statistics-response-time-icon {
  width: calc(30px * var(--ui-scale, 1));
  height: calc(30px * var(--ui-scale, 1));
  flex: 0 0 calc(30px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  border-radius: calc(12px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
}

.statistics-response-time-icon svg {
  width: calc(16px * var(--ui-scale, 1));
  height: calc(16px * var(--ui-scale, 1));
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.statistics-response-time-card.calls .statistics-response-time-icon { color: var(--blue); background: var(--blue-soft); }
.statistics-response-time-card.sms .statistics-response-time-icon { color: #6d4382; background: #f3eef7; }
.statistics-response-time-card.email .statistics-response-time-icon { color: #0f7057; background: #e8f5ef; }

.statistics-response-time-card > div > span,
.statistics-response-time-card strong,
.statistics-response-time-card small { display: block; }
.statistics-response-time-card > div > span { color: #667085; font-size: calc(12px * var(--ui-scale, 1)); }
.statistics-response-time-card strong { margin: calc(1px * var(--ui-scale, 1)) 0; color: #182230; font: 800 calc(17px * var(--ui-scale, 1)) var(--display); }
.statistics-response-time-card small { color: #667085; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; }

.statistics-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(calc(250px * var(--ui-scale, 1)), .75fr);
  gap: calc(14px * var(--ui-scale, 1));
}

.statistics-chart-card,
.statistics-department-card,
.statistics-depot-card,
.statistics-depot-demand-card {
  min-width: 0;
  overflow: hidden;
}

.statistics-chart-card {
  display: flex;
  flex-direction: column;
}

.statistics-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(14px * var(--ui-scale, 1));
  padding: calc(16px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
}

.statistics-card-heading h2,
.statistics-channel-heading h2 {
  margin: 0 0 calc(3px * var(--ui-scale, 1));
  color: #182230;
  font: 700 calc(14px * var(--ui-scale, 1)) var(--display);
}

.statistics-card-heading p {
  margin: 0;
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
}

.statistics-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(9px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
}

.statistics-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--ui-scale, 1));
}

.statistics-chart-legend i {
  width: calc(6px * var(--ui-scale, 1));
  height: calc(6px * var(--ui-scale, 1));
  border-radius: 50%;
}

.statistics-chart-legend i.calls,
.statistics-bar.calls { background: #0d6b5c; }
.statistics-chart-legend i.sms,
.statistics-bar.sms { background: #7a4f8f; }
.statistics-chart-legend i.email,
.statistics-bar.email { background: #17835f; }

.statistics-timeline {
  width: 100%;
  min-height: calc(190px * var(--ui-scale, 1));
  flex: 1 1 auto;
  display: flex;
  overflow-x: auto;
  padding: calc(4px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  scrollbar-width: thin;
}

.statistics-chart-grid {
  min-width: max(100%, calc(var(--statistics-buckets) * calc(34px * var(--ui-scale, 1))));
  min-height: calc(190px * var(--ui-scale, 1));
  height: auto;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--statistics-buckets), minmax(calc(25px * var(--ui-scale, 1)), 1fr));
  gap: calc(4px * var(--ui-scale, 1));
  align-items: end;
  padding-top: calc(10px * var(--ui-scale, 1));
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(43px * var(--ui-scale, 1)), #e7eaf0 calc(44px * var(--ui-scale, 1)));
  border-bottom: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
}

.statistics-bar-group {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr calc(20px * var(--ui-scale, 1));
  align-items: end;
  gap: calc(4px * var(--ui-scale, 1));
}

button.statistics-bar-group {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) 0 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.statistics-bar-group.selectable {
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}

.statistics-bar-group.selectable:hover {
  background: #ecf5f1;
  transform: translateY(calc(-2px * var(--ui-scale, 1)));
}

.statistics-bar-group.selectable:focus-visible {
  outline: calc(2px * var(--ui-scale, 1)) solid #0d6b5c;
  outline-offset: calc(2px * var(--ui-scale, 1));
}

.statistics-bars {
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: calc(2px * var(--ui-scale, 1));
}

.statistics-bar {
  width: min(calc(7px * var(--ui-scale, 1)), 28%);
  height: var(--bar-height);
  min-height: 0;
  border-radius: calc(3px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1)) calc(1px * var(--ui-scale, 1)) calc(1px * var(--ui-scale, 1));
  transition: height .2s ease;
}

.statistics-axis-label {
  min-height: calc(14px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.statistics-channel-stack {
  display: grid;
  gap: calc(14px * var(--ui-scale, 1));
}

.statistics-channel-card {
  padding: calc(16px * var(--ui-scale, 1));
}

.statistics-channel-heading,
.statistics-channel-heading > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
}

.statistics-channel-heading h2 { margin: 0; }

.statistics-channel-heading > strong {
  color: #182230;
  font: 800 calc(18px * var(--ui-scale, 1)) var(--display);
}

.statistics-channel-icon {
  width: calc(29px * var(--ui-scale, 1));
  height: calc(29px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  border-radius: calc(12px * var(--ui-scale, 1));
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 800;
}

.statistics-channel-card.sms .statistics-channel-icon { color: #6d4382; background: #f3eef7; }
.statistics-channel-card.email .statistics-channel-icon { color: #0f7057; background: #e8f5ef; }
.statistics-channel-card.calls .statistics-channel-icon { color: var(--blue); background: var(--blue-soft); }

.statistics-progress {
  height: calc(6px * var(--ui-scale, 1));
  margin: calc(14px * var(--ui-scale, 1)) 0 calc(12px * var(--ui-scale, 1));
  overflow: hidden;
  border-radius: calc(10px * var(--ui-scale, 1));
  background: #e7eaf0;
}

.statistics-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .25s ease;
}

.statistics-channel-card.sms .statistics-progress span { background: #7a4f8f; }
.statistics-channel-card.email .statistics-progress span { background: #17835f; }
.statistics-channel-card.calls .statistics-progress span { background: #0d6b5c; }

.statistics-channel-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(7px * var(--ui-scale, 1));
}

.statistics-channel-values span {
  min-width: 0;
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
}

.statistics-channel-values strong {
  display: block;
  margin-top: calc(2px * var(--ui-scale, 1));
  color: #344054;
  font-size: calc(13px * var(--ui-scale, 1));
}

.statistics-channel-secondary {
  margin: calc(10px * var(--ui-scale, 1)) 0 0;
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
}

.statistics-channel-secondary strong {
  margin-left: calc(3px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
}

.statistics-depot-demand {
  display: grid;
  gap: calc(4px * var(--ui-scale, 1));
  padding: calc(4px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
}

.statistics-depot-demand-row {
  display: grid;
  grid-template-columns: minmax(calc(150px * var(--ui-scale, 1)), .7fr) minmax(calc(280px * var(--ui-scale, 1)), 1.7fr) calc(44px * var(--ui-scale, 1));
  align-items: center;
  gap: calc(16px * var(--ui-scale, 1));
  padding: calc(12px * var(--ui-scale, 1)) 0;
  border-top: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
}

.statistics-depot-demand-row:first-child { border-top: 0; }

.statistics-depot-demand-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-scale, 1));
}

.statistics-depot-demand-name > span {
  width: calc(24px * var(--ui-scale, 1));
  height: calc(24px * var(--ui-scale, 1));
  flex: 0 0 calc(24px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf2ed;
  color: var(--blue);
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
}

.statistics-depot-demand-name strong,
.statistics-depot-demand-name small { display: block; }
.statistics-depot-demand-name strong { overflow: hidden; color: #182230; font-size: calc(12px * var(--ui-scale, 1)); text-overflow: ellipsis; white-space: nowrap; }
.statistics-depot-demand-name small { margin-top: calc(2px * var(--ui-scale, 1)); color: #667085; font-size: calc(12px * var(--ui-scale, 1)); }

.statistics-depot-demand-visual { min-width: 0; }
.statistics-depot-demand-track { height: calc(12px * var(--ui-scale, 1)); overflow: hidden; border-radius: calc(999px * var(--ui-scale, 1)); background: #e7eaf0; }
.statistics-depot-demand-fill { height: 100%; display: flex; overflow: hidden; border-radius: inherit; transition: width .25s ease; }
.statistics-depot-demand-fill i { display: block; height: 100%; }
.statistics-depot-demand-fill i.calls { background: #0d6b5c; }
.statistics-depot-demand-fill i.sms { background: #7a4f8f; }
.statistics-depot-demand-fill i.email { background: #17835f; }

.statistics-depot-demand-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(8px * var(--ui-scale, 1));
  margin-top: calc(7px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
}

.statistics-depot-demand-values span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4px * var(--ui-scale, 1));
  white-space: nowrap;
}

.statistics-depot-demand-values span::before {
  width: calc(6px * var(--ui-scale, 1));
  height: calc(6px * var(--ui-scale, 1));
  flex: 0 0 calc(6px * var(--ui-scale, 1));
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.statistics-depot-demand-values .calls { color: #0d6b5c; }
.statistics-depot-demand-values .sms { color: #7a4f8f; }
.statistics-depot-demand-values .email { color: #17835f; }
.statistics-depot-demand-values strong { color: #667085; font-size: calc(12px * var(--ui-scale, 1)); }
.statistics-depot-demand-total { color: #182230; font: 800 calc(18px * var(--ui-scale, 1)) var(--display); text-align: right; }
.statistics-depot-demand-empty { margin: 0; padding: calc(24px * var(--ui-scale, 1)) 0; color: #667085; font-size: calc(12px * var(--ui-scale, 1)); text-align: center; }

.statistics-table-wrap {
  overflow-x: auto;
}

.statistics-table {
  width: 100%;
  border-collapse: collapse;
  color: #475467;
  font-size: calc(12px * var(--ui-scale, 1));
}

.statistics-table th,
.statistics-table td {
  padding: calc(10px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));
  border-top: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
  text-align: left;
  white-space: nowrap;
}

.statistics-table th {
  color: #667085;
  background: #f8fafc;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.statistics-table td strong { color: #182230; font-size: calc(12px * var(--ui-scale, 1)); }
.statistics-table td small { display: block; margin-top: calc(2px * var(--ui-scale, 1)); color: #667085; font-size: calc(12px * var(--ui-scale, 1)); }
.statistics-rate-pill { display: inline-block; padding: calc(3px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1)); border-radius: calc(12px * var(--ui-scale, 1)); background: #e8f5ef; color: #0c6647; font-weight: 800; }
.statistics-table-empty { height: calc(74px * var(--ui-scale, 1)); color: #667085; text-align: center !important; }

.statistics-method-note {
  margin: calc(-3px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) 0;
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1.45;
}

/* Visual comparison: handled interactions per agent over the selected period. */
.statistics-agent-card {
  min-width: 0;
  overflow: hidden;
}

.statistics-agent-heading {
  align-items: flex-start;
  padding-bottom: calc(4px * var(--ui-scale, 1));
}

.statistics-agent-controls {
  display: grid;
  justify-items: end;
  gap: calc(8px * var(--ui-scale, 1));
  min-width: 0;
}

.statistics-agent-legend {
  max-width: 68%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(6px * var(--ui-scale, 1));
}

.statistics-agent-select {
  display: inline-grid;
  grid-template-columns: auto minmax(calc(170px * var(--ui-scale, 1)), calc(250px * var(--ui-scale, 1)));
  align-items: center;
  gap: calc(7px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
}

.statistics-agent-select select {
  min-width: 0;
  height: calc(30px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d0d5dd;
  border-radius: calc(999px * var(--ui-scale, 1));
  background: #fff;
  color: #344054;
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  padding: 0 calc(26px * var(--ui-scale, 1)) 0 calc(10px * var(--ui-scale, 1));
}

.statistics-agent-key {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #e1dacb;
  border-radius: calc(999px * var(--ui-scale, 1));
  background: #fff;
  color: #344054;
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  cursor: pointer;
  transition: opacity .18s ease, background .18s ease, border-color .18s ease;
}

.statistics-agent-key:hover {
  border-color: color-mix(in srgb, var(--agent-color) 45%, #d0d5dd);
  background: #f8fafc;
}

.statistics-agent-key.muted {
  opacity: .42;
}

.statistics-agent-key > i {
  width: calc(8px * var(--ui-scale, 1));
  height: calc(8px * var(--ui-scale, 1));
  flex: 0 0 calc(8px * var(--ui-scale, 1));
  border-radius: 50%;
  background: var(--agent-color);
  box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) color-mix(in srgb, var(--agent-color) 14%, transparent);
}

.statistics-agent-key span,
.statistics-agent-key strong,
.statistics-agent-key small {
  min-width: 0;
  display: block;
  text-align: left;
  white-space: nowrap;
}

.statistics-agent-key small {
  margin-top: calc(1px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 600;
}

.statistics-agent-chart {
  width: 100%;
  min-height: calc(300px * var(--ui-scale, 1));
  padding: calc(2px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
}

.statistics-agent-chart-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.statistics-agent-chart svg {
  display: block;
  max-width: none;
}

.statistics-agent-hourly {
  margin: 0 calc(18px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));
  padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
  border-radius: calc(14px * var(--ui-scale, 1));
  background: linear-gradient(145deg, #fff, #fbfaf5);
}

.statistics-hourly-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16px * var(--ui-scale, 1));
  margin-bottom: calc(12px * var(--ui-scale, 1));
}

.statistics-hourly-heading h3 {
  margin: 0;
  color: #182230;
  font: 750 calc(13px * var(--ui-scale, 1)) var(--display);
}

.statistics-hourly-heading p,
.statistics-hourly-note {
  margin: calc(3px * var(--ui-scale, 1)) 0 0;
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1.4;
}

.statistics-hourly-summary {
  display: grid;
  justify-items: end;
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  white-space: nowrap;
}

.statistics-hourly-summary strong {
  color: #0d6b5c;
  font: 800 calc(18px * var(--ui-scale, 1)) var(--display);
  line-height: 1;
}

.statistics-hourly-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(6px * var(--ui-scale, 1));
  align-items: end;
}

.statistics-hourly-slot {
  display: grid;
  grid-template-rows: auto calc(68px * var(--ui-scale, 1)) auto;
  justify-items: center;
  gap: calc(4px * var(--ui-scale, 1));
  min-width: 0;
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
}

.statistics-hourly-slot > span,
.statistics-hourly-slot > strong { white-space: nowrap; }
.statistics-hourly-slot > strong { color: #475467; font-size: calc(12px * var(--ui-scale, 1)); }

.statistics-hourly-track {
  width: 100%;
  height: calc(68px * var(--ui-scale, 1));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #eaf2ee;
}

.statistics-hourly-track i {
  width: 100%;
  height: var(--hourly-load, 0%);
  border-radius: calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  background: linear-gradient(180deg, #3f8f7c, #0d6b5c);
  transition: height .25s ease;
}

.statistics-agent-grid line {
  stroke: #e8e2d6;
  stroke-width: 1;
}

.statistics-agent-grid text,
.statistics-agent-axis-label {
  fill: #9aa39c;
  font: calc(12px * var(--ui-scale, 1)) var(--font);
}

.statistics-agent-series path {
  fill: none;
  stroke: var(--agent-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.statistics-agent-series circle {
  fill: #fff;
  stroke: var(--agent-color);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.statistics-agent-empty,
.statistics-ring-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: calc(36px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  text-align: center;
}

/* Apple Watch-inspired rings provide a compact three-channel answer-rate view. */
.statistics-ring-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(14px * var(--ui-scale, 1));
}

.statistics-ring-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10px * var(--ui-scale, 1));
  padding: calc(6px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
}

.statistics-ring-item {
  min-width: 0;
  display: grid;
  grid-template-columns: calc(136px * var(--ui-scale, 1)) minmax(0, 1fr);
  align-items: center;
  gap: calc(13px * var(--ui-scale, 1));
  min-height: calc(160px * var(--ui-scale, 1));
  padding: calc(12px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
  border-radius: calc(14px * var(--ui-scale, 1));
  background: linear-gradient(145deg, #fff, #fbfaf5);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.statistics-ring-item:hover {
  transform: translateY(calc(-2px * var(--ui-scale, 1)));
  border-color: #d0d5dd;
  box-shadow: 0 calc(10px * var(--ui-scale, 1)) calc(25px * var(--ui-scale, 1)) calc(-5px * var(--ui-scale, 1)) rgba(10, 35, 31, 0.08), 0 calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(-4px * var(--ui-scale, 1)) rgba(10, 35, 31, 0.04);
}

.statistics-ring-item:focus-visible {
  outline: calc(2px * var(--ui-scale, 1)) solid #0d6b5c;
  outline-offset: calc(2px * var(--ui-scale, 1));
}

.statistics-ring-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6px * var(--ui-scale, 1));
  margin-bottom: calc(8px * var(--ui-scale, 1));
}

.statistics-ring-header-row h3 {
  margin: 0;
}

.statistics-ring-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(18px * var(--ui-scale, 1));
  height: calc(18px * var(--ui-scale, 1));
  border-radius: calc(10px * var(--ui-scale, 1));
  background: #f8fafc;
  color: #64748b;
  font-size: calc(12px * var(--ui-scale, 1));
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.statistics-ring-item:hover .statistics-ring-expand-icon {
  opacity: 1;
  background: #eef2f6;
  color: #0a231f;
}

.statistics-rings {
  position: relative;
  width: calc(136px * var(--ui-scale, 1));
  height: calc(136px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
}

.statistics-response-ring {
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--ring-rate) * 1%), #e9e3d7 0);
  transform: rotate(-90deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - calc(8px * var(--ui-scale, 1))), #000 calc(100% - calc(7px * var(--ui-scale, 1))));
  mask: radial-gradient(farthest-side, transparent calc(100% - calc(8px * var(--ui-scale, 1))), #000 calc(100% - calc(7px * var(--ui-scale, 1))));
}

.statistics-response-ring.calls { inset: 0; --ring-color: #0d6b5c; }
.statistics-response-ring.sms { inset: calc(15px * var(--ui-scale, 1)); --ring-color: #7a4f8f; }
.statistics-response-ring.email { inset: calc(30px * var(--ui-scale, 1)); --ring-color: #17835f; }

.statistics-ring-center {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  line-height: 1;
}

.statistics-ring-center strong {
  color: #182230;
  font: 800 calc(17px * var(--ui-scale, 1)) var(--display);
}

.statistics-ring-center small {
  margin-top: calc(3px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
}

.statistics-ring-copy {
  min-width: 0;
}

.statistics-ring-copy h3 {
  overflow: hidden;
  margin: 0 0 calc(8px * var(--ui-scale, 1));
  color: #182230;
  font: 750 calc(12px * var(--ui-scale, 1)) var(--display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistics-ring-values {
  display: grid;
  gap: calc(5px * var(--ui-scale, 1));
}

.statistics-ring-values > span {
  display: grid;
  grid-template-columns: calc(7px * var(--ui-scale, 1)) 1fr auto;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
}

.statistics-ring-values > span > i {
  width: calc(7px * var(--ui-scale, 1));
  height: calc(7px * var(--ui-scale, 1));
  border-radius: 50%;
  background: currentColor;
}

.statistics-ring-values .calls { color: #0d6b5c; }
.statistics-ring-values .sms { color: #7a4f8f; }
.statistics-ring-values .email { color: #17835f; }
.statistics-ring-values strong { color: #344054; font-size: calc(12px * var(--ui-scale, 1)); }
.statistics-ring-values span span { color: #667085; }
.statistics-ring-values small { display: block; margin-top: calc(1px * var(--ui-scale, 1)); color: #667085; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 600; }

.statistics-ring-copy p {
  margin: calc(9px * var(--ui-scale, 1)) 0 0;
  color: #667085;
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1.4;
}

/* Statistics Concentric Ring Detail Modal */
.statistics-ring-modal-card {
  max-width: calc(760px * var(--ui-scale, 1));
  width: 92vw;
  padding: calc(24px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1));
  border-radius: calc(18px * var(--ui-scale, 1));
  background: #ffffff;
  box-shadow: 0 calc(25px * var(--ui-scale, 1)) calc(60px * var(--ui-scale, 1)) calc(-15px * var(--ui-scale, 1)) rgba(10, 35, 31, 0.25);
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.statistics-ring-modal-header {
  margin-bottom: calc(20px * var(--ui-scale, 1));
  padding-bottom: calc(14px * var(--ui-scale, 1));
  border-bottom: calc(1px * var(--ui-scale, 1)) solid #f8fafc;
}

.statistics-ring-modal-header h2 {
  font-size: calc(22px * var(--ui-scale, 1));
  font-weight: 800;
  color: #0a231f;
  margin: calc(4px * var(--ui-scale, 1)) 0 calc(2px * var(--ui-scale, 1));
}

.statistics-ring-modal-header .modal-description {
  color: #64748b;
  font-size: calc(13px * var(--ui-scale, 1));
  margin: 0;
}

.statistics-ring-modal-body {
  display: flex;
  flex-direction: column;
  gap: calc(18px * var(--ui-scale, 1));
}

.statistics-ring-modal-visual {
  display: grid;
  grid-template-columns: calc(240px * var(--ui-scale, 1)) minmax(0, 1fr);
  gap: calc(22px * var(--ui-scale, 1));
  align-items: center;
}

.statistics-ring-modal-rings-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14px * var(--ui-scale, 1));
  padding: calc(16px * var(--ui-scale, 1));
  background: #f8fafc;
  border-radius: calc(14px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
}

.statistics-rings.modal-rings {
  width: calc(190px * var(--ui-scale, 1));
  height: calc(190px * var(--ui-scale, 1));
}

.modal-rings .statistics-response-ring {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - calc(13px * var(--ui-scale, 1))), #000 calc(100% - calc(12px * var(--ui-scale, 1))));
  mask: radial-gradient(farthest-side, transparent calc(100% - calc(13px * var(--ui-scale, 1))), #000 calc(100% - calc(12px * var(--ui-scale, 1))));
}

.modal-rings .statistics-response-ring.calls { inset: 0; }
.modal-rings .statistics-response-ring.sms { inset: calc(22px * var(--ui-scale, 1)); }
.modal-rings .statistics-response-ring.email { inset: calc(44px * var(--ui-scale, 1)); }

.modal-ring-center strong {
  font-size: calc(26px * var(--ui-scale, 1));
  font-weight: 800;
  color: #0a231f;
}

.modal-ring-center small {
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: calc(0.5px * var(--ui-scale, 1));
}

.statistics-ring-modal-legend {
  display: flex;
  gap: calc(14px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 600;
  color: #64748b;
}

.statistics-ring-modal-legend > span {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
}

.statistics-ring-modal-legend i {
  width: calc(9px * var(--ui-scale, 1));
  height: calc(9px * var(--ui-scale, 1));
  border-radius: 50%;
}
.statistics-ring-modal-legend .calls { background: #0d6b5c; }
.statistics-ring-modal-legend .sms { background: #7a4f8f; }
.statistics-ring-modal-legend .email { background: #17835f; }

.statistics-ring-modal-channel-grid {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-scale, 1));
}

.modal-channel-card {
  border-radius: calc(14px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
  padding: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  background: #ffffff;
  box-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1)) rgba(10, 35, 31, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.modal-channel-card:hover {
  border-color: #d0d5dd;
  box-shadow: 0 calc(4px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) rgba(10, 35, 31, 0.06);
}

.modal-channel-card.calls { border-left: calc(4px * var(--ui-scale, 1)) solid #0d6b5c; }
.modal-channel-card.sms { border-left: calc(4px * var(--ui-scale, 1)) solid #7a4f8f; }
.modal-channel-card.email { border-left: calc(4px * var(--ui-scale, 1)) solid #17835f; }

.modal-channel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(8px * var(--ui-scale, 1));
}

.modal-channel-title {
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
}
.modal-channel-card.calls .modal-channel-title { color: #0d6b5c; }
.modal-channel-card.sms .modal-channel-title { color: #7a4f8f; }
.modal-channel-card.email .modal-channel-title { color: #17835f; }

.modal-channel-rate-badge {
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  padding: calc(3px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border-radius: calc(10px * var(--ui-scale, 1));
  background: #f8fafc;
  color: #1e2a25;
}

.modal-channel-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(8px * var(--ui-scale, 1));
}

.modal-channel-stat-item {
  display: flex;
  flex-direction: column;
}

.modal-channel-stat-item small {
  font-size: calc(12px * var(--ui-scale, 1));
  color: #64748b;
  font-weight: 600;
}

.modal-channel-stat-item strong {
  font-size: calc(14px * var(--ui-scale, 1));
  font-weight: 750;
  color: #0a231f;
  margin-top: calc(1px * var(--ui-scale, 1));
}

.statistics-ring-modal-distribution {
  background: #f8fafc;
  border: calc(1px * var(--ui-scale, 1)) solid #e7eaf0;
  border-radius: calc(14px * var(--ui-scale, 1));
  padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
}

.statistics-ring-modal-dist-header {
  display: flex;
  justify-content: space-between;
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  color: #334155;
  margin-bottom: calc(8px * var(--ui-scale, 1));
}

.statistics-ring-modal-dist-bar {
  display: flex;
  height: calc(10px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  overflow: hidden;
  background: #eef2f6;
  gap: calc(2px * var(--ui-scale, 1));
}

.statistics-ring-modal-dist-bar > span {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.statistics-ring-modal-dist-bar .calls { background: #0d6b5c; }
.statistics-ring-modal-dist-bar .sms { background: #7a4f8f; }
.statistics-ring-modal-dist-bar .email { background: #17835f; }

@media (max-width: 640px) {
  #statistics-ring-modal {
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(12px * var(--ui-scale, 1));
  }

  #statistics-ring-modal .statistics-ring-modal-card {
    width: 100%;
    max-height: calc(100dvh - calc(24px * var(--ui-scale, 1)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    margin: 0;
  }

  .statistics-ring-modal-visual {
    grid-template-columns: 1fr;
  }
  .modal-channel-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: calc(8px * var(--ui-scale, 1));
  }
}

@media (max-width: 1100px) {
  .statistics-filter-panel { grid-template-columns: 1fr calc(210px * var(--ui-scale, 1)); }
  .statistics-period-caption { display: none; }
  .statistics-response-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .statistics-main-grid { grid-template-columns: 1fr; }
  .statistics-ring-sections { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .statistics-page-heading { flex-direction: row; align-items: flex-end; }
  .statistics-page-heading > div > p:not(.eyebrow) { max-width: calc(250px * var(--ui-scale, 1)); }
  .statistics-filter-panel { grid-template-columns: 1fr; gap: calc(10px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)); }
  .statistics-day-drilldown { align-items: flex-start; flex-direction: column; }
  .statistics-period-filter { display: grid; grid-template-columns: 1fr 1fr; }
  .statistics-period-button { width: 100%; }
  .statistics-department-filter.single-option { display: none; }
  .statistics-response-time-grid { grid-template-columns: 1fr; gap: calc(8px * var(--ui-scale, 1)); }
  .statistics-response-time-card { padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); }
  .statistics-card-heading { flex-direction: column; padding: calc(14px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1)); }
  .statistics-chart-legend { justify-content: flex-start; }
  .statistics-timeline { padding: calc(4px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1)); }
  .statistics-depot-demand { padding: calc(2px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); }
  .statistics-depot-demand-row { grid-template-columns: 1fr auto; gap: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); }
  .statistics-depot-demand-visual { grid-column: 1 / -1; }
  .statistics-depot-demand-total { grid-column: 2; grid-row: 1; }
  .statistics-table th, .statistics-table td { padding: calc(9px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); }
  .statistics-agent-heading { display: block; }
  .statistics-agent-controls { justify-items: start; margin-top: calc(10px * var(--ui-scale, 1)); }
  .statistics-agent-legend { max-width: 100%; justify-content: flex-start; margin-top: calc(10px * var(--ui-scale, 1)); }
  .statistics-agent-select { grid-template-columns: 1fr; justify-items: start; }
  .statistics-agent-select select { width: min(100%, calc(300px * var(--ui-scale, 1))); }
  .statistics-agent-chart { min-height: calc(275px * var(--ui-scale, 1)); padding: calc(2px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); }
  .statistics-agent-key { flex: 1 1 calc(50% - calc(6px * var(--ui-scale, 1))); border-radius: calc(12px * var(--ui-scale, 1)); }
  .statistics-agent-hourly { margin: 0 calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); padding: calc(12px * var(--ui-scale, 1)); }
  .statistics-hourly-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .statistics-ring-grid { grid-template-columns: 1fr; padding: calc(6px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); }
  .statistics-ring-item { grid-template-columns: calc(108px * var(--ui-scale, 1)) minmax(0, 1fr); min-height: calc(132px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)); }
  .statistics-rings { width: calc(108px * var(--ui-scale, 1)); height: calc(108px * var(--ui-scale, 1)); }
}

/* Readability scale: enlarge content text only. Controls, badges, labels,
   icons, padding and card dimensions deliberately keep their compact size. */
.page-heading h1,
.customer-detail-heading h3,
.modal-card h2,
.incoming-call h2 {
  font-size: calc(28.6px * var(--ui-scale, 1));
}

.customer-detail-heading h3 { font-size: calc(19.8px * var(--ui-scale, 1)); }
.modal-card h2 { font-size: calc(22px * var(--ui-scale, 1)); }
.incoming-call h2 { font-size: calc(27.5px * var(--ui-scale, 1)); }

.page-heading > div > p:not(.eyebrow),
.modal-description { font-size: calc(14.3px * var(--ui-scale, 1)); }
.page-heading > div > p:not(.eyebrow) { font-size: calc(14.85px * var(--ui-scale, 1)); }
.surface-heading p,
.rail-heading p,
.customer-detail-heading small,
.service-card p { font-size: calc(12.65px * var(--ui-scale, 1)); }
.customer-detail-heading p { font-size: calc(13.75px * var(--ui-scale, 1)); }

.surface-heading h2,
.rail-heading h2,
.thread-panel-head h2,
.statistics-channel-heading h2 {
  font-size: calc(16.5px * var(--ui-scale, 1));
}
.conversation-head h2 { font-size: calc(17.6px * var(--ui-scale, 1)); }
.history-column-heading h3,
.recent-contact-section h3 { font-size: calc(14.3px * var(--ui-scale, 1)); }

.metric-card span,
.search-card-main p,
.customer-name small,
.customer-contact,
.thread-item p { font-size: calc(12.65px * var(--ui-scale, 1)); }
.metric-card small,
.thread-meta,
.email-forwarded-card header strong { font-size: calc(12px * var(--ui-scale, 1)); }
.email-message-card-head span,
.email-message-card-head time { font-size: calc(12px * var(--ui-scale, 1)); }
.email-forwarded-body { font-size: calc(13.31px * var(--ui-scale, 1)); }
.statistics-channel-values span,
.statistics-channel-secondary,
.statistics-method-note { font-size: calc(12px * var(--ui-scale, 1)); }
.statistics-depot-demand-name small,
.statistics-depot-demand-values,
.statistics-table td small { font-size: calc(12px * var(--ui-scale, 1)); }
.statistics-table { font-size: calc(12px * var(--ui-scale, 1)); }

.metric-card strong,
.statistics-channel-heading > strong,
.statistics-depot-demand-total {
  font-size: calc(19.8px * var(--ui-scale, 1));
}
.metric-card strong { font-size: calc(25.3px * var(--ui-scale, 1)); }
.service-card strong { font-size: calc(18.7px * var(--ui-scale, 1)); }

.search-card-main strong,
.customer-name strong,
.thread-item strong { font-size: calc(14.3px * var(--ui-scale, 1)); }
.history-message strong,
.email-message-card-head strong { font-size: calc(13.2px * var(--ui-scale, 1)); }
.statistics-depot-demand-name strong,
.statistics-table td strong { font-size: calc(12.1px * var(--ui-scale, 1)); }

.message-bubble { font-size: calc(14.85px * var(--ui-scale, 1)); }
.history-message p,
.email-rich-editor { font-size: calc(13.2px * var(--ui-scale, 1)); }
.email-body-html { font-size: calc(14.52px * var(--ui-scale, 1)); }

.call-number { font-size: calc(19.8px * var(--ui-scale, 1)); }
.call-details strong { font-size: calc(15.4px * var(--ui-scale, 1)); }
.recent-message p { font-size: calc(13.2px * var(--ui-scale, 1)); }

@media (max-width: 600px) {
  .incoming-call h2 { font-size: calc(22px * var(--ui-scale, 1)); }
}

/* Persistent workspace theme */
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
  padding: 0 calc(6px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));
  flex-shrink: 0;
}

.brand-row .brand {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  flex: 0 0 auto;
}

.sidebar-header-actions .softphone-toggle,
.sidebar-header-actions .notification-toggle,
.sidebar-header-actions .theme-toggle {
  width: calc(34px * var(--ui-scale, 1)) !important;
  height: calc(34px * var(--ui-scale, 1)) !important;
  flex: 0 0 calc(34px * var(--ui-scale, 1)) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: calc(1px * var(--ui-scale, 1)) solid #1f4239 !important;
  border-radius: calc(12px * var(--ui-scale, 1)) !important;
  background: #17352e !important;
  color: #9db0a8 !important;
  cursor: pointer;
  transition: all .2s ease;
  box-sizing: border-box;
}

.sidebar-header-actions .softphone-toggle:hover:not(.active),
.sidebar-header-actions .notification-toggle:hover,
.sidebar-header-actions .theme-toggle:hover {
  background: #1e453c !important;
  border-color: #2b594d !important;
  color: #fff !important;
  transform: translateY(calc(-1px * var(--ui-scale, 1)));
}

.sidebar-header-actions .softphone-toggle svg {
  width: calc(17px * var(--ui-scale, 1));
  height: calc(17px * var(--ui-scale, 1));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-header-actions .softphone-toggle.active {
  color: #fff !important;
  background: #15714e !important;
  border-color: #2fa678 !important;
  box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(47, 166, 120, .25) !important;
}

.sidebar-header-actions .notification-toggle {
  font-size: calc(16px * var(--ui-scale, 1)) !important;
  line-height: 1 !important;
}

.sidebar-header-actions .notification-toggle.notification-enabled {
  background: rgba(138, 208, 192, 0.16) !important;
  border-color: #2fa678 !important;
  color: #8ad0c0 !important;
}

.sidebar-header-actions .notification-toggle.notification-disabled {
  background: #17352e !important;
  border-color: #1f4239 !important;
  color: #728a82 !important;
  opacity: 0.75;
}

.sidebar-header-actions .notification-toggle.notification-blocked {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: #dc2626 !important;
  color: #f87171 !important;
}

.theme-toggle {
  width: calc(34px * var(--ui-scale, 1));
  height: calc(34px * var(--ui-scale, 1));
  flex: 0 0 calc(34px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  padding: 0;
  border: calc(1px * var(--ui-scale, 1)) solid #334155;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #17352e;
  color: #64748b;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.theme-toggle:hover { color: #cfd8d2; border-color: #4c5c54; transform: translateY(calc(-1px * var(--ui-scale, 1))); }
.theme-toggle:focus-visible { outline: calc(2px * var(--ui-scale, 1)) solid #9ccfbf; outline-offset: calc(2px * var(--ui-scale, 1)); }
.theme-toggle svg { width: calc(19px * var(--ui-scale, 1)); height: calc(19px * var(--ui-scale, 1)); fill: currentColor; }
.theme-toggle { position: relative; }
html[data-theme="dark"] .theme-toggle,
.theme-toggle[aria-expanded="true"] {
  color: #d99a3d;
  background: rgba(217, 154, 61, .12);
  border-color: rgba(217, 154, 61, .55);
  box-shadow: 0 0 calc(16px * var(--ui-scale, 1)) rgba(217, 154, 61, .16);
}
html[data-theme="dark"] .theme-toggle:hover,
.theme-toggle[aria-expanded="true"]:hover { color: #e8b45e; border-color: #d99a3d; }

/* Theme picker (Fjord / Havn / Terrakotta / Grafitt x lys / mørk) */
.theme-picker-trigger .theme-icon-sun { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-picker-trigger .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-picker-trigger .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-picker-trigger .theme-icon-moon { display: block; }
.theme-trigger-dot {
  position: absolute; right: calc(4px * var(--ui-scale, 1)); bottom: calc(4px * var(--ui-scale, 1)); width: calc(8px * var(--ui-scale, 1)); height: calc(8px * var(--ui-scale, 1)); border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 calc(2px * var(--ui-scale, 1)) var(--sidebar);
}
.theme-picker-topbar { display: none !important; position: relative; }
.theme-picker-topbar svg { width: calc(18px * var(--ui-scale, 1)); height: calc(18px * var(--ui-scale, 1)); fill: currentColor; }
.theme-picker-topbar .theme-trigger-dot { box-shadow: 0 0 0 calc(2px * var(--ui-scale, 1)) var(--surface); right: calc(3px * var(--ui-scale, 1)); bottom: calc(3px * var(--ui-scale, 1)); }
@media (max-width: 900px) {
  .theme-picker-topbar { display: inline-flex !important; align-items: center; justify-content: center; width: calc(44px * var(--ui-scale, 1)); min-width: calc(44px * var(--ui-scale, 1)); height: calc(44px * var(--ui-scale, 1)); min-height: calc(44px * var(--ui-scale, 1)); padding: 0 !important; }
  .theme-picker-topbar .theme-icon-moon { display: none; }
  html[data-theme="dark"] .theme-picker-topbar .theme-icon-moon { display: block; }
}
.theme-picker {
  position: fixed; z-index: 60; width: calc(340px * var(--ui-scale, 1)); max-width: calc(100vw - calc(24px * var(--ui-scale, 1)));
  background: var(--surface); color: var(--ink); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(16px * var(--ui-scale, 1));
  box-shadow: 0 calc(18px * var(--ui-scale, 1)) calc(48px * var(--ui-scale, 1)) rgba(15, 23, 42, .22); padding: calc(14px * var(--ui-scale, 1));
}
.theme-picker[hidden] { display: none; }
.theme-picker-head h2 { font: 700 calc(15px * var(--ui-scale, 1)) var(--display); margin: 0 0 calc(3px * var(--ui-scale, 1)); letter-spacing: calc(-.2px * var(--ui-scale, 1)); }
.theme-picker-head p { margin: 0 0 calc(10px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); line-height: 1.4; }
.theme-picker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(6px * var(--ui-scale, 1)); }
.theme-option {
  display: flex; align-items: center; gap: calc(10px * var(--ui-scale, 1)); padding: calc(7px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)); border-radius: calc(12px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid transparent;
}
.theme-option.is-active { border-color: var(--line); background: var(--canvas); }
.theme-option-text { flex: 1; min-width: 0; }
.theme-option-text strong { display: flex; align-items: center; gap: calc(6px * var(--ui-scale, 1)); font-size: calc(14px * var(--ui-scale, 1)); }
.theme-option.is-active .theme-option-text strong::after {
  content: 'Aktiv'; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; color: var(--blue); background: var(--blue-soft); border-radius: calc(10px * var(--ui-scale, 1)); padding: calc(1px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
}
.theme-option-text small { display: block; font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); margin-top: calc(1px * var(--ui-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-swatch { flex: 0 0 calc(34px * var(--ui-scale, 1)); width: calc(34px * var(--ui-scale, 1)); height: calc(34px * var(--ui-scale, 1)); border-radius: calc(10px * var(--ui-scale, 1)); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; box-shadow: inset 0 0 0 calc(1px * var(--ui-scale, 1)) rgba(15, 23, 42, .12); }
.theme-swatch i:first-child { grid-row: 1 / 3; }
.theme-swatch--fjord i:nth-child(1) { background: #0e2c26; }
.theme-swatch--fjord i:nth-child(2) { background: #0d6b5c; }
.theme-swatch--fjord i:nth-child(3) { background: #f7f8fa; }
.theme-swatch--havn i:nth-child(1) { background: #0b1f3a; }
.theme-swatch--havn i:nth-child(2) { background: #1d4ed8; }
.theme-swatch--havn i:nth-child(3) { background: #f1f5fa; }
.theme-swatch--terrakotta i:nth-child(1) { background: #24282c; }
.theme-swatch--terrakotta i:nth-child(2) { background: #a8441c; }
.theme-swatch--terrakotta i:nth-child(3) { background: #f8f1e8; }
.theme-swatch--grafitt i:nth-child(1) { background: #151515; }
.theme-swatch--grafitt i:nth-child(2) { background: #c0176a; }
.theme-swatch--grafitt i:nth-child(3) { background: #f3f3f3; }
.theme-mode-buttons { display: flex; gap: calc(4px * var(--ui-scale, 1)); }
.theme-mode-btn {
  width: calc(40px * var(--ui-scale, 1)); height: calc(40px * var(--ui-scale, 1)); display: grid; place-items: center; padding: 0; cursor: pointer;
  border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(12px * var(--ui-scale, 1)); background: var(--surface); color: var(--muted);
}
.theme-mode-btn svg { width: calc(18px * var(--ui-scale, 1)); height: calc(18px * var(--ui-scale, 1)); fill: currentColor; }
.theme-mode-btn[data-theme-mode="light"] svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-mode-btn:hover { color: var(--ink); border-color: var(--muted); }
.theme-mode-btn[aria-pressed="true"] { color: var(--blue); background: var(--blue-soft); border: calc(2px * var(--ui-scale, 1)) solid var(--blue); }
.theme-mode-btn:focus-visible { outline: calc(2px * var(--ui-scale, 1)) solid var(--blue); outline-offset: calc(2px * var(--ui-scale, 1)); }
@media (max-width: 900px) {
  .theme-picker.is-sheet { left: calc(12px * var(--ui-scale, 1)) !important; right: calc(12px * var(--ui-scale, 1)); top: calc(68px * var(--ui-scale, 1)) !important; width: auto; max-width: calc(420px * var(--ui-scale, 1)); margin: 0 auto; }
  .theme-mode-btn { width: calc(44px * var(--ui-scale, 1)); height: calc(44px * var(--ui-scale, 1)); }
  .theme-option { padding: calc(6px * var(--ui-scale, 1)); }
}
@media (max-width: 380px) {
  .theme-option-text small { display: none; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7edf7;
  --muted: #9aa9bc;
  --line: #29384b;
  --canvas: #0b1220;
  --surface: #111c2c;
  --blue: #60a5fa;
  --blue-dark: #3b82f6;
  --blue-soft: #172b47;
  --green: #4ade80;
  --green-soft: #102c24;
  --violet: #a78bfa;
  --violet-soft: #272142;
  --orange: #fb923c;
  --orange-soft: #382416;
  --red: #f87171;
  --sidebar: #080e19;
  --sidebar-muted: #9aa8bb;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .content-scroll { background: var(--canvas); color: var(--ink); }

html[data-theme="dark"] .sidebar { background: var(--sidebar); }
html[data-theme="dark"] .workspace-switcher,
html[data-theme="dark"] .queue-card-wrapper { background: #111c2c !important; border-color: #29384b !important; }
html[data-theme="dark"] .nav-item.active { background: #1d2b40; }
html[data-theme="dark"] .nav-item:hover { background: #172438; }
html[data-theme="dark"] .sidebar-footer { border-color: #243247; }

html[data-theme="dark"] .topbar {
  background: rgba(11, 18, 32, .94);
  border-color: var(--line);
}

html[data-theme="dark"] .mobile-menu { color: var(--ink); }
html[data-theme="dark"] .global-search,
html[data-theme="dark"] .lookup-input-wrap,
html[data-theme="dark"] .activity-log-search,
html[data-theme="dark"] .email-list-search,
html[data-theme="dark"] .email-search {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}

html[data-theme="dark"] .global-search input,
html[data-theme="dark"] .lookup-input-wrap input,
html[data-theme="dark"] .activity-log-search input,
html[data-theme="dark"] .email-list-search input,
html[data-theme="dark"] .email-search input { color: var(--ink); background: transparent; }
html[data-theme="dark"] .global-search kbd { color: #9db0a8; background: #1d2a3d; }

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .small-action,
html[data-theme="dark"] .directory-type-tab,
html[data-theme="dark"] .activity-filter-btn,
html[data-theme="dark"] .ticket-filter-btn,
html[data-theme="dark"] .statistics-period-button,
html[data-theme="dark"] .statistics-day-drilldown button,
html[data-theme="dark"] .email-forward-mode-button,
html[data-theme="dark"] .email-wide-toggle,
html[data-theme="dark"] .customer-favorite-button {
  color: #cbd5e1;
  background: #111c2c;
  border-color: #334155;
}

html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .small-action:hover,
html[data-theme="dark"] .directory-type-tab:hover,
html[data-theme="dark"] .activity-filter-btn:hover,
html[data-theme="dark"] .ticket-filter-btn:hover { background: #1e293b; border-color: #3a4b66; }

html[data-theme="dark"] .directory-type-tab.active,
html[data-theme="dark"] .activity-filter-btn.active,
html[data-theme="dark"] .ticket-filter-btn.active,
html[data-theme="dark"] .statistics-period-button.active { color: #93c5fd; background: var(--blue-soft); border-color: #1e3a5f; }

html[data-theme="dark"] :is(input, textarea, select, [contenteditable="true"]) {
  color: var(--ink);
  caret-color: #93c5fd;
}

html[data-theme="dark"] :is(.email-filter, .email-recipient select, .ticket-select, .statistics-department-filter select, .statistics-agent-select select, .utility-rail select, .customer-form input, .customer-form select, .message-template-form input, .message-template-form textarea, .admin-company-toolbar select, .admin-agent-fields input, .admin-agent-fields select, .admin-agent-search-field input) {
  color: var(--ink);
  background-color: #0f172a;
  border-color: #334155;
}

html[data-theme="dark"] :is(.surface, .metric-card, .thread-panel, .utility-rail, .modal-card, .search-card, .customer-history-column, .history-message, .email-folder-tabs, .email-more-menu, .email-message-card, .email-forwarded-card, .admin-company-toolbar, .admin-mailbox-card, .admin-agent-directory-toolbar, .statistics-response-time-card, .statistics-ring-item, .statistics-channel-card, .statistics-chart-card, .statistics-department-card, .statistics-depot-card, .statistics-depot-demand-card, .statistics-agent-card, .statistics-ring-modal-card, .modal-channel-card) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] :is(.surface, .metric-card):hover { box-shadow: 0 calc(4px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) rgba(0, 0, 0, .18); }
html[data-theme="dark"] :is(.page-heading h1, .surface-heading h2, .rail-heading h2, .thread-panel-head h2, .conversation-head h2, .customer-detail-heading h3, .modal-card h2, .metric-card strong, .customer-name strong, .search-card-main strong, .thread-item strong, .history-message strong, .statistics-card-heading h2, .statistics-channel-heading h2, .statistics-channel-heading > strong, .statistics-response-time-card strong, .statistics-depot-demand-name strong, .statistics-depot-demand-total, .statistics-table td strong, .statistics-ring-header-row h3, .statistics-ring-copy h3, .statistics-ring-copy strong, .modal-ring-center strong, .modal-channel-stat-item strong, .admin-company-context strong, .admin-agent-directory-heading strong) { color: var(--ink); }

html[data-theme="dark"] :is(.page-heading > div > p:not(.eyebrow), .surface-heading p, .rail-heading p, .modal-description, .metric-card span, .metric-card small, .customer-name small, .customer-contact, .thread-item p, .thread-meta, .statistics-card-heading p, .statistics-channel-values span, .statistics-channel-secondary, .statistics-method-note) { color: var(--muted); }

html[data-theme="dark"] .call-log-list { border-color: var(--line); }
html[data-theme="dark"] .call-log { border-color: #243247 !important; }
html[data-theme="dark"] .call-log-list::-webkit-scrollbar-track { background: #0b1220; }
html[data-theme="dark"] .call-log-list::-webkit-scrollbar-thumb { background: #3a4b66; }
html[data-theme="dark"] .empty-state { color: #94a3b8; border-color: #334155; }

html[data-theme="dark"] .thread-panel { border-color: var(--line); }
html[data-theme="dark"] .thread-item { border-color: #243247; }
html[data-theme="dark"] .thread-item:hover { background: #172438; }
html[data-theme="dark"] .thread-item.active,
html[data-theme="dark"] .thread-item.unread-thread { background: #172b47; border-left-color: #60a5fa; }
html[data-theme="dark"] .conversation-head,
html[data-theme="dark"] .email-tools,
html[data-theme="dark"] .email-recipient,
html[data-theme="dark"] .directory-toolbar { border-color: var(--line); }
html[data-theme="dark"] .message-history { background: linear-gradient(#0b1220, #0b1220); }
html[data-theme="dark"] .message-bubble { color: #e2e8f0; background: #172438; }
html[data-theme="dark"] .message-row.agent .message-bubble { color: #fff; background: #1d4ed8; }

html[data-theme="dark"] .email-message-card-head,
html[data-theme="dark"] .email-forwarded-card header,
html[data-theme="dark"] .email-format-toolbar,
html[data-theme="dark"] .email-attachments,
html[data-theme="dark"] .email-forward-selection-bar {
  color: var(--ink);
  background: #1e293b;
  border-color: var(--line);
}
html[data-theme="dark"] .email-message-card.agent .email-message-card-head { background: #172b47; }
html[data-theme="dark"] .email-message-card-head strong,
html[data-theme="dark"] .email-body-html,
html[data-theme="dark"] .email-forwarded-body,
html[data-theme="dark"] .email-rich-editor { color: #e2e8f0; }
html[data-theme="dark"] .email-body-html :is(p, span, div, td, th, strong, em, blockquote) { color: inherit !important; background-color: transparent !important; }
html[data-theme="dark"] .email-body-html a { color: #93c5fd !important; }
html[data-theme="dark"] .email-body-html blockquote { color: #94a3b8; background: #1e293b; border-color: #475569; }
html[data-theme="dark"] .email-topic-separator span { background: #0b1220; }
html[data-theme="dark"] .email-topic-separator::before { background: var(--line); }
html[data-theme="dark"] .email-attachment-chip,
html[data-theme="dark"] .email-message-file-attachment,
html[data-theme="dark"] .email-message-image-attachment { color: #93c5fd; background: #132033; border-color: #1e3a5f; }

html[data-theme="dark"] .customer-row { border-color: #243247; }
html[data-theme="dark"] .customer-row.clickable-row:hover { background: #152033; }
html[data-theme="dark"] .customer-info-grid,
html[data-theme="dark"] .call-details div,
html[data-theme="dark"] .recent-contact-section { color: var(--ink); background: #152033; border-color: var(--line); }
html[data-theme="dark"] .history-message.agent-message { background: #172b47; border-color: #1e3a5f; }

html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .icon-button { color: #9db0a8; }
html[data-theme="dark"] .modal-close:hover,
html[data-theme="dark"] .icon-button:hover { color: var(--ink); background: #172438; }
html[data-theme="dark"] .admin-agent-form-actions { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .admin-agent-empty { color: var(--muted); background: #0f172a; border-color: #334155; }

html[data-theme="dark"] .statistics-day-drilldown { background: #132033; border-color: #1e3a5f; }
html[data-theme="dark"] .statistics-chart-grid { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(43px * var(--ui-scale, 1)), #29384b calc(44px * var(--ui-scale, 1))); border-color: #334155; }
html[data-theme="dark"] .statistics-bar-group.selectable:hover { background: #172b47; }
html[data-theme="dark"] :is(.statistics-progress, .statistics-depot-demand-track, .statistics-hourly-track) { background: #29384b; }
html[data-theme="dark"] .statistics-depot-demand-row,
html[data-theme="dark"] .statistics-table td,
html[data-theme="dark"] .statistics-table th { border-color: #29384b; }
html[data-theme="dark"] .statistics-table th { color: #9db0a8; background: #111c2c; }
html[data-theme="dark"] .statistics-agent-grid line { stroke: #334155; }
html[data-theme="dark"] .statistics-agent-axis-label { fill: #94a3b8; }
html[data-theme="dark"] .statistics-ring-modal-rings-wrap,
html[data-theme="dark"] .statistics-ring-modal-distribution { background: #0f172a; border-color: var(--line); }
html[data-theme="dark"] .statistics-ring-modal-header { border-color: var(--line); }

html[data-theme="dark"] .live-search-overlay { background: rgba(11, 18, 32, .98); border-color: var(--line); }
html[data-theme="dark"] .toast { background: #1e293b; color: #f2f7f3; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}

/* Theme-following colours that app.js paints inline (statistics agents, queue-profile label).
   Theme files override these; values here are the Fjord defaults. */
:root {
  --stats-agent-1: #0d6b5c; --stats-agent-2: #7a4f8f; --stats-agent-3: #17835f; --stats-agent-4: #b5670f; --stats-agent-5: #b34d7a;
  --stats-agent-6: #0f8a76; --stats-agent-7: #7d8f1f; --stats-agent-8: #a55db8; --stats-agent-9: #4b5a54; --stats-agent-10: #b03d3d;
  --queue-profile-label: #8ad0c0;
}

/* Dark theme surface harmonization: remove bright islands without flattening hierarchy. */
html[data-theme="dark"] {
  --dark-surface-low: #0b1220;
  --dark-surface-mid: #111c2c;
  --dark-surface-high: #152033;
  --dark-border-soft: #29384b;
  --dark-border-strong: #334155;
}

html[data-theme="dark"] .user-menu {
  color: #e2e8f0 !important;
  background: var(--dark-surface-high) !important;
  border-color: var(--dark-border-strong) !important;
  box-shadow: 0 calc(8px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1)) rgba(0, 0, 0, .18) !important;
}
html[data-theme="dark"] .user-menu:hover { background: #1e293b !important; }
html[data-theme="dark"] .active-agent-label { color: #e7edf7 !important; }
html[data-theme="dark"] :is(.workspace-avatar, .user-avatar, .service-icon, .queue-btn-icon) {
  color: #93c5fd;
  background: #1e293b;
}
html[data-theme="dark"] .utility-rail .service-card-heading .service-icon {
  color: #93c5fd;
  background: #1e293b;
}

html[data-theme="dark"] :is(.service-card, .quick-action, .location-cell) {
  color: var(--ink);
  background: var(--dark-surface-high);
  border-color: var(--dark-border-soft);
}
html[data-theme="dark"] .service-card { background: linear-gradient(145deg, #152033, #111c2c); }
html[data-theme="dark"] .quick-action:hover { background: #1e293b; }
html[data-theme="dark"] :is(.service-card h2, .service-card p, .field-label, .location-cell) { color: #94a3b8; }

html[data-theme="dark"] :is(.import-format-hint, .email-recipient-bar, #email-tab .ticket-compose-area) {
  color: #94a3b8;
  background: var(--dark-surface-mid);
  border-color: var(--dark-border-soft);
}
html[data-theme="dark"] :is(.location-pill, .customer-code) {
  color: #c4b5fd !important;
  background: #272142 !important;
}

html[data-theme="dark"] :is(#email-tab .email-toolbar-tabs, #sms-tab .sms-filter-bar, .email-folder-tabs) {
  background: var(--dark-surface-high);
  border-color: var(--dark-border-strong);
  box-shadow: inset 0 calc(1px * var(--ui-scale, 1)) 0 rgba(255, 255, 255, .025);
}
html[data-theme="dark"] #email-tab .email-toolbar-tabs :is(.email-folder-btn, .ticket-filter-btn),
html[data-theme="dark"] #sms-tab .sms-filter-bar .ticket-filter-btn {
  color: #94a3b8;
  background: var(--dark-surface-mid);
  border-color: var(--dark-border-soft);
}
html[data-theme="dark"] #email-tab .email-toolbar-tabs :is(.email-folder-btn, .ticket-filter-btn):hover,
html[data-theme="dark"] #sms-tab .sms-filter-bar .ticket-filter-btn:hover {
  color: #e2e8f0;
  background: #1e293b;
  border-color: #475569;
}
html[data-theme="dark"] #email-tab .email-toolbar-tabs :is(.email-folder-btn, .ticket-filter-btn).active,
html[data-theme="dark"] #sms-tab .sms-filter-bar .ticket-filter-btn.active {
  color: #93c5fd;
  background: #123524;
  border-color: #3d5f4c;
}
html[data-theme="dark"] #email-tab .email-toolbar-tabs :is(.email-folder-btn, .ticket-filter-btn) span,
html[data-theme="dark"] #email-tab .email-toolbar-tabs .filter-count,
html[data-theme="dark"] #sms-tab .sms-filter-bar .filter-count,
html[data-theme="dark"] .filter-count {
  color: #cbd5e1;
  background: #1e293b;
}
html[data-theme="dark"] #email-tab .email-toolbar-tabs .active :is(span, .filter-count),
html[data-theme="dark"] #sms-tab .sms-filter-bar .active .filter-count {
  color: #fff;
  background: #2563eb;
}

html[data-theme="dark"] #email-tab .message-history {
  background: linear-gradient(180deg, #0b1220, #080e19);
}
html[data-theme="dark"] #email-tab :is(.email-recipient-bar, .email-composer, .email-subject-row, .email-attachments, .email-format-toolbar) {
  background: var(--dark-surface-mid);
  border-color: var(--dark-border-soft);
}
html[data-theme="dark"] #email-tab :is(.recipient-row input, .email-rich-editor, .email-subject-row input) {
  color: #e2e8f0;
  background: var(--dark-surface-low);
  border-color: var(--dark-border-strong);
}
html[data-theme="dark"] #email-tab .recipient-row input[readonly] {
  color: #94a3b8;
  background: #0f172a;
  border-color: var(--dark-border-soft);
}
html[data-theme="dark"] #email-tab .recipient-row label { color: #94a3b8; }
html[data-theme="dark"] #email-tab :is(.email-rich-editor, input)::placeholder { color: #94a3b8; }
html[data-theme="dark"] #email-tab :is(.email-message-image-preview, .email-message-image-preview img, .email-attachment-preview) {
  background: var(--dark-surface-low);
  border-color: var(--dark-border-soft);
}

html[data-theme="dark"] :is(.template-menu, .email-more-menu, .agent-admin-card, .agent-admin-card-header) {
  color: var(--ink);
  background: var(--dark-surface-high);
  border-color: var(--dark-border-soft);
}
html[data-theme="dark"] .template-insert-button { color: #e2e8f0; }
html[data-theme="dark"] .template-insert-button:hover { background: #1e293b; }
html[data-theme="dark"] .agent-admin-card.is-expanded .agent-admin-card-header { background: #1e293b; border-color: var(--dark-border-soft); }
html[data-theme="dark"] .agent-admin-delete { background: var(--dark-surface-mid); border-color: var(--dark-border-soft); }
html[data-theme="dark"] .agent-admin-section-heading strong { color: #e2e8f0; }
html[data-theme="dark"] :is(.agent-account-status.not_invited, .badge-closed, .badge-draft) { color: #cbd5e1; background: #29384b; }
html[data-theme="dark"] .badge-open { color: #93c5fd; background: #123524; }
html[data-theme="dark"] .badge-progress { color: #fbbf24; background: #382416; }
html[data-theme="dark"] .badge-waiting { color: #c4b5fd; background: #272142; }
html[data-theme="dark"] .badge-resolved { color: #4ade80; background: #123524; }

html[data-theme="dark"] .statistics-agent-hourly {
  background: linear-gradient(145deg, #132033, #111c2c);
  border-color: var(--dark-border-soft);
}
html[data-theme="dark"] :is(.statistics-agent-select select, .statistics-agent-key) {
  color: #cbd5e1;
  background: var(--dark-surface-high);
  border-color: var(--dark-border-soft);
}
html[data-theme="dark"] .statistics-agent-key:hover { background: #1e293b; }
html[data-theme="dark"] .statistics-response-time-card.sms .statistics-response-time-icon,
html[data-theme="dark"] .statistics-channel-card.sms .statistics-channel-icon { color: #c4b5fd; background: #272142; }
html[data-theme="dark"] .statistics-response-time-card.email .statistics-response-time-icon,
html[data-theme="dark"] .statistics-channel-card.email .statistics-channel-icon { color: #93c5fd; background: #102c24; }

/* Keep global-search results calm while scanning contacts in dark mode. */
html[data-theme="dark"] .live-search-card {
  border-bottom-color: #1e293b;
}
html[data-theme="dark"] .live-search-card:hover,
html[data-theme="dark"] .live-search-card:focus-visible {
  background: #1e293b;
}
html[data-theme="dark"] .live-search-card:focus-visible {
  outline: calc(2px * var(--ui-scale, 1)) solid #3b82f6;
  outline-offset: calc(-2px * var(--ui-scale, 1));
}
html[data-theme="dark"] .live-search-card-main strong { color: #e2e8f0; }
html[data-theme="dark"] .live-search-card-main p { color: #94a3b8; }

/* Authentication is always the fixed light experience, regardless of workspace theme. */
#auth-login-screen {
  color-scheme: light;
  --ink: #182230;
  --muted: #667085;
  --line: #e7eaf0;
  --surface: #fff;
  --blue: #0d6b5c;
  --blue-dark: #0a5a4d;
}
html[data-theme="dark"] #auth-login-screen :is(input, textarea, select) {
  color: #182230 !important;
  background-color: #fff !important;
  border-color: #d0d5dd !important;
  caret-color: #0d6b5c;
}
html[data-theme="dark"] #auth-login-screen :is(input, textarea)::placeholder {
  color: #64748b !important;
  opacity: 1;
}
html[data-theme="dark"] #auth-login-screen .button-secondary {
  color: #344054;
  background: #fff;
  border-color: #d9dee7;
}
html[data-theme="dark"] #auth-login-screen .button-secondary:hover {
  background: #f8fafc;
  border-color: #d0d5dd;
}

/* Contact creation must remain reachable on a phone, including the fields and
   save action below the fold. The phone input itself stays an ordinary,
   editable input; JavaScript only provides +47 as its starting value. */
@media (max-width: 640px) {
  #customer-modal {
    align-items: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(12px * var(--ui-scale, 1));
  }

#customer-modal .modal-card {
    width: 100%;
    max-height: calc(100dvh - calc(24px * var(--ui-scale, 1)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0;
  }
}

/* Mobile administration uses one page-level scroll surface so vertical swipes
   work from cards, labels and the center of the editor. */
@media (max-width: 900px) {
  .content-scroll.admin-page-scroll {
    display: block;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .content-scroll.admin-page-scroll .admin-agents-page.active,
  .content-scroll.admin-page-scroll .admin-agents-workspace,
  .content-scroll.admin-page-scroll .admin-agents-directory-panel,
  .content-scroll.admin-page-scroll .admin-agent-editor-panel,
  .content-scroll.admin-page-scroll .admin-agent-editor-body {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    touch-action: pan-y;
  }

  .content-scroll.admin-page-scroll .admin-agents-workspace {
    display: block;
  }

  .content-scroll.admin-page-scroll .admin-agents-directory-panel #admin-agents-list-container {
    flex: none;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;
    touch-action: pan-y;
  }

  .content-scroll.admin-page-scroll .admin-agent-editor-body {
    flex: none;
    padding-right: 0;
    overscroll-behavior: auto;
  }

  .content-scroll.admin-page-scroll .admin-agents-page.mobile-editing .admin-agents-directory-panel {
    display: none;
    pointer-events: auto;
    user-select: auto;
  }

  .content-scroll.admin-page-scroll .admin-agents-page.mobile-editing .admin-agent-editor-panel {
    display: flex;
    box-shadow: none;
  }

  .content-scroll.admin-page-scroll .admin-agent-form-actions {
    position: static;
    margin-top: calc(16px * var(--ui-scale, 1));
  }
}

/* Keep the account action compact and visually aligned with the adjacent icon controls. */
.topbar-actions #btn-logout {
  width: calc(36px * var(--ui-scale, 1));
  min-width: calc(36px * var(--ui-scale, 1));
  height: calc(36px * var(--ui-scale, 1));
  min-height: calc(36px * var(--ui-scale, 1));
  padding: 0 !important;
  gap: 0;
  overflow: hidden;
  font-size: 0;
}

.topbar-actions #btn-logout svg {
  width: calc(18px * var(--ui-scale, 1));
  height: calc(18px * var(--ui-scale, 1));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dashboard density: keep the live feed attached to the viewport. */
@media (max-width: 900px) {
  #dashboard-tab.active {
    min-height: 0;
    height: 100%;
    gap: calc(8px * var(--ui-scale, 1));
  }

  #dashboard-tab .page-heading {
    gap: calc(8px * var(--ui-scale, 1));
  }

  #dashboard-tab .page-heading > div > p:not(.eyebrow) {
    display: none;
  }

  #dashboard-tab .page-heading h1 {
    font-size: clamp(calc(22px * var(--ui-scale, 1)), 6vw, calc(28px * var(--ui-scale, 1)));
    margin-bottom: 0;
  }

  #dashboard-tab .heading-actions {
    gap: calc(8px * var(--ui-scale, 1));
  }

  #dashboard-tab .heading-actions .button {
    min-height: calc(44px * var(--ui-scale, 1));
  }

  #dashboard-tab .activity-card {
    border-radius: calc(14px * var(--ui-scale, 1));
  }

  #dashboard-tab .surface-heading {
    padding: calc(14px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  }

  #dashboard-tab .activity-heading > div {
    min-width: 0;
    width: 100%;
  }

  #dashboard-tab .activity-heading > .live-chip {
    flex: 0 0 auto;
  }

  #dashboard-tab .activity-filter-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-column: 1 / -1;
    overflow: visible !important;
    width: 100%;
    min-width: 0;
    padding-bottom: 0 !important;
    margin-top: calc(9px * var(--ui-scale, 1));
    gap: calc(8px * var(--ui-scale, 1)) !important;
  }

  #dashboard-tab .activity-filter-btn {
    width: 100%;
    min-width: 0;
    min-height: calc(38px * var(--ui-scale, 1));
    padding: calc(7px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
    justify-content: center;
    font-size: clamp(calc(10px * var(--ui-scale, 1)), 3vw, calc(11.5px * var(--ui-scale, 1)));
    white-space: nowrap;
  }

  #dashboard-tab .activity-log-search {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: calc(38px * var(--ui-scale, 1));
    margin-top: 0;
  }

  #dashboard-tab .call-log-list {
    padding-bottom: max(calc(10px * var(--ui-scale, 1)), env(safe-area-inset-bottom));
  }
}

/* Agentadministrasjon: a two-pane working surface with independent scroll areas. */
.admin-agents-page.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: calc(18px * var(--ui-scale, 1));
}

.admin-agents-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(18px * var(--ui-scale, 1));
  flex: 0 0 auto;
}

.admin-agents-page-header h1 {
  margin: 0 0 calc(5px * var(--ui-scale, 1));
  font: 800 calc(25px * var(--ui-scale, 1)) var(--display);
  letter-spacing: calc(-.9px * var(--ui-scale, 1));
}

.admin-agents-page-header p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: calc(13px * var(--ui-scale, 1));
}

.admin-agents-workspace {
  display: grid;
  grid-template-columns: minmax(calc(290px * var(--ui-scale, 1)), .78fr) minmax(0, 1.65fr);
  gap: calc(16px * var(--ui-scale, 1));
  flex: 1 1 auto;
  min-height: 0;
}

.admin-agents-directory-panel,
.admin-agent-editor-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(14px * var(--ui-scale, 1));
  background: var(--surface);
}

.admin-agents-directory-panel {
  display: flex;
  flex-direction: column;
  padding: calc(14px * var(--ui-scale, 1));
}

.admin-agents-directory-panel .admin-company-toolbar {
  grid-template-columns: 1fr;
  gap: calc(8px * var(--ui-scale, 1));
  margin-bottom: calc(14px * var(--ui-scale, 1));
  padding: calc(12px * var(--ui-scale, 1));
}

.admin-agents-directory-panel .admin-company-context small {
  font-size: calc(12px * var(--ui-scale, 1));
}

.admin-agents-directory-panel .admin-agent-directory-toolbar {
  grid-template-columns: 1fr auto;
  margin-bottom: calc(10px * var(--ui-scale, 1));
}

.admin-agents-directory-panel .admin-agent-directory-heading {
  grid-column: 1 / -1;
}

.admin-agents-directory-panel .admin-agent-search-field {
  grid-column: 1;
  grid-row: 2;
}

.admin-agents-directory-panel .admin-agent-directory-toolbar > .button {
  grid-column: 2;
  grid-row: 2;
}

.admin-agents-directory-panel #admin-agents-list-container {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  margin: 0 !important;
  padding-right: calc(3px * var(--ui-scale, 1));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-agent-editor-panel {
  display: flex;
  flex-direction: column;
  padding: calc(18px * var(--ui-scale, 1));
}

.admin-agent-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--ui-scale, 1));
  flex: 0 0 auto;
  padding-bottom: calc(14px * var(--ui-scale, 1));
  border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
}

.admin-agent-editor-header strong,
.admin-agent-editor-kicker {
  display: block;
}

.admin-agent-editor-kicker {
  margin-bottom: calc(3px * var(--ui-scale, 1));
  color: var(--blue);
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  letter-spacing: .08em;
}

.admin-agent-editor-header strong {
  color: var(--ink);
  font: 800 calc(16px * var(--ui-scale, 1)) var(--display);
}

.admin-agent-editor-status {
  max-width: 42%;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-agent-editor-panel .admin-mailbox-card {
  flex: 0 0 auto;
  margin: calc(14px * var(--ui-scale, 1)) 0;
  padding: calc(11px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
}

.admin-agent-editor-panel .admin-mailbox-card .button {
  min-height: calc(38px * var(--ui-scale, 1));
}

.admin-agent-editor-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: calc(3px * var(--ui-scale, 1));
}

.admin-agent-editor-empty {
  display: grid;
  flex: 1 1 auto;
  min-height: calc(180px * var(--ui-scale, 1));
  place-items: center;
  align-content: center;
  gap: calc(7px * var(--ui-scale, 1));
  color: var(--muted);
  text-align: center;
}

.admin-agent-editor-empty > span {
  display: grid;
  width: calc(48px * var(--ui-scale, 1));
  height: calc(48px * var(--ui-scale, 1));
  place-items: center;
  border-radius: calc(14px * var(--ui-scale, 1));
  color: var(--blue);
  background: var(--blue-soft);
  font-size: calc(23px * var(--ui-scale, 1));
}

.admin-agent-editor-empty strong {
  color: var(--ink);
  font-size: calc(14px * var(--ui-scale, 1));
}

.admin-agent-editor-empty p {
  max-width: calc(300px * var(--ui-scale, 1));
  margin: 0;
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1.45;
}

.admin-agent-form-actions {
  flex: 0 0 auto;
  margin-top: calc(14px * var(--ui-scale, 1));
  padding-top: calc(14px * var(--ui-scale, 1));
}

.agent-admin-card.is-selected {
  border-color: #9ccfbf;
  box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(13, 107, 92, .1);
}

.agent-admin-card.is-selected .agent-admin-card-header {
  background: #f8fafc;
}

@media (max-width: 900px) {
  .admin-agents-page.active {
    height: auto;
    min-height: 100%;
    gap: calc(12px * var(--ui-scale, 1));
  }

  .admin-agents-page-header {
    align-items: flex-start;
  }

  .admin-agents-page-header h1 {
    font-size: calc(23px * var(--ui-scale, 1));
  }

  .admin-agents-page-header p:not(.eyebrow) {
    display: none;
  }

  .admin-agents-page-header .button {
    min-height: calc(42px * var(--ui-scale, 1));
  }

  .admin-agents-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }

  .admin-agents-directory-panel,
  .admin-agent-editor-panel {
    min-height: calc(100dvh - calc(144px * var(--ui-scale, 1)));
  }

  .admin-agent-editor-panel {
    display: none;
    padding: calc(14px * var(--ui-scale, 1));
  }

  .admin-agents-page.mobile-editing .admin-agents-directory-panel {
    display: flex;
    grid-area: 1 / 1;
    pointer-events: none;
    user-select: none;
  }

  .admin-agents-page.mobile-editing .admin-agent-editor-panel {
    display: flex;
    grid-area: 1 / 1;
    z-index: 1;
    background: var(--surface);
    box-shadow: calc(-18px * var(--ui-scale, 1)) 0 calc(32px * var(--ui-scale, 1)) rgba(10, 35, 31, .14);
  }

  .admin-agents-directory-panel .admin-agent-directory-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-agents-directory-panel .admin-agent-directory-toolbar > .button {
    grid-column: 2;
    grid-row: 2;
  }

  .admin-agents-directory-panel .admin-agent-search-field {
    grid-column: 1;
    grid-row: 2;
  }

  .admin-agent-fields {
    grid-template-columns: 1fr;
    gap: calc(10px * var(--ui-scale, 1));
  }

  .admin-agent-editor-panel .admin-mailbox-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-agent-editor-panel .admin-mailbox-card .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .admin-agent-form-actions {
    position: sticky;
    bottom: 0;
    margin-left: calc(-14px * var(--ui-scale, 1));
    margin-right: calc(-14px * var(--ui-scale, 1));
    padding: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) max(calc(12px * var(--ui-scale, 1)), env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px) {
  .admin-agents-page-header {
    gap: calc(8px * var(--ui-scale, 1));
  }

  .admin-agents-page-header .button {
    padding-left: calc(10px * var(--ui-scale, 1));
    padding-right: calc(10px * var(--ui-scale, 1));
  }

  .agent-admin-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: calc(9px * var(--ui-scale, 1));
  }

  .agent-admin-department-summary,
  .agent-admin-edit-label {
    display: none;
  }

  .agent-admin-state {
    gap: calc(5px * var(--ui-scale, 1));
  }

  .agent-account-status {
    max-width: calc(82px * var(--ui-scale, 1));
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Accessibility and responsive refinements. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: calc(3px * var(--ui-scale, 1)) solid #8fc9b9;
  outline-offset: calc(2px * var(--ui-scale, 1));
}

:where(.surface-heading p, .rail-heading p, .metric-card small, .customer-name small,
  .customer-contact, .thread-item time, .thread-item p, .thread-meta, .message-meta,
  .conversation-kicker, .muted-label) {
  color: #667085;
}

.agent-status-controls button {
  width: calc(24px * var(--ui-scale, 1));
  height: calc(24px * var(--ui-scale, 1));
  min-width: calc(24px * var(--ui-scale, 1));
  min-height: calc(24px * var(--ui-scale, 1));
  border: calc(4px * var(--ui-scale, 1)) solid transparent;
  background-clip: padding-box;
}

.agent-status-controls button:focus-visible {
  outline: calc(3px * var(--ui-scale, 1)) solid #8fc9b9;
  outline-offset: calc(1px * var(--ui-scale, 1));
}

.modal-overlay,
.modal-backdrop {
  overscroll-behavior: contain;
}

@media (max-width: 900px) {
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: calc(8px * var(--ui-scale, 1));
    padding: 0 calc(12px * var(--ui-scale, 1));
  }

  .global-search-wrap,
  .global-search {
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  .topbar-actions {
    gap: calc(4px * var(--ui-scale, 1));
  }

  .topbar-actions .button {
    min-width: calc(36px * var(--ui-scale, 1));
    min-height: calc(36px * var(--ui-scale, 1));
    padding: 0;
  }

  .topbar-actions #btn-logout {
    width: calc(36px * var(--ui-scale, 1));
    overflow: hidden;
    font-size: 0;
  }

  .sidebar.mobile-open {
    width: min(calc(310px * var(--ui-scale, 1)), 86vw);
  }

  .content-scroll {
    padding-left: calc(12px * var(--ui-scale, 1));
    padding-right: calc(12px * var(--ui-scale, 1));
  }
}

@media (max-width: 800px) {
  #auth-login-screen .auth-card.auth-login-card {
    margin-top: calc(16px * var(--ui-scale, 1));
    margin-bottom: calc(18px * var(--ui-scale, 1));
    padding: calc(22px * var(--ui-scale, 1)) !important;
  }

  #auth-login-screen .auth-header {
    margin-bottom: calc(4px * var(--ui-scale, 1));
  }

  #auth-login-screen .auth-divider {
    margin: calc(12px * var(--ui-scale, 1)) 0 !important;
  }

  #auth-login-screen .auth-login-card input {
    padding-top: calc(9px * var(--ui-scale, 1)) !important;
    padding-bottom: calc(9px * var(--ui-scale, 1)) !important;
  }

  #auth-login-screen .microsoft-sso-button {
    min-height: calc(44px * var(--ui-scale, 1));
  }
}

@media (max-width: 600px) {
  .modal-overlay,
  .modal-backdrop {
    align-items: flex-start;
    overflow-y: auto;
    padding: calc(12px * var(--ui-scale, 1));
  }

  .modal-overlay .modal-card,
  .modal-backdrop .modal-card {
    width: 100%;
    max-height: calc(100dvh - calc(24px * var(--ui-scale, 1)));
    overflow-y: auto;
    margin: 0;
  }

  .heading-actions {
    gap: calc(7px * var(--ui-scale, 1));
  }

  .heading-actions .button {
    min-height: calc(42px * var(--ui-scale, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Fjord · tilgjengelighet: skip-lenke + synlig fokusring ─────── */
.skip-link {
  position: absolute;
  left: calc(16px * var(--ui-scale, 1));
  top: calc(-64px * var(--ui-scale, 1));
  z-index: 120;
  background: #0e2c26;
  color: #fff;
  font: 700 calc(14px * var(--ui-scale, 1)) var(--font);
  padding: calc(12px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));
  border-radius: calc(14px * var(--ui-scale, 1));
  text-decoration: none;
  box-shadow: 0 calc(10px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1)) rgba(10, 35, 31, .35);
  transition: top .16s ease;
}
.skip-link:focus { top: calc(12px * var(--ui-scale, 1)); outline: calc(2px * var(--ui-scale, 1)) solid #8ad0c0; outline-offset: calc(2px * var(--ui-scale, 1)); }
body:has(#auth-login-screen:not(.hidden)) .skip-link { display: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: calc(2px * var(--ui-scale, 1)) solid var(--blue);
  outline-offset: calc(2px * var(--ui-scale, 1));
  border-radius: inherit;
}
html[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #60a5fa;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ── Fjord · mørk modus-fikser for komponenter med lyse flater ──── */
.search-clear-btn.hidden { display: none; }
html[data-theme="dark"] .missed-call-callback { background: #3a2322; border-color: #5c3635; color: #f87171; }
html[data-theme="dark"] .missed-call-callback:hover { background: #452a2a; border-color: #6b3f3f; }
html[data-theme="dark"] .ticket-select { background: #172438; border-color: #29384b; color: var(--ink); }
html[data-theme="dark"] .statistics-depot-demand-name > span { background: #172438; color: #9aa9bc; }
html[data-theme="dark"] .statistics-ring-expand-icon { background: #1e293b; color: #9aa9bc; }

/* Fjord · prioritetsindikator (erstatter emoji-fargede sirkler) */
.priority-dot { display: inline-block; width: calc(8px * var(--ui-scale, 1)); height: calc(8px * var(--ui-scale, 1)); border-radius: 50%; margin-right: calc(4px * var(--ui-scale, 1)); vertical-align: middle; }
.priority-urgent { background: #b03d3d; }
.priority-high { background: #d99a3d; }
.priority-normal { background: var(--blue); }
.priority-low { background: #b8bdb6; }
html[data-theme="dark"] .priority-normal { background: #60a5fa; }
html[data-theme="dark"] .priority-low { background: #64748b; }

/* Mobile: the main workspace card fills the remaining viewport (Oversikt, Meldinger, E-post, Kontakter). */
@media (max-width: 900px) {
  .content-scroll.mobile-scroll-locked {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    padding-top: calc(10px * var(--ui-scale, 1)) !important;
    padding-bottom: max(calc(8px * var(--ui-scale, 1)), env(safe-area-inset-bottom)) !important;
  }

  .content-scroll.mobile-scroll-locked > .tab-view.active {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  .content-scroll.mobile-scroll-locked #dashboard-tab .dashboard-grid,
  .content-scroll.mobile-scroll-locked #dashboard-tab .activity-card,
  .content-scroll.mobile-scroll-locked #customers-tab #customer-directory-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  /* Inbox stays `display:block` so only the list or the thread is visible, not both. */
  .content-scroll.mobile-scroll-locked #sms-tab .inbox-layout,
  .content-scroll.mobile-scroll-locked #email-tab .inbox-layout {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
  }

  .content-scroll.mobile-scroll-locked #sms-tab .thread-panel,
  .content-scroll.mobile-scroll-locked #sms-tab .conversation-panel,
  .content-scroll.mobile-scroll-locked #email-tab .thread-panel,
  .content-scroll.mobile-scroll-locked #email-tab .conversation-panel {
    height: 100%;
    min-height: 0;
  }

  .content-scroll.mobile-scroll-locked #dashboard-tab .call-log-list,
  .content-scroll.mobile-scroll-locked #customers-tab .customer-directory,
  .content-scroll.mobile-scroll-locked #sms-tab .thread-list,
  .content-scroll.mobile-scroll-locked #sms-tab .message-history,
  .content-scroll.mobile-scroll-locked #email-tab .thread-list,
  .content-scroll.mobile-scroll-locked #email-tab .message-history,
  .content-scroll.mobile-scroll-locked #email-tab #email-chat-history {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Mobile Meldinger: Samtaler and the composer stay put. Only the messages scroll. */
@media (max-width: 900px) {
  .content-scroll.mobile-scroll-locked #sms-tab .inbox-layout.mobile-sms-thread-open .conversation-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .content-scroll.mobile-scroll-locked #sms-tab .inbox-layout.mobile-sms-thread-open .sms-conversation-head,
  .content-scroll.mobile-scroll-locked #sms-tab .inbox-layout.mobile-sms-thread-open .sms-composer {
    flex: 0 0 auto;
  }

  .content-scroll.mobile-scroll-locked #sms-tab .inbox-layout.mobile-sms-thread-open .message-history {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .content-scroll.mobile-scroll-locked #email-tab .inbox-layout.mobile-email-thread-open {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .content-scroll.mobile-scroll-locked #email-tab .inbox-layout.mobile-email-thread-open .conversation-panel {
    display: block;
    height: auto;
    min-height: 100%;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .content-scroll.mobile-scroll-locked #email-tab .inbox-layout.mobile-email-thread-open .message-history,
  .content-scroll.mobile-scroll-locked #email-tab .inbox-layout.mobile-email-thread-open #email-chat-history {
    flex: none;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;
  }
}

/* Modular channels: elements for channels the company has not enabled. */
.channel-off { display: none !important; }
.channel-disabled-notice {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  align-self: stretch;
  margin: calc(10px * var(--ui-scale, 1)) 0 0 !important;
  padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-left: calc(3px * var(--ui-scale, 1)) solid var(--orange);
  border-radius: calc(12px * var(--ui-scale, 1));
  background: var(--orange-soft);
  color: var(--ink);
  font-size: calc(13px * var(--ui-scale, 1));
  line-height: 1.45;
}

/* Agentadministrasjon: read-only channel status (derived from number/mailbox). */
.admin-channel-list { display: grid; gap: calc(8px * var(--ui-scale, 1)); margin: 0; padding: 0; min-width: 0; }
.admin-channel-status { display: grid; gap: calc(4px * var(--ui-scale, 1)); padding: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(12px * var(--ui-scale, 1)); background: var(--canvas); min-width: 0; }
.admin-channel-status.is-on { border-color: var(--blue); background: var(--blue-soft); }
.admin-channel-status-head { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--ui-scale, 1)); }
.admin-channel-status-head strong { font-size: calc(14px * var(--ui-scale, 1)); color: var(--ink); }
.admin-channel-status small { font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); }
.admin-channel-badge { display: inline-flex; align-items: center; min-height: calc(24px * var(--ui-scale, 1)); padding: calc(2px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); border-radius: calc(999px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); font-weight: 800; }
.admin-channel-badge.is-on { background: var(--green-soft); color: var(--green); }
.admin-channel-badge.is-off { background: var(--surface); color: var(--muted); border: calc(1px * var(--ui-scale, 1)) solid var(--line); }
.admin-channel-source { margin: calc(4px * var(--ui-scale, 1)) 0 0; font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.admin-channel-status.is-off .admin-channel-source { color: var(--muted); }
.admin-channels-feedback { margin: calc(12px * var(--ui-scale, 1)) 0 0; font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); line-height: 1.45; }
.admin-channels-feedback.is-error { color: var(--red); font-weight: 700; }
.admin-channels-loading { font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); padding: calc(8px * var(--ui-scale, 1)) 0; }

/* ==========================================================================
   Agentadministrasjon v2: three visible steps
   (1) Legg til agent  (2) Velg kanaler  (3) E-post og invitasjon
   Uses Fjord tokens only, so dark mode follows html[data-theme="dark"].
   ========================================================================== */
.admin-agents-page.ra-page.active { display: block; height: auto; min-height: 0; }
.ra-page { max-width: calc(1180px * var(--ui-scale, 1)); }
.ra-header { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(18px * var(--ui-scale, 1)); flex-wrap: wrap; margin-bottom: calc(6px * var(--ui-scale, 1)); }
.ra-header-copy h1 { font: 800 calc(25px * var(--ui-scale, 1)) var(--display); letter-spacing: calc(-.9px * var(--ui-scale, 1)); margin: 0 0 calc(5px * var(--ui-scale, 1)); color: var(--ink); }
.ra-header-copy > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: calc(13px * var(--ui-scale, 1)); }
.ra-header-actions { display: flex; align-items: flex-end; gap: calc(10px * var(--ui-scale, 1)); flex-wrap: wrap; }
.ra-header-actions .ra-save { min-height: calc(40px * var(--ui-scale, 1)); }
.ra-company-field { display: grid; gap: calc(4px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; color: var(--muted); }
.ra-company-field select { min-width: calc(200px * var(--ui-scale, 1)); min-height: calc(40px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(12px * var(--ui-scale, 1)); background: var(--surface); color: var(--ink); font: 700 calc(13px * var(--ui-scale, 1)) var(--font); }
.ra-back { min-height: calc(40px * var(--ui-scale, 1)); }
.ra-company-context { margin: calc(10px * var(--ui-scale, 1)) 0 calc(16px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); }
.ra-company-context strong { color: var(--ink); margin-right: calc(4px * var(--ui-scale, 1)); }

.ra-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10px * var(--ui-scale, 1)); margin-bottom: calc(18px * var(--ui-scale, 1)); counter-reset: none; }
.ra-step-link { display: flex; align-items: center; gap: calc(10px * var(--ui-scale, 1)); min-height: calc(56px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(14px * var(--ui-scale, 1)); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .18s, background .18s; }
.ra-step-link:hover { border-color: var(--blue); }
.ra-step-num { flex: 0 0 auto; width: calc(30px * var(--ui-scale, 1)); height: calc(30px * var(--ui-scale, 1)); display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font: 800 calc(13px * var(--ui-scale, 1)) var(--display); }
.ra-step-link.is-done .ra-step-num { background: var(--blue); color: var(--surface); }
.ra-step-text { display: grid; gap: calc(2px * var(--ui-scale, 1)); min-width: 0; }
.ra-step-text strong { font: 800 calc(13px * var(--ui-scale, 1)) var(--display); }
.ra-step-text small { font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ra-form { display: grid; gap: calc(18px * var(--ui-scale, 1)); }
.ra-step { background: var(--surface); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(16px * var(--ui-scale, 1)); padding: calc(18px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1)); scroll-margin-top: calc(16px * var(--ui-scale, 1)); }
.ra-step-header { display: flex; align-items: flex-start; gap: calc(12px * var(--ui-scale, 1)); margin-bottom: calc(16px * var(--ui-scale, 1)); }
.ra-step-badge { flex: 0 0 auto; width: calc(32px * var(--ui-scale, 1)); height: calc(32px * var(--ui-scale, 1)); display: grid; place-items: center; border-radius: calc(12px * var(--ui-scale, 1)); background: var(--blue); color: var(--surface); font: 800 calc(14px * var(--ui-scale, 1)) var(--display); }
.ra-step-heading { flex: 1 1 auto; min-width: 0; }
.ra-step-heading h2 { margin: calc(2px * var(--ui-scale, 1)) 0 calc(3px * var(--ui-scale, 1)); font: 800 calc(17px * var(--ui-scale, 1)) var(--display); letter-spacing: calc(-.3px * var(--ui-scale, 1)); color: var(--ink); outline: none; }
.ra-step-heading p { margin: 0; font-size: calc(13px * var(--ui-scale, 1)); color: var(--muted); line-height: 1.45; }
.ra-cta { min-height: calc(44px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)); font-size: calc(13px * var(--ui-scale, 1)); }

.ra-agents-layout { display: grid; grid-template-columns: minmax(calc(260px * var(--ui-scale, 1)), calc(360px * var(--ui-scale, 1))) minmax(0, 1fr); gap: calc(16px * var(--ui-scale, 1)); align-items: start; }
.ra-directory { display: grid; gap: calc(10px * var(--ui-scale, 1)); min-width: 0; }
.ra-directory-toolbar { display: grid; gap: calc(8px * var(--ui-scale, 1)); }
.ra-directory-title { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8px * var(--ui-scale, 1)); }
.ra-directory-title strong { font: 800 calc(13px * var(--ui-scale, 1)) var(--display); color: var(--ink); }
.ra-directory-title span { font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); }
.ra-search input { width: 100%; min-height: calc(40px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(12px * var(--ui-scale, 1)); background: var(--canvas); color: var(--ink); font: 600 calc(13px * var(--ui-scale, 1)) var(--font); }
.ra-agent-list { display: grid; gap: calc(8px * var(--ui-scale, 1)); max-height: calc(460px * var(--ui-scale, 1)); overflow-y: auto; padding-right: calc(2px * var(--ui-scale, 1)); }
.ra-agent-card { display: flex; align-items: stretch; gap: calc(4px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(14px * var(--ui-scale, 1)); background: var(--surface); transition: border-color .18s, background .18s; }
.ra-agent-card:hover { border-color: var(--blue); }
.ra-agent-card.is-selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset calc(3px * var(--ui-scale, 1)) 0 0 var(--blue); }
.ra-agent-select { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: calc(10px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; border-radius: calc(14px * var(--ui-scale, 1)); }
.ra-avatar { flex: 0 0 auto; width: calc(36px * var(--ui-scale, 1)); height: calc(36px * var(--ui-scale, 1)); display: grid; place-items: center; border-radius: calc(12px * var(--ui-scale, 1)); background: var(--blue-soft); color: var(--blue); font: 800 calc(14px * var(--ui-scale, 1)) var(--display); }
.ra-agent-card.is-selected .ra-avatar { background: var(--blue); color: var(--surface); }
.ra-agent-identity { display: grid; gap: calc(3px * var(--ui-scale, 1)); min-width: 0; }
.ra-agent-identity strong { font-size: calc(13px * var(--ui-scale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-agent-identity small { font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-agent-meta { display: flex; flex-wrap: wrap; gap: calc(4px * var(--ui-scale, 1)); margin-top: calc(3px * var(--ui-scale, 1)); }
.ra-status-chip, .ra-dept-chip { display: inline-flex; align-items: center; min-height: calc(22px * var(--ui-scale, 1)); padding: calc(2px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)); border-radius: calc(999px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); font-weight: 700; white-space: nowrap; }
.ra-status-chip { background: var(--orange-soft); color: var(--orange); }
.ra-status-chip.is-active { background: var(--green-soft); color: var(--green); }
.ra-status-chip.is-invitation_sent { background: var(--violet-soft); color: var(--violet); }
.ra-dept-chip { background: var(--canvas); color: var(--muted); border: calc(1px * var(--ui-scale, 1)) solid var(--line); }
.ra-dept-chip.is-empty { font-style: italic; }
.ra-agent-delete { flex: 0 0 auto; align-self: center; width: calc(36px * var(--ui-scale, 1)); height: calc(36px * var(--ui-scale, 1)); margin-right: calc(6px * var(--ui-scale, 1)); display: grid; place-items: center; border: calc(1px * var(--ui-scale, 1)) solid transparent; border-radius: calc(10px * var(--ui-scale, 1)); background: transparent; color: var(--muted); cursor: pointer; }
.ra-agent-delete:hover { color: var(--red); border-color: var(--line); background: var(--surface); }

.ra-editor { border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(14px * var(--ui-scale, 1)); background: var(--canvas); padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)); min-width: 0; scroll-margin-top: calc(16px * var(--ui-scale, 1)); }
.ra-editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(10px * var(--ui-scale, 1)); margin-bottom: calc(12px * var(--ui-scale, 1)); }
.ra-kicker { font-size: calc(12px * var(--ui-scale, 1)); font-weight: 800; letter-spacing: .08em; color: var(--blue); }
.ra-editor-head strong { font: 800 calc(15px * var(--ui-scale, 1)) var(--display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12px * var(--ui-scale, 1)); }
.ra-field { display: grid; gap: calc(6px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); font-weight: 800; color: var(--ink); }
.ra-field > span { font-weight: 600; color: var(--muted); }
.ra-field input { width: 100%; min-width: 0; min-height: calc(44px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(12px * var(--ui-scale, 1)); background: var(--surface); color: var(--ink); font: 600 calc(14px * var(--ui-scale, 1)) var(--font); }
.ra-field input:focus, .ra-search input:focus, .ra-company-field select:focus { outline: calc(2px * var(--ui-scale, 1)) solid var(--blue); outline-offset: calc(1px * var(--ui-scale, 1)); border-color: var(--blue); }
.ra-fieldset { margin: calc(14px * var(--ui-scale, 1)) 0 0; padding: 0; border: 0; min-width: 0; }
.ra-fieldset legend { padding: 0; margin-bottom: calc(8px * var(--ui-scale, 1)); font-size: calc(12px * var(--ui-scale, 1)); font-weight: 800; color: var(--ink); }
.ra-chip-options { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui-scale, 1)); }
.ra-chip-option { position: relative; display: inline-flex; align-items: center; gap: calc(8px * var(--ui-scale, 1)); min-height: calc(40px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(999px * var(--ui-scale, 1)); background: var(--surface); color: var(--ink); font-size: calc(13px * var(--ui-scale, 1)); font-weight: 700; cursor: pointer; }
.ra-chip-option input { width: calc(18px * var(--ui-scale, 1)); height: calc(18px * var(--ui-scale, 1)); margin: 0; accent-color: var(--blue); }
.ra-chip-option:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.ra-editor-next { display: flex; justify-content: flex-end; margin-top: calc(14px * var(--ui-scale, 1)); }
.ra-editor-next .button { min-height: calc(40px * var(--ui-scale, 1)); }

.ra-empty { display: grid; justify-items: center; gap: calc(6px * var(--ui-scale, 1)); padding: calc(26px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)); text-align: center; color: var(--muted); border: calc(1px * var(--ui-scale, 1)) dashed var(--line); border-radius: calc(14px * var(--ui-scale, 1)); }
.ra-empty > span { font-size: calc(22px * var(--ui-scale, 1)); color: var(--blue); }
.ra-empty strong { color: var(--ink); font-size: calc(14px * var(--ui-scale, 1)); }
.ra-empty p { margin: 0; font-size: calc(12px * var(--ui-scale, 1)); }

/* Step 2: channel status cards side by side on wide screens. */
#ra-step-channels .admin-channel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10px * var(--ui-scale, 1)); }
#ra-step-channels .admin-channel-status { min-height: calc(104px * var(--ui-scale, 1)); align-content: start; }

.ra-invite-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(240px * var(--ui-scale, 1)), calc(320px * var(--ui-scale, 1))); gap: calc(16px * var(--ui-scale, 1)); align-items: start; }
.ra-invite-panel { display: grid; gap: calc(12px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(14px * var(--ui-scale, 1)); background: var(--canvas); padding: calc(16px * var(--ui-scale, 1)); min-width: 0; }
.ra-invite-agent { display: flex; align-items: center; gap: calc(10px * var(--ui-scale, 1)); }
.ra-invite-agent > div { display: grid; gap: calc(4px * var(--ui-scale, 1)); justify-items: start; }
.ra-invite-agent strong { font: 800 calc(14px * var(--ui-scale, 1)) var(--display); color: var(--ink); }
.ra-invite-hint, .ra-invite-requirement { margin: 0; font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); line-height: 1.45; }
.ra-invite-actions { display: flex; flex-wrap: wrap; gap: calc(10px * var(--ui-scale, 1)); }
.ra-invite-actions .button { min-height: calc(44px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)); font-size: calc(13px * var(--ui-scale, 1)); }
.ra-invite-actions .button:disabled { opacity: .5; cursor: not-allowed; }
.ra-mailbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(10px * var(--ui-scale, 1)); padding: calc(14px * var(--ui-scale, 1)); border: calc(1px * var(--ui-scale, 1)) solid var(--line); border-radius: calc(14px * var(--ui-scale, 1)); background: var(--surface); }
.ra-mailbox .button { grid-column: 1 / -1; min-height: calc(40px * var(--ui-scale, 1)); }
.ra-mailbox-icon { width: calc(34px * var(--ui-scale, 1)); height: calc(34px * var(--ui-scale, 1)); display: grid; place-items: center; border-radius: calc(12px * var(--ui-scale, 1)); background: var(--blue-soft); color: var(--blue); }
.ra-mailbox-copy { display: grid; gap: calc(2px * var(--ui-scale, 1)); min-width: 0; }
.ra-mailbox-copy strong { font-size: calc(13px * var(--ui-scale, 1)); color: var(--ink); }
.ra-mailbox-copy span { font-size: calc(12px * var(--ui-scale, 1)); color: var(--ink); overflow-wrap: anywhere; }
.ra-mailbox-copy small { font-size: calc(12px * var(--ui-scale, 1)); color: var(--muted); }
.ra-mailbox-copy small.connected { color: var(--green); font-weight: 700; }
.ra-mailbox-copy small.disconnected { color: var(--orange); font-weight: 700; }

html[data-theme="dark"] .ra-step-link.is-done .ra-step-num,
html[data-theme="dark"] .ra-step-badge,
html[data-theme="dark"] .ra-agent-card.is-selected .ra-avatar { color: #0b1220; }

@media (max-width: 900px) {
  .ra-agents-layout, .ra-invite-layout { grid-template-columns: 1fr; }
  .ra-agent-list { max-height: none; overflow: visible; }
  #ra-step-channels .admin-channel-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ra-header { align-items: stretch; }
  .ra-header-actions { width: 100%; }
  .ra-company-field { flex: 1 1 auto; }
  .ra-company-field select { min-width: 0; width: 100%; min-height: calc(44px * var(--ui-scale, 1)); }
  .ra-back { min-height: calc(44px * var(--ui-scale, 1)); }
  .ra-stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(6px * var(--ui-scale, 1)); }
  .ra-step-link { flex-direction: column; align-items: center; justify-content: center; gap: calc(4px * var(--ui-scale, 1)); min-height: calc(64px * var(--ui-scale, 1)); padding: calc(8px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)); text-align: center; }
  .ra-step-text strong { font-size: calc(12px * var(--ui-scale, 1)); }
  .ra-step-text small { display: none; }
  .ra-step { padding: calc(14px * var(--ui-scale, 1)); border-radius: calc(14px * var(--ui-scale, 1)); }
  .ra-step-header { flex-wrap: wrap; }
  .ra-step-header .ra-cta { width: 100%; }
  .ra-fields { grid-template-columns: 1fr; }
  .ra-invite-actions .button, .ra-editor-next .button { flex: 1 1 100%; }
  .ra-header-actions .ra-save { min-height: calc(44px * var(--ui-scale, 1)); flex: 1 1 auto; }
}
.sr-only { position: absolute !important; width: calc(1px * var(--ui-scale, 1)); height: calc(1px * var(--ui-scale, 1)); padding: 0; margin: calc(-1px * var(--ui-scale, 1)); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ra-fields { align-items: end; }

/* Agentadministrasjon: administrators only. Hidden for everyone else even
   before JavaScript runs; the workspace switcher is only a link for admins. */
body:not(.role-admin) #admin-agents-nav,
body:not(.role-admin) #admin-agents-tab { display: none !important; }
.workspace-switcher.is-admin-entry { cursor: pointer; }


/* Mobile landscape: unlock vertical page scrolling so headings never trap content below the fold. */
@media (orientation: landscape) and (max-height: 600px), (max-width: 900px) and (orientation: landscape) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }

  .app-shell {
    height: auto !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .main-content {
    height: auto !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .auth-screen-backdrop {
    position: fixed !important;
    inset: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    align-items: flex-start !important;
    padding: calc(16px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(32px * var(--ui-scale, 1)) !important;
  }

  .modal-backdrop,
  .modal-overlay {
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: calc(16px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(32px * var(--ui-scale, 1)) !important;
  }

  .modal-card {
    margin: calc(12px * var(--ui-scale, 1)) auto !important;
    max-height: none !important;
  }

  .content-scroll,
  .content-scroll.mobile-scroll-locked {
    display: block !important;
    flex: none !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    padding-bottom: max(calc(32px * var(--ui-scale, 1)), env(safe-area-inset-bottom)) !important;
  }

  .content-scroll > .tab-view.active,
  #dashboard-tab.active,
  #customers-tab.active,
  #sms-tab.active,
  #email-tab.active,
  #statistics-tab.active,
  #admin-agents-tab.active {
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #dashboard-tab .dashboard-grid,
  #dashboard-tab .activity-card,
  #customers-tab #customer-directory-card,
  #sms-tab .inbox-layout,
  #email-tab .inbox-layout,
  #email-tab .email-inbox-layout {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #sms-tab .thread-panel,
  #sms-tab .conversation-panel,
  #email-tab .thread-panel,
  #email-tab .conversation-panel,
  #dashboard-tab .call-log-list,
  #customers-tab .customer-directory,
  #customers-tab #customer-detail-view-container:not(.hidden),
  #sms-tab .thread-list,
  #sms-tab .message-history,
  #email-tab .thread-list,
  #email-tab .message-history,
  #email-tab #email-chat-history {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Email Ticketing: Internal Notes, Agent Presence, and Signature */
.email-message-card.internal-note {
  border-color: rgba(217, 119, 6, 0.38);
  background: rgba(254, 243, 199, 0.45);
}

.email-message-card.internal-note .email-message-card-head {
  background: rgba(251, 191, 36, 0.18);
  border-bottom-color: rgba(217, 119, 6, 0.25);
}

.email-message-card.internal-note .email-message-card-head strong {
  color: #92400e;
}

.email-composer.internal-note-mode {
  border-color: rgba(217, 119, 6, 0.55) !important;
  background: rgba(254, 243, 199, 0.22);
}

#btn-email-internal-note.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(217, 119, 6, 0.55);
  color: #92400e;
  font-weight: 700;
}

.email-presence-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
  padding: calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 600;
  color: #1e40af;
  background: rgba(59, 130, 246, 0.12);
  border: calc(1px * var(--ui-scale, 1)) solid rgba(59, 130, 246, 0.28);
}

.email-presence-pill.is-typing {
  color: #92400e;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(217, 119, 6, 0.38);
}

.thread-presence-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(3px * var(--ui-scale, 1));
  padding: calc(2px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  font-size: calc(10.5px * var(--ui-scale, 1));
  font-weight: 600;
  color: #1e40af;
  background: rgba(59, 130, 246, 0.12);
  border: calc(1px * var(--ui-scale, 1)) solid rgba(59, 130, 246, 0.24);
}

.email-signature {
  color: var(--muted);
  font-size: calc(12.5px * var(--ui-scale, 1));
  opacity: 0.92;
}

html[data-theme="dark"] .email-message-card.internal-note {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(120, 53, 15, 0.22);
}

html[data-theme="dark"] .email-message-card.internal-note .email-message-card-head {
  background: rgba(146, 64, 14, 0.34);
  border-bottom-color: rgba(245, 158, 11, 0.32);
}

html[data-theme="dark"] .email-message-card.internal-note .email-message-card-head strong,
html[data-theme="dark"] #btn-email-internal-note.active {
  color: #fcd34d;
}

html[data-theme="dark"] .email-composer.internal-note-mode {
  border-color: rgba(245, 158, 11, 0.55) !important;
  background: rgba(120, 53, 15, 0.16);
}

html[data-theme="dark"] .email-presence-pill,
html[data-theme="dark"] .thread-presence-badge {
  color: #93c5fd;
  background: rgba(30, 58, 138, 0.38);
  border-color: rgba(96, 165, 250, 0.35);
}

html[data-theme="dark"] .email-presence-pill.is-typing {
  color: #fcd34d;
  background: rgba(146, 64, 14, 0.38);
  border-color: rgba(245, 158, 11, 0.42);
}

.ra-invite-channel-picker {
  margin: calc(4px * var(--ui-scale, 1)) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.ra-invite-channel-picker legend {
  padding: 0;
  margin-bottom: calc(8px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 800;
  color: var(--ink);
}

.ra-invite-channel-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(10px * var(--ui-scale, 1));
}

.ra-invite-channel-card {
  display: flex;
  align-items: flex-start;
  gap: calc(10px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  border: calc(1.5px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(12px * var(--ui-scale, 1));
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ra-invite-channel-card input[type="radio"] {
  margin-top: calc(2px * var(--ui-scale, 1));
  width: calc(17px * var(--ui-scale, 1));
  height: calc(17px * var(--ui-scale, 1));
  accent-color: var(--blue);
  flex: 0 0 auto;
}

.ra-invite-channel-card.is-selected {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.ra-invite-channel-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ra-invite-channel-body {
  display: grid;
  gap: calc(2px * var(--ui-scale, 1));
  min-width: 0;
}

.ra-invite-channel-body strong {
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 800;
  color: var(--ink);
}

.ra-invite-channel-body small {
  font-size: calc(11.5px * var(--ui-scale, 1));
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .ra-invite-channel-options {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TEST LOGIN BUTTON (LOCAL / TEST ENVIRONMENT)
   ========================================================================== */
.test-login-container {
  margin-top: calc(10px * var(--ui-scale, 1));
}

.button-test-login {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--ui-scale, 1));
  padding: calc(11px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  border-radius: calc(10px * var(--ui-scale, 1));
  border: calc(1.5px * var(--ui-scale, 1)) dashed var(--accent, #0d6b5c);
  background: rgba(13, 107, 92, 0.08);
  color: var(--ink);
  font-weight: 700;
  font-size: calc(13.5px * var(--ui-scale, 1));
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.button-test-login:hover {
  background: rgba(13, 107, 92, 0.15);
  border-style: solid;
  transform: translateY(calc(-1px * var(--ui-scale, 1)));
}

/* ==========================================================================
   MINIMALIST SIDEBAR TOP CONTROLS, UNIFIED FONT & DYNAMIC DESKTOP SCALING
   ========================================================================== */

.utility-rail,
.sidebar-footer {
  display: none !important;
}

:root {
  --ui-scale: 1;
}

@media (min-width: 901px) {
  .app-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh;
    overflow: hidden;
    grid-template-columns: calc(var(--sidebar-width, 268px) * var(--ui-scale, 1)) minmax(0, 1fr) !important;
    box-shadow: none;
    font-size: calc(15px * var(--ui-scale, 1));
  }

  .sidebar {
    height: 100dvh !important;
    min-height: 0 !important;
  }

  .main-content .topbar {
    padding: 0 calc(24px * var(--ui-scale, 1));
  }

  .main-content {
    height: 100dvh !important;
    max-height: 100dvh;
    overflow: hidden;
  }

  .main-content .content-scroll {
    padding: 0 calc(24px * var(--ui-scale, 1));
    overflow: hidden;
  }

  .main-content .content-scroll > .tab-view.active {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Unified Font Family & Size across the ENTIRE Left Sidebar (matching Oversikt & Kontakter) */
#primary-sidebar,
#primary-sidebar button,
#primary-sidebar select,
#primary-sidebar .workspace-switcher strong,
#primary-sidebar .workspace-switcher small,
#primary-sidebar .sidebar-top-controls .active-agent-label,
#primary-sidebar .sidebar-top-controls .active-agent-phone,
#primary-sidebar .sidebar-top-controls .queue-btn-text strong,
#primary-sidebar .sidebar-top-controls .queue-btn-text small,
#primary-sidebar .sidebar-top-controls .queue-info strong,
#primary-sidebar .sidebar-top-controls .queue-info small,
#primary-sidebar .nav-item,
#primary-sidebar .agent-department-heading,
#primary-sidebar .agent-department-empty,
#primary-sidebar .agent-mini strong,
#primary-sidebar .agent-mini small {
  font-family: var(--font) !important;
  font-size: calc(14px * var(--ui-scale, 1)) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.sidebar .workspace-switcher {
  padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  margin-bottom: calc(8px * var(--ui-scale, 1));
  border-radius: calc(12px * var(--ui-scale, 1));
  gap: calc(10px * var(--ui-scale, 1));
}

.sidebar .workspace-switcher > span:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar .workspace-switcher strong,
.sidebar .workspace-switcher small {
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#primary-sidebar .sidebar-top-controls,
.sidebar.mobile-open .sidebar-top-controls {
  display: flex !important;
  flex-direction: column;
  gap: calc(4px * var(--ui-scale, 1));
  margin: 0 0 calc(4px * var(--ui-scale, 1));
  padding: 0 0 calc(4px * var(--ui-scale, 1));
  border-bottom: calc(1px * var(--ui-scale, 1)) solid rgba(255, 255, 255, 0.12);
  width: 100%;
  min-width: 0;
}

#primary-sidebar .sidebar-top-controls .utility-agent-select,
.sidebar.mobile-open .sidebar-top-controls .utility-agent-select {
  margin: 0 !important;
  width: 100%;
}

#primary-sidebar .sidebar-top-controls .active-agent-select-wrapper,
.sidebar.mobile-open .sidebar-top-controls .active-agent-select-wrapper {
  width: 100%;
}

#primary-sidebar .sidebar-top-controls .user-menu,
.sidebar.mobile-open .sidebar-top-controls .user-menu {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  width: 100%;
  min-height: calc(30px * var(--ui-scale, 1));
  padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border-radius: calc(8px * var(--ui-scale, 1));
  background: rgba(255, 255, 255, 0.06);
  border: calc(1px * var(--ui-scale, 1)) solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  box-sizing: border-box;
}

#primary-sidebar .sidebar-top-controls .user-avatar,
.sidebar.mobile-open .sidebar-top-controls .user-avatar {
  width: calc(22px * var(--ui-scale, 1));
  height: calc(22px * var(--ui-scale, 1));
  font-size: calc(10.5px * var(--ui-scale, 1)) !important;
  flex-shrink: 0;
}

#primary-sidebar .sidebar-top-controls .active-agent-info-wrap,
.sidebar.mobile-open .sidebar-top-controls .active-agent-info-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6px * var(--ui-scale, 1));
  flex: 1 1 auto;
  min-width: 0;
}

#primary-sidebar .sidebar-top-controls .active-agent-label,
.sidebar.mobile-open .sidebar-top-controls .active-agent-label {
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(12.5px * var(--ui-scale, 1)) !important;
}

#primary-sidebar .sidebar-top-controls .active-agent-phone,
.sidebar.mobile-open .sidebar-top-controls .active-agent-phone {
  color: #9db0a8;
  white-space: nowrap;
  margin: 0;
  font-size: calc(11px * var(--ui-scale, 1)) !important;
}

#primary-sidebar .sidebar-top-controls .user-menu > .chevron,
.sidebar.mobile-open .sidebar-top-controls .user-menu > .chevron {
  font-size: calc(11px * var(--ui-scale, 1)) !important;
  color: #9db0a8;
  margin-left: calc(2px * var(--ui-scale, 1));
}

/* Minimalist Område accordion in sidebar */
#primary-sidebar .sidebar-top-controls #agent-controls-rail-section,
.sidebar.mobile-open .sidebar-top-controls #agent-controls-rail-section {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  width: 100%;
}

#primary-sidebar .sidebar-top-controls #queue-card-wrapper,
.sidebar.mobile-open .sidebar-top-controls #queue-card-wrapper {
  border-radius: calc(9px * var(--ui-scale, 1)) !important;
  min-height: calc(28px * var(--ui-scale, 1)) !important;
  padding: calc(5px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
  gap: calc(3px * var(--ui-scale, 1)) !important;
}

#primary-sidebar .sidebar-top-controls #btn-toggle-queue-panel,
.sidebar.mobile-open .sidebar-top-controls #btn-toggle-queue-panel {
  min-height: calc(24px * var(--ui-scale, 1)) !important;
  padding: 0 !important;
  gap: calc(8px * var(--ui-scale, 1)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
}

#primary-sidebar .sidebar-top-controls .queue-btn-icon,
.sidebar.mobile-open .sidebar-top-controls .queue-btn-icon {
  width: calc(18px * var(--ui-scale, 1)) !important;
  height: calc(18px * var(--ui-scale, 1)) !important;
  border-radius: calc(4px * var(--ui-scale, 1)) !important;
  flex-shrink: 0;
}

#primary-sidebar .sidebar-top-controls .queue-btn-text,
.sidebar.mobile-open .sidebar-top-controls .queue-btn-text {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: calc(6px * var(--ui-scale, 1)) !important;
  flex: 1 1 auto;
  min-width: 0;
}

#primary-sidebar .sidebar-top-controls .queue-btn-text strong,
.sidebar.mobile-open .sidebar-top-controls .queue-btn-text strong {
  margin: 0 !important;
  font-size: calc(12.5px * var(--ui-scale, 1)) !important;
}

#primary-sidebar .sidebar-top-controls .queue-btn-text small,
.sidebar.mobile-open .sidebar-top-controls .queue-btn-text small {
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(130px * var(--ui-scale, 1));
  font-size: calc(11.5px * var(--ui-scale, 1)) !important;
}

#primary-sidebar .sidebar-top-controls .queue-chevron,
.sidebar.mobile-open .sidebar-top-controls .queue-chevron {
  font-size: calc(11px * var(--ui-scale, 1)) !important;
  position: static !important;
  transform: none !important;
}

/* Divider line under Agentadministrasjon separating navigation from agent status list */
#primary-sidebar .sidebar-agents-divider {
  border: 0;
  height: calc(1px * var(--ui-scale, 1));
  background: rgba(255, 255, 255, 0.14);
  margin: calc(14px * var(--ui-scale, 1)) 0;
  width: 100%;
  flex-shrink: 0;
}

#primary-sidebar .agent-department-heading {
  text-transform: none !important;
  color: var(--sidebar-muted) !important;
  margin: 0 0 calc(8px * var(--ui-scale, 1)) !important;
  text-align: left !important;
  padding: 0 calc(10px * var(--ui-scale, 1)) !important;
}

#primary-sidebar .agent-mini {
  text-align: left !important;
}

/* Compact Sentralbord bar with phone number AND central email directly under the logo */
#primary-sidebar .sidebar-sentralbord-footer {
  display: block !important;
  margin: calc(-4px * var(--ui-scale, 1)) 0 calc(4px * var(--ui-scale, 1)) !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100%;
}

#primary-sidebar #sentralbord-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: calc(7px * var(--ui-scale, 1)) !important;
  row-gap: calc(1px * var(--ui-scale, 1)) !important;
  padding: calc(5px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)) !important;
  margin: 0 !important;
  border-radius: calc(9px * var(--ui-scale, 1)) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: calc(1px * var(--ui-scale, 1)) solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#primary-sidebar #sentralbord-card .service-card-heading {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  min-width: 0;
}

#primary-sidebar #sentralbord-card .service-icon {
  width: calc(19px * var(--ui-scale, 1)) !important;
  height: calc(19px * var(--ui-scale, 1)) !important;
  border-radius: calc(5px * var(--ui-scale, 1)) !important;
  background: rgba(56, 189, 248, 0.14) !important;
  color: #7dd3fc !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

#primary-sidebar #sentralbord-card .service-icon svg {
  width: calc(12px * var(--ui-scale, 1)) !important;
  height: calc(12px * var(--ui-scale, 1)) !important;
}

#primary-sidebar #sentralbord-card .service-card-heading h2 {
  display: none !important;
}

#primary-sidebar #sentralbord-card strong#central-number-display:not(.channel-off) {
  grid-column: 2;
  grid-row: 1;
  display: block !important;
  margin: 0 !important;
  font-family: var(--font) !important;
  font-size: calc(11.5px * var(--ui-scale, 1)) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #e2e8f0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#primary-sidebar #sentralbord-card #central-email-display:not(.channel-off) {
  grid-column: 2;
  grid-row: 2;
  display: block !important;
  margin: 0 !important;
  font-family: var(--font) !important;
  font-size: calc(10.5px * var(--ui-scale, 1)) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #94a3b8 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ==========================================================================
   EMAIL TICKETING SYSTEM V2 — STREAMLINED DESK & MOBILE ARCHITECTURE
   ========================================================================== */

#email-tab.et-redesign {
  display: none;
  flex-direction: column;
  gap: calc(6px * var(--ui-scale, 1));
}

#email-tab.et-redesign.active {
  display: flex;
}

@media (min-width: 901px) {
  #email-tab.et-redesign.active {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }
}

/* Compact Unboxed Header */
#email-tab .et-command-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-scale, 1));
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  flex: 0 0 auto;
}

#email-tab .et-command-title-group {
  min-width: 0;
}

#email-tab .et-command-title-group .eyebrow {
  display: none;
}

.et-title-row {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
  flex-wrap: wrap;
}

.et-title-row h1 {
  margin: 0;
  font-size: calc(20px * var(--ui-scale, 1));
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.et-mailbox-address {
  display: none !important;
}

.et-kpi-strip.hidden {
  display: none !important;
}

.et-command-actions {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  flex-shrink: 0;
}

.et-action-btn {
  min-height: calc(32px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  border-radius: calc(8px * var(--ui-scale, 1));
  white-space: nowrap;
}

.et-action-btn.active {
  border-color: var(--blue, #0d6b5c);
  color: var(--blue, #0d6b5c);
  background: var(--blue-soft, rgba(13, 107, 92, 0.08));
}

/* Vertical Left Rail for Folders & Status Filters on Desktop */
#email-tab .et-toolbar-bar {
  display: flex;
  flex-direction: column;
  padding: calc(8px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
  margin: 0;
  background: var(--canvas);
  border-right: calc(1px * var(--ui-scale, 1)) solid var(--line);
  flex: 0 0 auto;
  min-width: 0;
}

#email-tab .email-toolbar-tabs.et-folder-status-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(4px * var(--ui-scale, 1));
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
}

.et-segmented-folders,
.et-segmented-statuses {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(2px * var(--ui-scale, 1));
  width: 100%;
}

#email-tab .et-folder-status-tabs .email-toolbar-divider {
  display: block !important;
  width: 100%;
  height: calc(1px * var(--ui-scale, 1));
  background: var(--line);
  margin: calc(5px * var(--ui-scale, 1)) 0;
  flex-shrink: 0;
}

#email-tab .email-toolbar-tabs.et-folder-status-tabs :is(.email-folder-btn, .ticket-filter-btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: calc(30px * var(--ui-scale, 1));
  padding: calc(5px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border-radius: calc(7px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 600;
  gap: calc(6px * var(--ui-scale, 1));
  box-sizing: border-box;
  text-align: left;
}

#email-tab .email-toolbar-tabs.et-folder-status-tabs :is(.email-folder-btn, .ticket-filter-btn):hover {
  color: var(--ink);
  background: rgba(15, 23, 42, 0.04);
}

#email-tab .email-toolbar-tabs.et-folder-status-tabs :is(.email-folder-btn, .ticket-filter-btn).active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) rgba(15, 23, 42, 0.05);
  font-weight: 700;
}

#email-tab .email-toolbar-tabs.et-folder-status-tabs .et-folder-label {
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: calc(12px * var(--ui-scale, 1)) !important;
  font-weight: inherit !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#email-tab .email-toolbar-tabs.et-folder-status-tabs :is(#email-folder-count-drafts, #email-folder-count-spam, .filter-count) {
  padding: calc(1px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
  border-radius: calc(5px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted);
}

/* Inbox counter: ONLY the new-emails digit is colored in blue! */
#email-tab #email-folder-count-inbox {
  display: inline-flex;
  align-items: center;
  gap: calc(1px * var(--ui-scale, 1));
  padding: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#email-tab #email-folder-count-inbox .et-count-new,
#email-tab #email-folder-count-inbox .inbox-new-count {
  color: #2563eb !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: calc(11.5px * var(--ui-scale, 1)) !important;
  font-weight: 800 !important;
}

#email-tab #email-folder-count-inbox .et-count-sep,
#email-tab #email-folder-count-inbox .et-count-total,
#email-tab #email-folder-count-inbox .inbox-count-sep,
#email-tab #email-folder-count-inbox .inbox-total-count {
  background: transparent !important;
  color: var(--muted) !important;
  padding: 0 !important;
  font-weight: 600 !important;
}

/* Queue Controls (Search + 2 Compact Dropdowns inside Queue Panel) */
.et-queue-controls {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-scale, 1));
  padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
  background: var(--surface);
  flex: 0 0 auto;
}

.et-queue-search-row {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
}

.et-queue-search {
  margin: 0 !important;
  height: calc(32px * var(--ui-scale, 1));
  flex: 1 1 auto;
  min-width: 0;
}

.et-mobile-filter-btn,
.et-mobile-inspector-bar {
  display: none;
}

.et-precision-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(6px * var(--ui-scale, 1));
}

.et-filter-select {
  width: 100%;
  min-width: 0;
  height: calc(28px * var(--ui-scale, 1));
  padding: 0 calc(18px * var(--ui-scale, 1)) 0 calc(7px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 600;
  color: var(--ink);
  background-color: var(--canvas);
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(7px * var(--ui-scale, 1));
  cursor: pointer;
  text-overflow: ellipsis;
}

.et-pull-refresh {
  padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  text-align: center;
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 700;
  color: var(--blue, #0d6b5c);
  background: var(--blue-soft, #e9f4f1);
  border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
  flex: 0 0 auto;
}

body.et-resizing-panels,
body.et-resizing-panels * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* Desktop Workspace Grid (min-width: 901px only!) */
@media (min-width: 901px) {
  #email-tab .et-workspace-layout {
    --et-queue-width: calc(330px * var(--ui-scale, 1));
    display: grid !important;
    grid-template-columns: calc(146px * var(--ui-scale, 1)) var(--et-queue-width, calc(330px * var(--ui-scale, 1))) minmax(0, 1fr) minmax(calc(265px * var(--ui-scale, 1)), calc(300px * var(--ui-scale, 1)));
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto;
    border: calc(1px * var(--ui-scale, 1)) solid var(--line);
    border-radius: calc(14px * var(--ui-scale, 1));
    overflow: hidden !important;
    background: var(--surface);
  }

  #email-tab .et-workspace-layout:has(#email-inspector-panel.hidden) {
    grid-template-columns: calc(146px * var(--ui-scale, 1)) var(--et-queue-width, calc(330px * var(--ui-scale, 1))) minmax(0, 1fr);
  }

  /* Hide Utvid buttons on desktop as requested */
  #email-tab #btn-toggle-email-wide,
  #email-tab #btn-toggle-email-composer {
    display: none !important;
  }
}

/* Pane 1: Smart Queue Panel */
.et-queue-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: calc(1px * var(--ui-scale, 1)) solid var(--line);
  background: var(--surface);
  min-height: 0;
}

/* Horizontal Drag Resizer Handle along the right edge of the email list */
.et-queue-resizer {
  position: absolute;
  top: 0;
  right: calc(-5px * var(--ui-scale, 1));
  bottom: 0;
  width: calc(10px * var(--ui-scale, 1));
  cursor: col-resize;
  z-index: 20;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.et-queue-resizer::after {
  content: "";
  width: calc(3px * var(--ui-scale, 1));
  height: calc(36px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  background: var(--line);
  opacity: 0.55;
  transition: background-color 0.15s ease, height 0.15s ease, opacity 0.15s ease;
}

.et-queue-resizer:hover::after,
.et-queue-resizer.is-dragging::after {
  background: var(--blue, #0d6b5c);
  height: calc(56px * var(--ui-scale, 1));
  opacity: 1;
}

.et-queue-head {
  display: none !important;
}

.et-ticket-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--ui-scale, 1));
}

/* Optional Sender Group Header when "Etter avsender" is selected */
.et-sender-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1));
  margin-top: calc(4px * var(--ui-scale, 1));
  font-size: calc(10.5px * var(--ui-scale, 1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
}

.et-sender-group-header small {
  font-size: calc(10px * var(--ui-scale, 1));
  font-weight: 700;
  padding: calc(1px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  background: var(--canvas);
  color: var(--muted);
}

/* Minimalist, Modern Ticket Card */
.et-ticket-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--ui-scale, 1));
  padding: calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid transparent;
  border-bottom-color: var(--line);
  border-radius: calc(9px * var(--ui-scale, 1));
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.et-ticket-card.unread-thread {
  background: var(--canvas);
  border-color: rgba(13, 107, 92, 0.22);
}

.et-ticket-card:hover {
  background: var(--canvas);
  border-color: var(--line);
}

.et-ticket-card.active {
  background: var(--blue-soft, rgba(13, 107, 92, 0.08));
  border-color: var(--blue, #0d6b5c);
}

.et-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
}

.et-card-id-group {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  min-width: 0;
}

.et-ticket-num {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: calc(10.5px * var(--ui-scale, 1));
  font-weight: 600;
  color: var(--muted);
  opacity: 0.8;
  flex-shrink: 0;
}

.et-card-customer {
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.et-ticket-card.unread-thread .et-card-customer {
  font-weight: 800;
}

.et-card-time {
  font-size: calc(11px * var(--ui-scale, 1));
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.et-card-subject-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6px * var(--ui-scale, 1));
}

.et-card-subject {
  font-size: calc(12.5px * var(--ui-scale, 1));
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.et-ticket-card.unread-thread .et-card-subject {
  font-weight: 700;
}

.et-card-bottom-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
  min-width: 0;
}

.et-card-snippet {
  margin: 0;
  font-size: calc(11.5px * var(--ui-scale, 1));
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* Vibrant Colorful Metadata Pills & Waiting Timers (E-post & Meldinger) */
.et-colorful-meta-row,
.et-case-badges-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(5px * var(--ui-scale, 1));
  margin-top: calc(3px * var(--ui-scale, 1));
}

.et-case-badges-row.hidden {
  display: none !important;
}

.et-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--ui-scale, 1));
  padding: calc(2px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  border: calc(1px * var(--ui-scale, 1)) solid transparent;
  font-variant-numeric: tabular-nums;
}

/* Status: Ny (Vivid Blue) */
.et-meta-pill.pill-status-open {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

/* Status: Under arbeid (Vivid Amber/Orange) */
.et-meta-pill.pill-status-progress {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

/* Status: Lukket (Vivid Emerald Green) */
.et-meta-pill.pill-status-closed {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}

/* Status: Utkast (Vivid Purple) */
.et-meta-pill.pill-status-draft {
  background: #f3e8ff;
  color: #6d28d9;
  border-color: #d8b4fe;
}

/* Assigned Agent: Who took the email (Vivid Violet/Indigo) */
.et-meta-pill.pill-agent {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
}

/* Unassigned New Email: Ikke tildelt */
.et-meta-pill.pill-unassigned {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

/* Depot / Garaj (Vivid Sky Cyan) */
.et-meta-pill.pill-depot {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #7dd3fc;
}

.et-meta-pill.pill-neutral {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

/* SMS source marker: Socialboards (diverted BML SMS) and MBN (agent line) */
.et-meta-pill.pill-source-socialboards {
  background: #eef2ff;
  color: #4338ca;
  border-color: #a5b4fc;
}

.et-meta-pill.pill-source-mbn {
  background: #ecfdf5;
  color: #047857;
  border-color: #6ee7b7;
}

.et-meta-pill.pill-source-mixed {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}

/* Waiting Timer Badges (colored by how long customer has been waiting) */
.et-meta-pill.pill-waiting.waiting-normal {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #a5b4fc;
}

.et-meta-pill.pill-waiting.waiting-warning {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fdba74;
}

.et-meta-pill.pill-waiting.waiting-critical {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* Dark mode variants for colorful pills */
html[data-theme="dark"] .et-meta-pill.pill-status-open {
  background: rgba(37, 99, 235, 0.24);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-status-progress {
  background: rgba(217, 119, 6, 0.24);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-status-closed {
  background: rgba(5, 150, 105, 0.24);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-agent {
  background: rgba(124, 58, 237, 0.24);
  color: #ddd6fe;
  border-color: rgba(167, 139, 250, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-unassigned {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.38);
}

html[data-theme="dark"] .et-meta-pill.pill-depot {
  background: rgba(2, 132, 199, 0.24);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-source-socialboards {
  background: rgba(79, 70, 229, 0.25);
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-source-mbn {
  background: rgba(5, 150, 105, 0.24);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-source-mixed {
  background: rgba(217, 119, 6, 0.24);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-waiting.waiting-normal {
  background: rgba(79, 70, 229, 0.25);
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-waiting.waiting-warning {
  background: rgba(234, 88, 12, 0.25);
  color: #fdba74;
  border-color: rgba(251, 146, 60, 0.45);
}

html[data-theme="dark"] .et-meta-pill.pill-waiting.waiting-critical {
  background: rgba(220, 38, 38, 0.26);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.45);
}

/* Single-Email Reading Pane (Never Chat-Style!) */
.et-timeline-history {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-scale, 1));
}

.et-single-email-switcher {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  flex-wrap: wrap;
  padding: calc(4px * var(--ui-scale, 1));
  background: var(--canvas);
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(10px * var(--ui-scale, 1));
  align-self: flex-start;
}

.et-single-email-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  padding: calc(5px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border-radius: calc(7px * var(--ui-scale, 1));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
}

.et-single-email-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1)) rgba(15, 23, 42, 0.08);
}

.email-message-card.et-single-email-doc {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  align-self: stretch !important;
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(12px * var(--ui-scale, 1));
  background: var(--surface);
  box-shadow: 0 calc(2px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) rgba(15, 23, 42, 0.04);
}

.email-message-card.et-single-email-doc .email-message-card-head {
  padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  background: var(--canvas);
  border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
}

.email-message-card.et-single-email-doc .email-body-html {
  padding: calc(18px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));
  font-size: calc(14px * var(--ui-scale, 1));
  line-height: 1.6;
}

.et-doc-sender-addr {
  font-size: calc(12px * var(--ui-scale, 1));
  color: var(--muted);
  font-weight: 500;
}

.et-empty-timeline {
  margin: auto;
  max-width: calc(400px * var(--ui-scale, 1));
  text-align: center;
}

.et-empty-card {
  padding: calc(24px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) dashed var(--line);
  border-radius: calc(12px * var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
}

.et-empty-card h3 {
  margin: calc(4px * var(--ui-scale, 1)) 0 0;
  font-size: calc(15px * var(--ui-scale, 1));
  font-weight: 800;
}

.et-empty-card p {
  margin: 0;
  font-size: calc(12.5px * var(--ui-scale, 1));
  color: var(--muted);
  line-height: 1.45;
}

.et-msg-header-inline {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--ui-scale, 1));
  flex-wrap: wrap;
  min-width: 0;
}

.et-msg-header-inline strong {
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 700;
  color: var(--ink);
}

.et-msg-role-tag {
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  padding: calc(2px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
}

.et-msg-role-tag.is-inbound {
  background: #dbeafe;
  color: #1d4ed8;
}

.et-msg-role-tag.is-outbound {
  background: #d1fae5;
  color: #047857;
}

.et-msg-cc {
  font-size: calc(11.5px * var(--ui-scale, 1));
  color: var(--muted);
}

/* Smart Mode-Switching Composer Dock */
.et-composer-dock {
  border-top: calc(1px * var(--ui-scale, 1)) solid var(--line);
  background: var(--surface);
  padding: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  overflow: visible !important;
}

.et-smart-composer,
.email-composer.et-smart-composer {
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  gap: calc(6px * var(--ui-scale, 1));
  overflow: visible !important;
}

.email-composer.et-smart-composer > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.email-composer.et-smart-composer #email-text-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  align-self: stretch;
}

.email-composer.et-smart-composer .email-composer-actions {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
  overflow: visible !important;
}

/* Ensure Maler popup in E-post opens to the right and is never cut off */
#email-tab .template-picker {
  position: relative;
}

#email-tab #email-template-menu,
#email-tab .template-menu {
  left: 0 !important;
  right: auto !important;
  bottom: calc(100% + calc(8px * var(--ui-scale, 1))) !important;
  width: min(calc(320px * var(--ui-scale, 1)), calc(100vw - calc(32px * var(--ui-scale, 1)))) !important;
  z-index: 80 !important;
}

/* 3-dots button in composer visible on both desktop and mobile to hide non-essential buttons */
.et-mobile-tools-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: calc(32px * var(--ui-scale, 1));
  min-width: calc(34px * var(--ui-scale, 1));
  padding: calc(4px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 800;
  letter-spacing: calc(1px * var(--ui-scale, 1));
  border-radius: calc(8px * var(--ui-scale, 1));
}

.et-mobile-tools-btn.active {
  border-color: var(--blue, #0d6b5c) !important;
  color: var(--blue, #0d6b5c) !important;
  background: var(--blue-soft, rgba(13, 107, 92, 0.12)) !important;
}

/* Hide non-essential composer buttons (A, Signatur) until 3-dots button is clicked */
#email-tab:not(.mobile-composer-tools-open) .et-secondary-compose-tool {
  display: none !important;
}

.et-composer-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  gap: calc(8px * var(--ui-scale, 1));
  flex-wrap: wrap;
}

.et-composer-modes {
  display: inline-flex;
  align-items: center;
  gap: calc(3px * var(--ui-scale, 1));
  background: var(--canvas);
  padding: calc(2px * var(--ui-scale, 1));
  border-radius: calc(8px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
}

.et-mode-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 700;
  padding: calc(4px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  border-radius: calc(6px * var(--ui-scale, 1));
  cursor: pointer;
}

.et-mode-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) rgba(0, 0, 0, 0.06);
}

.et-composer-head-tools {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  min-width: 0;
}

.et-recipient-toggle-btn {
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border-radius: calc(7px * var(--ui-scale, 1));
  cursor: pointer;
}

.et-recipient-toggle-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* Collapsible Recipient & Subject Drawer */
.et-recipient-drawer,
.email-recipient-bar.et-recipient-drawer,
.email-recipient-bar.et-recipient-drawer.hidden {
  display: none !important;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  gap: calc(6px * var(--ui-scale, 1));
  padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  background: var(--canvas);
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(9px * var(--ui-scale, 1));
}

.et-recipient-drawer.is-expanded:not(.hidden),
.email-recipient-bar.et-recipient-drawer.is-expanded:not(.hidden) {
  display: flex !important;
}

.et-contact-quick-select {
  max-width: calc(210px * var(--ui-scale, 1));
  height: calc(30px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(6px * var(--ui-scale, 1));
  padding: 0 calc(8px * var(--ui-scale, 1));
  background: var(--surface);
  color: var(--ink);
}

.et-subject-field-row {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
}

.et-subject-field-row label {
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  color: var(--muted);
  min-width: calc(44px * var(--ui-scale, 1));
}

.et-subject-field-row input {
  flex: 1;
  min-width: 0;
}

/* Hurtigsvar Bar: Always visible with a very thin, minimalist horizontal scrollbar */
#email-tab #et-quick-reply-bar,
.et-quick-reply-bar {
  display: flex !important;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
  overflow-x: auto !important;
  overflow-y: hidden;
  flex-wrap: nowrap !important;
  padding: calc(2px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1));
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}

#email-tab #et-quick-reply-bar::-webkit-scrollbar,
.et-quick-reply-bar::-webkit-scrollbar {
  display: block !important;
  height: calc(3px * var(--ui-scale, 1)) !important;
}

#email-tab #et-quick-reply-bar::-webkit-scrollbar-track,
.et-quick-reply-bar::-webkit-scrollbar-track {
  background: transparent;
}

#email-tab #et-quick-reply-bar::-webkit-scrollbar-thumb,
.et-quick-reply-bar::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: calc(999px * var(--ui-scale, 1));
}

#email-tab #et-quick-reply-bar:hover::-webkit-scrollbar-thumb,
.et-quick-reply-bar:hover::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.6);
}

.et-quick-reply-label {
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

.et-quick-chip {
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  background: var(--canvas);
  color: var(--ink);
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 600;
  padding: calc(3px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border-radius: calc(6px * var(--ui-scale, 1));
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.et-quick-chip:hover {
  border-color: var(--blue, #0d6b5c);
  background: var(--blue-soft, rgba(13, 107, 92, 0.08));
}

.et-always-close-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Pane 3: Customer 360° & Ticket Context Inspector */
.et-inspector-panel {
  border-left: calc(1px * var(--ui-scale, 1)) solid var(--line);
  background: var(--surface);
  overflow-y: auto;
  min-height: 0;
}

.et-inspector-content {
  padding: calc(12px * var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-scale, 1));
}

.et-inspector-empty {
  padding: calc(32px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  text-align: center;
  color: var(--muted);
}

.et-inspector-empty-icon {
  font-size: calc(24px * var(--ui-scale, 1));
  display: block;
  margin-bottom: calc(6px * var(--ui-scale, 1));
  opacity: 0.65;
}

.et-inspector-empty h3 {
  margin: 0 0 calc(4px * var(--ui-scale, 1));
  font-size: calc(14px * var(--ui-scale, 1));
  color: var(--ink);
}

.et-inspector-empty p {
  margin: 0;
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1.45;
}

.et-inspector-section {
  padding: calc(11px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(10px * var(--ui-scale, 1));
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-scale, 1));
}

.et-inspector-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
}

.et-inspector-eyebrow {
  font-size: calc(10px * var(--ui-scale, 1));
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.et-contact-match-badge {
  font-size: calc(10px * var(--ui-scale, 1));
  font-weight: 700;
  padding: calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
  border-radius: calc(5px * var(--ui-scale, 1));
}

.et-contact-match-badge.is-matched {
  background: rgba(13, 107, 92, 0.12);
  color: #0d6b5c;
}

.et-contact-match-badge.is-unmatched {
  background: rgba(100, 116, 139, 0.14);
  color: var(--muted);
}

.et-customer-hero {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
}

.et-customer-avatar {
  width: calc(38px * var(--ui-scale, 1));
  height: calc(38px * var(--ui-scale, 1));
  border-radius: calc(9px * var(--ui-scale, 1));
  background: var(--blue-soft, rgba(13, 107, 92, 0.14));
  color: var(--blue, #0d6b5c);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: calc(13.5px * var(--ui-scale, 1));
  flex-shrink: 0;
}

.et-customer-hero-copy {
  min-width: 0;
}

.et-customer-hero-copy h4 {
  margin: 0;
  font-size: calc(13.5px * var(--ui-scale, 1));
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.et-customer-hero-copy p {
  margin: calc(2px * var(--ui-scale, 1)) 0 0;
  font-size: calc(11.5px * var(--ui-scale, 1));
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.et-customer-role {
  display: inline-block;
  margin-top: calc(2px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 600;
  color: var(--blue, #0d6b5c);
}

.et-customer-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(6px * var(--ui-scale, 1));
}

.et-kv-cell {
  padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border-radius: calc(7px * var(--ui-scale, 1));
  background: var(--canvas);
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--ui-scale, 1));
  min-width: 0;
}

.et-kv-cell span {
  font-size: calc(10px * var(--ui-scale, 1));
  color: var(--muted);
}

.et-kv-cell strong {
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.et-inspector-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(5px * var(--ui-scale, 1));
}

.et-insp-btn {
  padding: calc(5px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  justify-content: center;
}

.et-ticket-code-chip {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  color: var(--muted);
}

.et-case-meta-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-scale, 1));
}

.et-case-meta-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
  font-size: calc(11.5px * var(--ui-scale, 1));
}

.et-case-meta-list dt {
  color: var(--muted);
}

.et-case-meta-list dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.et-inspector-attachments,
.et-cross-history-list {
  display: flex;
  flex-direction: column;
  gap: calc(5px * var(--ui-scale, 1));
}

.et-inspector-attachment-item,
.et-cross-item {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  padding: calc(6px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border-radius: calc(7px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  background: var(--canvas);
  color: var(--ink);
  text-decoration: none;
  font-size: calc(11.5px * var(--ui-scale, 1));
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.et-cross-item.is-static {
  cursor: default;
}

.et-inspector-attachment-item:hover,
.et-cross-item:not(.is-static):hover {
  border-color: var(--blue, #0d6b5c);
}

.et-att-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.et-att-copy strong,
.et-cross-title {
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.et-att-copy small,
.et-cross-item small {
  font-size: calc(10px * var(--ui-scale, 1));
  color: var(--muted);
  flex-shrink: 0;
}

.et-cross-tag {
  font-size: calc(10px * var(--ui-scale, 1));
  font-weight: 800;
  padding: calc(2px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
  border-radius: calc(5px * var(--ui-scale, 1));
  background: var(--blue-soft, rgba(13, 107, 92, 0.1));
  color: var(--blue, #0d6b5c);
  flex-shrink: 0;
}

.et-inspector-muted {
  margin: 0;
  font-size: calc(11.5px * var(--ui-scale, 1));
  color: var(--muted);
  line-height: 1.45;
}

/* ============================================================================
   KONTAKTER DETAIL & SMS/EMAIL HISTORY REDESIGN (Desktop + Mobile)
   ============================================================================ */
.customer-detail-inpage-card {
  padding: calc(20px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--ui-scale, 1));
}

.cd-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--ui-scale, 1));
  margin-bottom: 0;
}

.cd-manage-actions {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
}

.cd-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16px * var(--ui-scale, 1));
  flex-wrap: wrap;
  padding-bottom: calc(14px * var(--ui-scale, 1));
  border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
}

.cd-role-meta {
  font-size: calc(12.5px * var(--ui-scale, 1));
  font-weight: 600;
  color: var(--muted);
}

.cd-comm-actions {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  flex-wrap: wrap;
}

/* Quick contact strip & mobile info toggle are hidden on desktop (full grid is shown) */
.cd-quick-contact-strip,
.cd-mobile-info-toggle,
.cd-history-toolbar {
  display: none;
}

.customer-detail-inpage-card .customer-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(18px * var(--ui-scale, 1));
  width: 100%;
}

.customer-detail-inpage-card .customer-history-column {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-scale, 1));
  min-width: 0;
  background: var(--canvas);
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(12px * var(--ui-scale, 1));
  padding: calc(14px * var(--ui-scale, 1));
}

.customer-detail-inpage-card .history-column-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
  padding-bottom: calc(8px * var(--ui-scale, 1));
  border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
}

.customer-detail-inpage-card .history-column-heading h3 {
  margin: 0;
  font-size: calc(14px * var(--ui-scale, 1));
  font-weight: 800;
  color: var(--ink);
}

.customer-detail-inpage-card .history-column-heading span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(24px * var(--ui-scale, 1));
  height: calc(22px * var(--ui-scale, 1));
  padding: 0 calc(7px * var(--ui-scale, 1));
  border-radius: calc(6px * var(--ui-scale, 1));
  background: var(--surface);
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 800;
  color: var(--ink);
}

.customer-detail-inpage-card .history-message-list {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-scale, 1));
  max-height: calc(440px * var(--ui-scale, 1));
  overflow-y: auto;
  padding-right: calc(2px * var(--ui-scale, 1));
}

.customer-detail-inpage-card .history-message {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-scale, 1));
  padding: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  border-radius: calc(10px * var(--ui-scale, 1));
  background: var(--surface);
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  min-width: 0;
}

.customer-detail-inpage-card .history-message:hover {
  border-color: var(--blue, #0d6b5c);
  box-shadow: 0 calc(4px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) rgba(15, 23, 42, 0.06);
}

.customer-detail-inpage-card .history-message.agent-message {
  border-left: calc(3px * var(--ui-scale, 1)) solid var(--blue, #0d6b5c);
}

.customer-detail-inpage-card .history-message-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale, 1));
  flex-wrap: wrap;
}

.customer-detail-inpage-card .history-message-author {
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 800;
  color: var(--blue, #0d6b5c);
}

.customer-detail-inpage-card .history-message-meta {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  margin-left: auto;
}

.customer-detail-inpage-card .history-message-meta time {
  font-size: calc(11px * var(--ui-scale, 1));
  color: var(--muted);
  font-weight: 600;
}

.customer-detail-inpage-card .history-open-hint {
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  color: var(--blue, #0d6b5c);
  opacity: 0.85;
}

.customer-detail-inpage-card .history-email-subject {
  display: block;
  font-size: calc(13px * var(--ui-scale, 1));
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
  word-break: break-word;
}

.customer-detail-inpage-card .history-sms-text,
.customer-detail-inpage-card .email-body-text {
  margin: 0;
  font-size: calc(12.5px * var(--ui-scale, 1));
  line-height: 1.5;
  color: var(--ink);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.customer-detail-inpage-card .history-empty {
  padding: calc(20px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  text-align: center;
  font-size: calc(12.5px * var(--ui-scale, 1));
  color: var(--muted);
  background: var(--surface);
  border: calc(1px * var(--ui-scale, 1)) dashed var(--line);
  border-radius: calc(10px * var(--ui-scale, 1));
}

/* Medium Desktop (901px - 1260px): Inspector opens as an overlay drawer on the right */
@media (min-width: 901px) and (max-width: 1260px) {
  #email-tab .et-workspace-layout {
    position: relative;
    grid-template-columns: calc(146px * var(--ui-scale, 1)) var(--et-queue-width, calc(315px * var(--ui-scale, 1))) minmax(0, 1fr) !important;
  }

  #email-tab .et-inspector-panel:not(.hidden) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(300px * var(--ui-scale, 1));
    z-index: 25;
    box-shadow: calc(-8px * var(--ui-scale, 1)) 0 calc(24px * var(--ui-scale, 1)) rgba(15, 23, 42, 0.14);
  }
}

/* Mobile (< 900px): Minimalist Zero-Horizontal-Swipe UI & Collapsible Menus */
@media (max-width: 900px) {
  #email-tab.et-redesign.active {
    gap: calc(6px * var(--ui-scale, 1));
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #email-tab .et-queue-resizer {
    display: none !important;
  }

  #email-tab .et-command-header {
    padding: 0;
    gap: calc(6px * var(--ui-scale, 1));
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  #email-tab .et-title-row {
    flex-wrap: nowrap;
    gap: calc(6px * var(--ui-scale, 1));
    min-width: 0;
  }

  #email-tab .et-title-row h1 {
    font-size: calc(19px * var(--ui-scale, 1));
    flex-shrink: 0;
  }

  #email-tab .et-mailbox-address {
    display: none !important;
  }

  #email-tab #btn-toggle-email-inspector {
    display: none;
  }

  #email-tab #btn-sync-email-now .et-btn-label {
    display: none;
  }

  #email-tab .et-action-btn {
    min-height: calc(31px * var(--ui-scale, 1));
    padding: calc(4px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
    font-size: calc(11.5px * var(--ui-scale, 1));
  }

  /* Zero Horizontal Swipe Filter Bar on Mobile */
  #email-tab .et-toolbar-bar {
    border-right: 0;
    border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
    padding: calc(4px * var(--ui-scale, 1));
  }

  #email-tab .email-toolbar-tabs.et-folder-status-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(5px * var(--ui-scale, 1));
    padding: calc(3px * var(--ui-scale, 1));
    overflow-x: hidden !important;
    flex-wrap: nowrap;
  }

  #email-tab .et-folder-status-tabs .email-toolbar-divider {
    display: none !important;
  }

  /* Hide secondary folders (Utkast/Søppelpost) unless filter drawer is open, keep Innboks + 3 status tabs visible */
  #email-tab:not(.mobile-filters-open) .et-segmented-folders {
    display: flex;
    width: 100%;
  }

  #email-tab:not(.mobile-filters-open) .et-segmented-folders .email-folder-btn:not([data-email-folder="INBOX"]) {
    display: none !important;
  }

  #email-tab.mobile-filters-open .et-segmented-folders {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(4px * var(--ui-scale, 1));
    width: 100%;
    padding-bottom: calc(4px * var(--ui-scale, 1));
    border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
  }

  /* Status tabs fit 100% width with zero horizontal scroll */
  #email-tab:not(.mobile-filters-open) .et-segmented-statuses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(3px * var(--ui-scale, 1));
    width: 100%;
  }

  #email-tab.mobile-filters-open .et-segmented-statuses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(4px * var(--ui-scale, 1));
    width: 100%;
  }

  #email-tab .email-toolbar-tabs.et-folder-status-tabs :is(.email-folder-btn, .ticket-filter-btn) {
    width: 100%;
    min-width: 0;
    min-height: calc(30px * var(--ui-scale, 1));
    padding: calc(4px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) !important;
    font-size: calc(11px * var(--ui-scale, 1)) !important;
    justify-content: center !important;
    gap: calc(3px * var(--ui-scale, 1)) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;
  }

  /* Search row + Mobile Filter toggle button */
  .et-mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * var(--ui-scale, 1));
    height: calc(34px * var(--ui-scale, 1));
    min-height: calc(34px * var(--ui-scale, 1));
    padding: 0 calc(10px * var(--ui-scale, 1));
    font-size: calc(11.5px * var(--ui-scale, 1));
    font-weight: 700;
    border-radius: calc(8px * var(--ui-scale, 1));
    flex-shrink: 0;
    white-space: nowrap;
  }

  .et-mobile-filter-btn.has-active-filter,
  #email-tab.mobile-filters-open .et-mobile-filter-btn {
    border-color: var(--blue, #0d6b5c);
    color: var(--blue, #0d6b5c);
    background: var(--blue-soft, rgba(13, 107, 92, 0.08));
  }

  .et-mobile-filter-badge {
    color: var(--blue, #0d6b5c);
    font-size: calc(14px * var(--ui-scale, 1));
    line-height: 1;
  }

  /* Hide precision dropdowns on mobile until "☰ Filtre" is tapped */
  #email-tab:not(.mobile-filters-open) .et-precision-filters {
    display: none !important;
  }

  #email-tab.mobile-filters-open .et-precision-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(5px * var(--ui-scale, 1));
    padding-top: calc(2px * var(--ui-scale, 1));
  }

  /* When a ticket is opened on mobile, hide the top header & filter tabs so the conversation gets 100% height */
  #email-tab:has(.mobile-email-thread-open) .et-command-header,
  #email-tab:has(.mobile-email-thread-open) .et-toolbar-bar {
    display: none !important;
  }

  #email-tab .et-workspace-layout {
    position: relative;
    display: block !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: calc(12px * var(--ui-scale, 1));
    overflow-x: hidden !important;
  }

  #email-tab .et-queue-head {
    display: none;
  }

  #email-tab .et-queue-panel {
    border-right: 0;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
  }

  #email-tab .et-ticket-card {
    padding: calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
    gap: calc(3px * var(--ui-scale, 1));
  }

  /* Mobile opened conversation top navigation bar */
  .et-mobile-case-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(6px * var(--ui-scale, 1));
    margin-bottom: calc(6px * var(--ui-scale, 1));
    width: 100%;
  }

  .et-mobile-case-actions {
    display: flex;
    align-items: center;
    gap: calc(5px * var(--ui-scale, 1));
  }

  .et-mobile-case-bar .mobile-email-list-button,
  .et-mobile-case-btn,
  .mobile-email-inspector-button {
    margin-bottom: 0;
    min-height: calc(30px * var(--ui-scale, 1));
    padding: calc(4px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
    font-size: calc(11.5px * var(--ui-scale, 1));
    font-weight: 700;
    border-radius: calc(8px * var(--ui-scale, 1));
    white-space: nowrap;
  }

  .et-mobile-case-btn.active,
  .mobile-email-inspector-button.active {
    border-color: var(--blue, #0d6b5c);
    color: var(--blue, #0d6b5c);
    background: var(--blue-soft, rgba(13, 107, 92, 0.08));
  }

  #email-tab .et-case-header {
    padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  }

  #email-tab .et-case-subject-row h2 {
    font-size: calc(14.5px * var(--ui-scale, 1));
    white-space: normal;
  }

  #email-tab .et-case-sender-sub {
    white-space: normal;
  }

  #email-tab .et-case-controls-row {
    display: block;
    width: 100%;
    margin-top: calc(6px * var(--ui-scale, 1));
    padding-top: calc(8px * var(--ui-scale, 1));
    border-top: calc(1px * var(--ui-scale, 1)) solid var(--line);
  }

  #email-tab .ticket-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: calc(6px * var(--ui-scale, 1)) !important;
    align-items: center;
    width: 100%;
  }

  #email-tab .ticket-controls.hidden {
    display: none !important;
  }

  /* Minimalist Full-Width Mobile Composer */
  #email-tab .et-composer-dock {
    padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    width: 100%;
    box-sizing: border-box;
  }

  #email-tab .email-composer.et-smart-composer {
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  #email-tab .et-composer-mode-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(6px * var(--ui-scale, 1));
    width: 100%;
  }

  /* Keep Utvid button available on mobile as requested */
  #email-tab #btn-toggle-email-wide {
    display: none !important;
  }

  #email-tab #btn-toggle-email-composer {
    display: inline-flex !important;
    min-height: calc(28px * var(--ui-scale, 1));
    padding: calc(3px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
    font-size: calc(11px * var(--ui-scale, 1));
    font-weight: 700;
    border-radius: calc(7px * var(--ui-scale, 1));
  }

  #email-tab .et-recipient-toggle-btn {
    padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
    font-size: calc(11px * var(--ui-scale, 1));
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Recipient drawer fits 100% width on mobile without horizontal overflow */
  #email-tab .et-recipient-drawer .recipient-row,
  #email-tab .et-recipient-drawer .email-copy-fields {
    flex-wrap: wrap;
    width: 100%;
  }

  #email-tab .et-contact-quick-select {
    max-width: 100%;
    width: 100%;
  }

  #email-tab:not(.mobile-composer-tools-open) .et-secondary-compose-tool {
    display: none !important;
  }

  #email-tab.mobile-composer-tools-open .et-secondary-compose-tool {
    display: inline-flex !important;
    min-height: calc(30px * var(--ui-scale, 1)) !important;
    padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
    font-size: calc(11px * var(--ui-scale, 1)) !important;
    font-weight: 700 !important;
    border-radius: calc(8px * var(--ui-scale, 1)) !important;
  }

  #email-tab #email-text-input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(68px * var(--ui-scale, 1));
    box-sizing: border-box;
  }

  /* Full-width bottom action bar on mobile */
  #email-tab .email-composer-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: calc(6px * var(--ui-scale, 1)) !important;
  }

  #email-tab .email-compose-tools {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: calc(5px * var(--ui-scale, 1)) !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  #email-tab .email-attachment-button {
    min-height: calc(32px * var(--ui-scale, 1)) !important;
    padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
    border-radius: calc(8px * var(--ui-scale, 1)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: calc(13px * var(--ui-scale, 1)) !important;
  }

  #email-tab .email-attachment-button .et-tool-label {
    display: none;
  }

  /* Maler button sits right next to Attach */
  #email-tab .email-compose-tools .template-picker {
    display: inline-flex !important;
  }

  #email-tab .email-compose-tools #btn-email-templates {
    min-height: calc(32px * var(--ui-scale, 1)) !important;
    padding: calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) !important;
    font-size: calc(11.5px * var(--ui-scale, 1)) !important;
    font-weight: 700 !important;
    border-radius: calc(8px * var(--ui-scale, 1)) !important;
  }

  /* 3-dots button for more options */
  .et-mobile-tools-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(32px * var(--ui-scale, 1)) !important;
    min-width: calc(32px * var(--ui-scale, 1)) !important;
    padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
    font-size: calc(13px * var(--ui-scale, 1)) !important;
    font-weight: 800 !important;
    letter-spacing: calc(1px * var(--ui-scale, 1)) !important;
    border-radius: calc(8px * var(--ui-scale, 1)) !important;
  }

  .et-mobile-tools-btn.active {
    border-color: var(--blue, #0d6b5c) !important;
    color: var(--blue, #0d6b5c) !important;
    background: var(--blue-soft, rgba(13, 107, 92, 0.12)) !important;
  }

  #email-tab .email-compose-submit {
    display: inline-flex !important;
    align-items: center !important;
    gap: calc(6px * var(--ui-scale, 1)) !important;
    margin-left: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }

  #email-tab #btn-close-email,
  #email-tab #btn-send-email {
    min-height: calc(32px * var(--ui-scale, 1)) !important;
    padding: calc(5px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) !important;
    font-size: calc(12px * var(--ui-scale, 1)) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    border-radius: calc(8px * var(--ui-scale, 1)) !important;
  }

  /* Prevent any horizontal overflow inside email message cards */
  #email-tab .et-timeline-history,
  #email-tab .email-message-card,
  #email-tab .email-message-content,
  #email-tab .email-body-html {
    max-width: 100%;
    overflow-x: hidden;
    word-break: break-word;
  }

  /* Prevent any horizontal overflow inside email message cards */
  #email-tab .et-timeline-history,
  #email-tab .email-message-card,
  #email-tab .email-message-content,
  #email-tab .email-body-html {
    max-width: 100%;
    overflow-x: hidden;
    word-break: break-word;
  }

  /* Hide inspector on mobile when in list view */
  #email-tab .email-inbox-layout:not(.mobile-email-thread-open) #email-inspector-panel {
    display: none !important;
  }

  /* When toggled open inside a mobile ticket, show Customer 360° Inspector as a clean slide-over sheet */
  #email-tab .email-inbox-layout.mobile-email-thread-open #email-inspector-panel:not(.hidden) {
    position: fixed;
    left: calc(8px * var(--ui-scale, 1));
    right: calc(8px * var(--ui-scale, 1));
    bottom: calc(8px * var(--ui-scale, 1));
    top: calc(64px * var(--ui-scale, 1));
    z-index: 60;
    display: flex;
    flex-direction: column;
    border: calc(1px * var(--ui-scale, 1)) solid var(--line);
    border-radius: calc(14px * var(--ui-scale, 1));
    background: var(--surface);
    box-shadow: 0 calc(18px * var(--ui-scale, 1)) calc(48px * var(--ui-scale, 1)) rgba(15, 23, 42, 0.28);
    overflow: hidden;
  }

  .et-mobile-inspector-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
    border-bottom: calc(1px * var(--ui-scale, 1)) solid var(--line);
    background: var(--canvas);
    flex: 0 0 auto;
  }

  .et-mobile-inspector-bar strong {
    font-size: calc(13px * var(--ui-scale, 1));
    font-weight: 800;
  }

  .et-mobile-inspector-close {
    min-height: calc(28px * var(--ui-scale, 1));
    padding: calc(3px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
    font-size: calc(11.5px * var(--ui-scale, 1));
    font-weight: 700;
  }

  #email-tab .email-inbox-layout.mobile-email-thread-open #email-inspector-panel:not(.hidden) .et-inspector-content {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ==========================================================================
     MOBILE KONTAKTER DETAIL & SMS/E-POST HISTORY REDESIGN
     ========================================================================== */
  .customer-detail-inpage-card {
    padding: calc(12px * var(--ui-scale, 1));
    gap: calc(12px * var(--ui-scale, 1));
    border-radius: calc(12px * var(--ui-scale, 1));
  }

  .cd-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(6px * var(--ui-scale, 1));
    flex-wrap: nowrap;
  }

  .cd-back-btn {
    min-height: calc(32px * var(--ui-scale, 1));
    padding: calc(5px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    font-size: calc(11.5px * var(--ui-scale, 1));
    font-weight: 700;
    white-space: nowrap;
  }

  .cd-manage-actions {
    gap: calc(5px * var(--ui-scale, 1));
    flex-shrink: 0;
  }

  .cd-manage-btn {
    min-height: calc(32px * var(--ui-scale, 1));
    padding: calc(5px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
    font-size: calc(11.5px * var(--ui-scale, 1));
    white-space: nowrap;
  }

  .cd-hero-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(10px * var(--ui-scale, 1));
    padding-bottom: calc(10px * var(--ui-scale, 1));
  }

  .customer-detail-inpage-card .customer-detail-identity {
    display: grid;
    grid-template-columns: calc(44px * var(--ui-scale, 1)) minmax(0, 1fr);
    gap: calc(3px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
    align-items: center;
  }

  .customer-detail-inpage-card .customer-initial {
    grid-row: 1 / span 2;
    width: calc(44px * var(--ui-scale, 1));
    height: calc(44px * var(--ui-scale, 1));
    font-size: calc(15px * var(--ui-scale, 1));
    border-radius: calc(11px * var(--ui-scale, 1));
  }

  .customer-detail-inpage-card .customer-detail-identity h3 {
    margin: 0;
    font-size: calc(17px * var(--ui-scale, 1));
    line-height: 1.2;
  }

  .customer-detail-inpage-card .customer-detail-badges {
    grid-column: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(5px * var(--ui-scale, 1));
  }

  .cd-comm-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: calc(6px * var(--ui-scale, 1));
    width: 100%;
  }

  .cd-comm-btn,
  .cd-mobile-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: calc(34px * var(--ui-scale, 1));
    padding: calc(5px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1));
    font-size: calc(11.5px * var(--ui-scale, 1));
    font-weight: 700;
    white-space: nowrap;
    border-radius: calc(8px * var(--ui-scale, 1));
  }

  /* Compact 2-column strip for Telefon & E-post on mobile by default */
  .cd-quick-contact-strip {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: calc(6px * var(--ui-scale, 1));
    width: 100%;
  }

  .cd-quick-item {
    padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
    border-radius: calc(8px * var(--ui-scale, 1));
    background: var(--canvas);
    border: calc(1px * var(--ui-scale, 1)) solid var(--line);
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--ui-scale, 1));
    min-width: 0;
  }

  .cd-quick-item span {
    font-size: calc(10px * var(--ui-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  .cd-quick-item strong {
    font-size: calc(12px * var(--ui-scale, 1));
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Collapse the 7-field employee info grid on mobile until "Detaljer ▾" is tapped */
  .customer-detail-inpage-card:not(.mobile-info-expanded) #customer-info-grid-panel {
    display: none !important;
  }

  .customer-detail-inpage-card.mobile-info-expanded .cd-quick-contact-strip {
    display: none;
  }

  .customer-detail-inpage-card.mobile-info-expanded .cd-mobile-info-toggle {
    border-color: var(--blue, #0d6b5c);
    color: var(--blue, #0d6b5c);
    background: var(--blue-soft, rgba(13, 107, 92, 0.08));
  }

  .customer-detail-inpage-card.mobile-info-expanded #customer-info-grid-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(6px * var(--ui-scale, 1));
  }

  .customer-detail-inpage-card.mobile-info-expanded #customer-info-grid-panel .info-field {
    padding: calc(7px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  }

  /* Segmented Channel Filter Tabs on Mobile: Alle / Siste SMS / Siste e-post */
  .cd-history-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(4px * var(--ui-scale, 1));
    padding: calc(3px * var(--ui-scale, 1));
    background: var(--canvas);
    border: calc(1px * var(--ui-scale, 1)) solid var(--line);
    border-radius: calc(10px * var(--ui-scale, 1));
    width: 100%;
    box-sizing: border-box;
  }

  .cd-history-tab {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: calc(11.5px * var(--ui-scale, 1));
    font-weight: 700;
    padding: calc(6px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1));
    border-radius: calc(7px * var(--ui-scale, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(4px * var(--ui-scale, 1));
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;
  }

  .cd-history-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(18px * var(--ui-scale, 1));
    height: calc(18px * var(--ui-scale, 1));
    padding: 0 calc(5px * var(--ui-scale, 1));
    border-radius: calc(5px * var(--ui-scale, 1));
    background: rgba(100, 116, 139, 0.14);
    font-size: calc(10.5px * var(--ui-scale, 1));
    font-weight: 800;
  }

  .cd-history-tab.active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1)) rgba(15, 23, 42, 0.08);
  }

  .cd-history-tab.active span {
    background: var(--blue-soft, rgba(13, 107, 92, 0.14));
    color: var(--blue, #0d6b5c);
  }

  /* Full-width single-column history stack on mobile — never squished side by side! */
  .customer-detail-inpage-card .customer-history-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: calc(12px * var(--ui-scale, 1)) !important;
    width: 100% !important;
  }

  .customer-detail-inpage-card .customer-history-grid[data-history-view="sms"] .customer-history-column[data-history-channel="email"],
  .customer-detail-inpage-card .customer-history-grid[data-history-view="email"] .customer-history-column[data-history-channel="sms"] {
    display: none !important;
  }

  .customer-detail-inpage-card .customer-history-column {
    width: 100%;
    box-sizing: border-box;
    padding: calc(10px * var(--ui-scale, 1));
    gap: calc(8px * var(--ui-scale, 1));
  }

  .customer-detail-inpage-card .history-message-list {
    max-height: none;
    overflow-y: visible;
    gap: calc(8px * var(--ui-scale, 1));
  }

  .customer-detail-inpage-card .history-message {
    padding: calc(11px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   Telefonie MBN - per-agent MBN integration
   ========================================================================== */
.mbn-page {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--ui-scale, 1));
  padding: calc(24px * var(--ui-scale, 1));
  max-width: calc(1180px * var(--ui-scale, 1));
  margin: 0 auto;
}
/* The login panels set display:flex, which beats the hidden attribute and
   would leave both the phone and the SMS-code step on screen at once. */
.mbn-page [hidden] { display: none !important; }

.mbn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(14px * var(--ui-scale, 1));
}
.mbn-eyebrow {
  margin: 0 0 calc(6px * var(--ui-scale, 1));
  color: var(--blue, #0d6b5c);
  font: 700 calc(11px * var(--ui-scale, 1)) var(--font);
  letter-spacing: 0.14em;
}
.mbn-head h1 {
  margin: 0 0 calc(5px * var(--ui-scale, 1));
  color: var(--ink, #182230);
  font: 800 calc(24px * var(--ui-scale, 1))/1.15 var(--display);
  letter-spacing: calc(-0.7px * var(--ui-scale, 1));
}
.mbn-sub {
  margin: 0;
  max-width: calc(560px * var(--ui-scale, 1));
  color: var(--muted, #667085);
  font-size: calc(13px * var(--ui-scale, 1));
  line-height: 1.5;
}
.mbn-connection-banner {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  margin: 0;
  padding: calc(8px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #f6d5d2;
  border-radius: calc(999px * var(--ui-scale, 1));
  background: #fdeceb;
  color: #b42318;
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  white-space: nowrap;
}
.mbn-connection-dot {
  width: calc(8px * var(--ui-scale, 1));
  height: calc(8px * var(--ui-scale, 1));
  border-radius: 50%;
  background: currentColor;
}
.mbn-connection-banner[data-state="up"] {
  border-color: #cfe9dc;
  background: #e8f5ef;
  color: #15714e;
}
.mbn-connection-banner[data-state="up"] .mbn-connection-dot {
  box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(21, 113, 78, 0.16);
}

.mbn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: start;
  gap: calc(16px * var(--ui-scale, 1));
}

.mbn-card {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-scale, 1));
  min-width: 0;
  padding: calc(18px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--line, #e7eaf0);
  border-radius: calc(16px * var(--ui-scale, 1));
  background: var(--surface, #fff);
  box-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) rgba(16, 24, 40, 0.04);
}
.mbn-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(10px * var(--ui-scale, 1));
}
.mbn-account .mbn-card-head { align-items: center; }
.mbn-card-head h3 {
  margin: 0;
  color: var(--ink, #182230);
  font: 700 calc(15px * var(--ui-scale, 1)) var(--display);
  letter-spacing: calc(-0.2px * var(--ui-scale, 1));
}
.mbn-state {
  margin: calc(3px * var(--ui-scale, 1)) 0 0;
  color: var(--muted, #667085);
  font: 600 calc(12px * var(--ui-scale, 1)) var(--font);
}
.mbn-hint {
  margin: 0;
  color: var(--muted, #667085);
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1.45;
}
.mbn-count {
  flex: 0 0 auto;
  padding: calc(3px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  background: var(--blue-soft, #e9f4f1);
  color: var(--blue, #0d6b5c);
  font: 700 calc(11px * var(--ui-scale, 1)) var(--font);
  font-variant-numeric: tabular-nums;
}
.mbn-count:empty { display: none; }
.mbn-alert {
  margin: 0;
  padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #f6d5d2;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fdeceb;
  color: #b42318;
  font-size: calc(12px * var(--ui-scale, 1));
  line-height: 1.45;
}
.mbn-login {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(10px * var(--ui-scale, 1));
}
.mbn-login .mbn-field { flex: 1 1 calc(220px * var(--ui-scale, 1)); }
.mbn-login .button { flex: 0 0 auto; }

/* Zisson Login Progress & Feedback */
.zisson-progress-container {
  width: 100%;
  margin-top: calc(12px * var(--ui-scale, 1));
  padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #cce3de;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #f4fbf8;
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-scale, 1));
  box-sizing: border-box;
}
.zisson-progress-container[data-state="error"] {
  background: #fdeceb;
  border-color: #f6d5d2;
}
.zisson-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.zisson-progress-title {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  font-weight: 600;
  font-size: calc(13px * var(--ui-scale, 1));
  color: #1a4d3e;
}
.zisson-progress-container[data-state="error"] .zisson-progress-title {
  color: #b42318;
}
.zisson-progress-percent {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: calc(13px * var(--ui-scale, 1));
  color: #0d6b5c;
}
.zisson-progress-container[data-state="error"] .zisson-progress-percent {
  color: #b42318;
}
.zisson-progress-track {
  width: 100%;
  height: calc(8px * var(--ui-scale, 1));
  background: #e1eee8;
  border-radius: calc(999px * var(--ui-scale, 1));
  overflow: hidden;
  position: relative;
}
.zisson-progress-container[data-state="error"] .zisson-progress-track {
  background: #f8d7d4;
}
.zisson-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #10b981 0%, #0d9488 50%, #059669 100%);
  border-radius: calc(999px * var(--ui-scale, 1));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
}
.zisson-progress-container[data-state="error"] .zisson-progress-bar {
  background: #dc2626 !important;
}
.zisson-progress-spinner {
  width: calc(14px * var(--ui-scale, 1));
  height: calc(14px * var(--ui-scale, 1));
  border: 2px solid #0d9488;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  flex: 0 0 auto;
}
.zisson-progress-container[data-state="error"] .zisson-progress-spinner {
  display: none;
}
.zisson-progress-detail {
  margin: 0;
  font-size: calc(12px * var(--ui-scale, 1));
  color: #4b6358;
  line-height: 1.45;
}
.zisson-progress-container[data-state="error"] .zisson-progress-detail {
  color: #b42318;
  font-weight: 500;
}
.zisson-mfa-badge {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  border-radius: calc(10px * var(--ui-scale, 1));
  background: #e6f6ee;
  border: 1.5px solid #059669;
  margin-top: calc(4px * var(--ui-scale, 1));
  animation: fadeIn 0.2s ease-out;
}
.zisson-mfa-icon {
  font-size: calc(26px * var(--ui-scale, 1));
  line-height: 1;
}
.zisson-mfa-content {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--ui-scale, 1));
}
.zisson-mfa-title {
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 600;
  color: #065f46;
}
.zisson-mfa-number {
  font-size: calc(26px * var(--ui-scale, 1));
  font-weight: 800;
  color: #047857;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
.zisson-mfa-sub {
  font-size: calc(11px * var(--ui-scale, 1));
  color: #047857;
}
.mbn-field {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-scale, 1));
  min-width: 0;
}
.mbn-field > span {
  color: var(--muted, #667085);
  font: 700 calc(11px * var(--ui-scale, 1)) var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mbn-card input,
.mbn-card select,
.mbn-card textarea {
  width: 100%;
  padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid #d9dee7;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
  color: var(--ink, #182230);
  font: 500 calc(13px * var(--ui-scale, 1)) var(--font);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mbn-card input::placeholder,
.mbn-card textarea::placeholder { color: #9aa4b2; }
.mbn-card input:focus,
.mbn-card select:focus,
.mbn-card textarea:focus {
  outline: none;
  border-color: var(--blue, #0d6b5c);
  box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(13, 107, 92, 0.12);
}
.mbn-card textarea {
  min-height: calc(84px * var(--ui-scale, 1));
  resize: vertical;
  line-height: 1.5;
}
.mbn-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
  margin-top: auto;
  padding-top: calc(2px * var(--ui-scale, 1));
}

/* Lines, split by what they are used for: voice vs SMS, side by side. */
.mbn-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: calc(24px * var(--ui-scale, 1));
  color: var(--muted, #667085);
  font-size: calc(12px * var(--ui-scale, 1));
}
.mbn-line-group { display: flex; flex-direction: column; gap: calc(8px * var(--ui-scale, 1)); }
.mbn-line-group-head {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
}
.mbn-line-icon {
  display: grid;
  place-items: center;
  width: calc(24px * var(--ui-scale, 1));
  height: calc(24px * var(--ui-scale, 1));
  border-radius: calc(8px * var(--ui-scale, 1));
  background: var(--blue-soft, #e9f4f1);
  color: var(--blue, #0d6b5c);
}
.mbn-line-icon svg {
  width: calc(13px * var(--ui-scale, 1));
  height: calc(13px * var(--ui-scale, 1));
}
.mbn-line-group-head h4 {
  margin: 0;
  color: var(--ink, #182230);
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mbn-line-badge {
  margin-left: auto;
  padding: calc(2px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  background: #f1f3f6;
  color: var(--muted, #667085);
  font: 700 calc(11px * var(--ui-scale, 1)) var(--font);
  font-variant-numeric: tabular-nums;
}
.mbn-line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(148px * var(--ui-scale, 1)), 1fr));
  gap: calc(8px * var(--ui-scale, 1));
}
.mbn-line {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-scale, 1));
  padding: calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--line, #e7eaf0);
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.mbn-line:hover { border-color: #cbd5e1; background: #fafbfc; }
.mbn-line.is-on {
  border-color: #a9d3c6;
  background: #f1f8f5;
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale, 1)) rgba(13, 107, 92, 0.06);
}
.mbn-line input {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: calc(16px * var(--ui-scale, 1));
  height: calc(16px * var(--ui-scale, 1));
  margin: 0;
  padding: 0;
  border: calc(1.5px * var(--ui-scale, 1)) solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mbn-line input:checked {
  border-color: var(--blue, #0d6b5c);
  background: var(--blue, #0d6b5c);
  box-shadow: inset 0 0 0 calc(3px * var(--ui-scale, 1)) #fff;
}
.mbn-line input:focus-visible {
  outline: calc(2px * var(--ui-scale, 1)) solid var(--blue, #0d6b5c);
  outline-offset: calc(2px * var(--ui-scale, 1));
}
.mbn-line-body {
  display: flex;
  flex-direction: column;
  gap: calc(1px * var(--ui-scale, 1));
  min-width: 0;
}
.mbn-line-number {
  color: var(--ink, #182230);
  font: 600 calc(13px * var(--ui-scale, 1)) var(--font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mbn-line-meta { color: var(--muted, #667085); font-size: calc(11px * var(--ui-scale, 1)); }
.mbn-line.is-on .mbn-line-meta { color: var(--green, #15714e); }

/* Active call */
.mbn-call-card { background: linear-gradient(160deg, #f4fbf8 0%, #fff 62%); }
.mbn-call-card[data-state="live"] { border-color: #bfe3d7; }
.mbn-call-timer {
  flex: 0 0 auto;
  color: var(--muted, #667085);
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  font-variant-numeric: tabular-nums;
}
.mbn-empty {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-scale, 1));
  margin: 0;
  padding: calc(12px * var(--ui-scale, 1)) 0;
  color: var(--muted, #667085);
  font-size: calc(13px * var(--ui-scale, 1));
}
.mbn-call-body { display: flex; flex-direction: column; gap: calc(10px * var(--ui-scale, 1)); }
.mbn-call-phone {
  margin: 0;
  color: var(--ink, #182230);
  font: 800 calc(22px * var(--ui-scale, 1)) var(--display);
  letter-spacing: calc(-0.6px * var(--ui-scale, 1));
  font-variant-numeric: tabular-nums;
}
.mbn-call-meta {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--ui-scale, 1));
  margin: 0;
  color: var(--muted, #667085);
  font-size: calc(12px * var(--ui-scale, 1));
}
.mbn-pulse {
  width: calc(7px * var(--ui-scale, 1));
  height: calc(7px * var(--ui-scale, 1));
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(22, 163, 74, 0.16);
}
.mbn-call-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
}
.mbn-transfer {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: calc(8px * var(--ui-scale, 1));
  min-width: calc(200px * var(--ui-scale, 1));
}
.mbn-transfer select { flex: 1; min-width: 0; }
.mbn-page .btn-danger {
  border: 0;
  border-radius: calc(12px * var(--ui-scale, 1));
  padding: calc(9px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
  background: #dc2626;
  color: #fff;
  font: 700 calc(12px * var(--ui-scale, 1)) var(--font);
  cursor: pointer;
  transition: 0.15s;
}
.mbn-page .btn-danger:hover { background: #b91c1c; }

/* Top bar MBN indicator */
.mbn-link-status {
  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  height: calc(44px * var(--ui-scale, 1));
  padding: 0 calc(12px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  color: var(--text, #111827);
  font-size: calc(12px * var(--ui-scale, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
}
.mbn-link-status:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(calc(-1px * var(--ui-scale, 1)));
}
.mbn-link-status.active {
  background: rgba(13, 107, 92, 0.12);
  border-color: var(--blue, #0d6b5c);
  color: var(--blue, #0d6b5c);
}
html[data-theme="dark"] .mbn-link-status {
  background: #111c2c;
  border-color: #334155;
  color: #cbd5e1;
}
html[data-theme="dark"] .mbn-link-status:hover {
  background: #1e293b;
  border-color: #3a4b66;
}
html[data-theme="dark"] .mbn-link-status.active {
  background: rgba(138, 208, 192, 0.18);
  border-color: #8ad0c0;
  color: #8ad0c0;
}
.topbar,
.topbar-actions {
  overflow: visible;
}
.mbn-link-dot {
  width: calc(10px * var(--ui-scale, 1));
  height: calc(10px * var(--ui-scale, 1));
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(220, 38, 38, 0.18);
}
.mbn-link-status[data-state="up"] .mbn-link-dot {
  background: #16a34a;
  box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(22, 163, 74, 0.22);
}
/* Compact pills: MBN and Zis sit next to the search box, so both the label and
   the dot are smaller and the two of them fit on one row. */
.mbn-link-status--compact {
  height: calc(38px * var(--ui-scale, 1));
  padding: 0 calc(10px * var(--ui-scale, 1));
  gap: calc(6px * var(--ui-scale, 1));
}
.mbn-link-status--compact .mbn-link-label {
  font-size: calc(10.5px * var(--ui-scale, 1));
  letter-spacing: 0.05em;
}
.mbn-link-status--compact .mbn-link-dot {
  width: calc(8px * var(--ui-scale, 1));
  height: calc(8px * var(--ui-scale, 1));
  box-shadow: 0 0 0 calc(2px * var(--ui-scale, 1)) rgba(220, 38, 38, 0.18);
}
.mbn-link-status--compact[data-state="up"] .mbn-link-dot {
  box-shadow: 0 0 0 calc(2px * var(--ui-scale, 1)) rgba(22, 163, 74, 0.22);
}
.mbn-card-actions {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale, 1));
  flex-wrap: wrap;
}
.mbn-queue-count {
  position: absolute;
  top: calc(-7px * var(--ui-scale, 1));
  right: calc(-7px * var(--ui-scale, 1));
  min-width: calc(18px * var(--ui-scale, 1));
  height: calc(18px * var(--ui-scale, 1));
  padding: 0 calc(5px * var(--ui-scale, 1));
  border-radius: calc(999px * var(--ui-scale, 1));
  background: #ff3b30;
  color: #fff;
  border: calc(2px * var(--ui-scale, 1)) solid #fff;
  box-shadow: 0 calc(1px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)) rgba(15, 23, 42, 0.28);
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 4;
  pointer-events: none;
}
.mbn-queue-count[hidden] {
  display: none !important;
}
#sms-tab .conversation-panel {
  min-height: 0;
  overflow: hidden;
}
#sms-tab .sms-conversation-head,
#sms-tab .sms-composer {
  flex: 0 0 auto;
}
#sms-tab .message-history {
  overflow-y: auto;
}
#sms-tab .sms-queued-bubble {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
}
#sms-tab .sms-vis {
  flex: 0 0 auto;
  padding: calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  font-size: calc(12px * var(--ui-scale, 1));
}
#sms-tab .sms-vis:disabled {
  opacity: 0.7;
  cursor: wait;
}

@media (max-width: 900px) {
  .mbn-grid { grid-template-columns: minmax(0, 1fr); }
  .mbn-lines { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mbn-page { padding: calc(14px * var(--ui-scale, 1)); }
  .mbn-head { align-items: flex-start; }
  .mbn-login .mbn-field,
  .mbn-login .button { flex: 1 1 100%; }
  .mbn-line-grid { grid-template-columns: repeat(auto-fill, minmax(calc(130px * var(--ui-scale, 1)), 1fr)); }
}

/* Zisson agent panel: who is logged on right now, and with what state. */
.zisson-agent-list { display: grid; gap: calc(6px * var(--ui-scale, 1)); }
.zisson-agent-row {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--ui-scale, 1));
  padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border: calc(1px * var(--ui-scale, 1)) solid var(--line);
  border-radius: calc(12px * var(--ui-scale, 1));
  background: #fff;
  min-width: 0;
}
.zisson-agent-dot {
  width: calc(8px * var(--ui-scale, 1));
  height: calc(8px * var(--ui-scale, 1));
  border-radius: 50%;
  background: #85958c;
  flex: 0 0 auto;
  box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(133, 149, 140, .14);
}
.zisson-agent-row[data-state="available"] .zisson-agent-dot,
.zisson-agent-dot[data-state="available"] { background: #2fa678; box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(47, 166, 120, .16); }
.zisson-agent-row[data-state="in_call"] .zisson-agent-dot,
.zisson-agent-dot[data-state="in_call"] { background: #e06d28; box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(224, 109, 40, .25); }
.zisson-agent-row[data-state="ringing"] .zisson-agent-dot,
.zisson-agent-dot[data-state="ringing"],
.zisson-agent-row[data-state="dialing"] .zisson-agent-dot,
.zisson-agent-dot[data-state="dialing"] { background: #f59e0b; box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(245, 158, 11, .35); animation: pulse-ring 1.5s infinite; }
.zisson-agent-row[data-state="busy"] .zisson-agent-dot,
.zisson-agent-dot[data-state="busy"] { background: #b5670f; box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(181, 103, 15, .16); }
.zisson-agent-row[data-state="paused"] .zisson-agent-dot,
.zisson-agent-dot[data-state="paused"] { background: #d99a3d; box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(217, 154, 61, .16); }
.zisson-agent-row[data-state="wrapup"] .zisson-agent-dot,
.zisson-agent-dot[data-state="wrapup"] { background: #6b7fd7; box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(107, 127, 215, .16); }
.zisson-agent-row[data-state="offline"] .zisson-agent-dot,
.zisson-agent-row[data-state="loggedoff"] .zisson-agent-dot,
.zisson-agent-dot[data-state="offline"],
.zisson-agent-dot[data-state="loggedoff"] { background: #85958c; box-shadow: 0 0 0 calc(3px * var(--ui-scale, 1)) rgba(133, 149, 140, .14); }
.zisson-agent-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.zisson-agent-meta {
  color: var(--muted);
  font-size: calc(12px * var(--ui-scale, 1));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.zisson-agent-state {
  margin-left: auto;
  font-weight: 700;
  font-size: calc(12px * var(--ui-scale, 1));
  color: var(--muted);
  white-space: nowrap;
}
.zisson-agent-row[data-state="available"] .zisson-agent-state { color: #1c7d5c; }
.zisson-agent-row[data-state="busy"] .zisson-agent-state { color: #97560c; }
.zisson-page .zisson-agents-card .mbn-card-head { align-items: flex-start; }

/* The Zisson tab is a document, not a dashboard: on desktop the workspace shell
   clips the central column, so this tab scrolls on its own. */
@media (min-width: 901px) {
  .content-scroll.page-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Sidebar agent rows that come from Zisson: the dot follows the Zisson state
   and the line under the name carries the availability in words. */
.agent-avatar.paused:after { background: #d99a3d; }
.agent-avatar.wrapup:after { background: #6b7fd7; }
.agent-avatar.in_call:after { background: #e06d28; box-shadow: 0 0 0 calc(2px * var(--ui-scale, 1)) rgba(224, 109, 40, .35); }
.agent-avatar.ringing:after,
.agent-avatar.dialing:after { background: #f59e0b; box-shadow: 0 0 0 calc(2px * var(--ui-scale, 1)) rgba(245, 158, 11, .4); animation: pulse-ring 1.5s infinite; }
/* The name and the state line always truncate instead of pushing the row past
   the 230-310 px sidebar. */
.agent-mini-text {
  flex: 1 1 auto;
  min-width: 0;
}
.agent-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6px * var(--ui-scale, 1));
  width: 100%;
  min-width: 0;
}
.agent-mini-header strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-status-timer {
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #9db0a8;
  background: rgba(255, 255, 255, 0.08);
  padding: calc(1px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
  border-radius: calc(4px * var(--ui-scale, 1));
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.agent-mini[data-zisson-state="available"] .agent-status-timer {
  color: #8ad0c0;
  background: rgba(138, 208, 192, 0.15);
}
.agent-mini[data-zisson-state="in_call"] .agent-status-timer {
  color: #f39c5b;
  background: rgba(224, 109, 40, 0.18);
}
.agent-mini[data-zisson-state="ringing"] .agent-status-timer,
.agent-mini[data-zisson-state="dialing"] .agent-status-timer {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
}
.agent-mini[data-zisson-state="paused"] .agent-status-timer {
  color: #d9b25f;
  background: rgba(217, 178, 95, 0.15);
}
.agent-mini[data-zisson-state="busy"] .agent-status-timer {
  color: #e3a75e;
  background: rgba(227, 167, 94, 0.15);
}
.agent-status-timer-sub {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: inherit;
}
.zisson-agent-row .agent-status-timer {
  margin-left: auto;
  margin-right: calc(8px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #9db0a8;
  background: rgba(255, 255, 255, 0.06);
  padding: calc(1px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
  border-radius: calc(4px * var(--ui-scale, 1));
}
.zisson-agent-row[data-state="available"] .agent-status-timer {
  color: #8ad0c0;
  background: rgba(138, 208, 192, 0.15);
}
.zisson-agent-row[data-state="in_call"] .agent-status-timer {
  color: #f39c5b;
  background: rgba(224, 109, 40, 0.18);
}
.zisson-agent-row[data-state="ringing"] .agent-status-timer,
.zisson-agent-row[data-state="dialing"] .agent-status-timer {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
}
.zisson-agent-row[data-state="paused"] .agent-status-timer {
  color: #d9b25f;
  background: rgba(217, 178, 95, 0.15);
}
.zisson-agent-row[data-state="busy"] .agent-status-timer {
  color: #e3a75e;
  background: rgba(227, 167, 94, 0.15);
}
.agent-mini-text strong,
.agent-mini-text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zisson-mini-state {
  margin-top: calc(2px * var(--ui-scale, 1));
  color: var(--sidebar-muted, #8b9c93);
  font-size: calc(12px * var(--ui-scale, 1));
}
.zisson-mini-state[data-state="available"] { color: #8ad0c0; }
.zisson-mini-state[data-state="in_call"] { color: #f39c5b; font-weight: 600; }
.zisson-mini-state[data-state="ringing"],
.zisson-mini-state[data-state="dialing"] { color: #fbbf24; font-weight: 600; }
.zisson-mini-state[data-state="busy"] { color: #e3a75e; }
.zisson-mini-state[data-state="paused"] { color: #d9b25f; }
.zisson-mini-state[data-state="wrapup"] { color: #a3b1ea; }
.zisson-mini-state[data-state="offline"] { color: #85958c; }

/* Grid items default to min-width: auto, which let a long Zisson name and line
   push the whole sidebar row wider than the 230-310 px rail. */
.agent-department-group,
.agents-list > .agent-mini {
  min-width: 0;
}

/* Sidebar group header: chevron, group name and «logget på / totalt». */
.agent-department-toggle {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0 calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  color: #93aca5;
  font: 800 calc(12px * var(--ui-scale, 1)) var(--font);
  letter-spacing: .1em;
  text-align: left;
  cursor: pointer;
}
.agent-department-toggle:hover { color: #cfe7de; }
.agent-department-toggle svg {
  width: calc(13px * var(--ui-scale, 1));
  height: calc(13px * var(--ui-scale, 1));
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.agent-department-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.agent-department-count {
  margin-left: auto;
  color: #8ad0c0;
  letter-spacing: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.agent-department-count[data-empty="true"] { color: #7b8a84; }

/* Garage picked in the SMS list: the depot pill is a filter button and the
   chip in the Alle/Ulest bar is the way back to every conversation. */
.et-meta-pill.sms-depot-pill {
  font-family: inherit;
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}
.et-meta-pill.sms-depot-pill:hover { background: #bae6fd; }
.et-meta-pill.sms-depot-pill.is-active {
  background: #0369a1;
  border-color: #075985;
  color: #fff;
}
.sms-depot-filter-clear {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
}
.sms-depot-filter-clear:hover { background: #bae6fd; }
.sms-depot-filter-clear[hidden] { display: none !important; }

/* A laptop window is shorter than the rail's natural height. Tighten the rail
   on those screens instead of making the whole menu scroll: brand, navigation
   and the sentralbord card all stay visible at once. */
@media (min-width: 901px) and (max-height: 1100px) {
  .sidebar {
    padding-top: calc(16px * var(--ui-scale, 1));
    padding-bottom: calc(14px * var(--ui-scale, 1));
  }
  .brand { padding-bottom: calc(16px * var(--ui-scale, 1)); }
  .sidebar .workspace-switcher { margin-bottom: calc(4px * var(--ui-scale, 1)); }
  #primary-sidebar .sidebar-top-controls {
    padding-bottom: calc(8px * var(--ui-scale, 1));
    margin-bottom: calc(8px * var(--ui-scale, 1));
  }
  .primary-nav { gap: calc(3px * var(--ui-scale, 1)); }
  .nav-item {
    padding-top: calc(9px * var(--ui-scale, 1));
    padding-bottom: calc(9px * var(--ui-scale, 1));
  }
  .sidebar-agents-divider { margin: calc(9px * var(--ui-scale, 1)) 0; }
  #primary-sidebar .sidebar-sentralbord-footer { padding-top: 0 !important; }
}

/* Very short laptop screens: tighten the rail once more so it still fits. */
@media (min-width: 901px) and (max-height: 820px) {
  .sidebar {
    padding-top: calc(10px * var(--ui-scale, 1));
    padding-bottom: calc(10px * var(--ui-scale, 1));
  }
  .brand { padding-bottom: calc(10px * var(--ui-scale, 1)); }
  .nav-item {
    padding-top: calc(7px * var(--ui-scale, 1));
    padding-bottom: calc(7px * var(--ui-scale, 1));
  }
}

/* Left rail width: the user can drag the edge of the sidebar. --sidebar-width is
   a plain px number, scaled like every other size, so it follows --ui-scale. */
.app-shell {
  --sidebar-width: 268px;
}
@media (max-width: 1320px) {
  /* A narrow window keeps a slimmer rail; the drag handler still overrides it. */
  .app-shell {
    --sidebar-width: 230px;
  }
}
/* Fixed, not absolute: the sidebar scrolls its own content, and a handle inside
   that scroller would scroll away and be clipped by its overflow. */
.sidebar-resizer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(var(--sidebar-width, 310px) * var(--ui-scale, 1));
  width: calc(8px * var(--ui-scale, 1));
  margin-left: calc(-4px * var(--ui-scale, 1));
  z-index: 6;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
}
.sidebar-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(2px * var(--ui-scale, 1));
  transform: translateX(-50%);
  background: transparent;
  transition: background .15s ease;
}
.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
body.sidebar-resizing .sidebar-resizer::after { background: #8ad0c0; }
.sidebar-resizer:focus-visible { outline: none; }
body.sidebar-resizing { user-select: none; }
body.sidebar-resizing,
body.sidebar-resizing * { cursor: col-resize !important; }
@media (max-width: 900px) {
  .sidebar-resizer { display: none; }
}

/* ==========================================================================
   THE RAIL FITS THE WINDOW
   On a desktop window the whole menu must be visible without scrolling. The
   blocks above the menu are compact, and the agent list is the only part that
   gives way: it fills what is left and scrolls inside its own box when the
   department is long. Flex, not a fixed height, so a short window degrades
   into a scrolling rail again instead of clipping the menu.
   ========================================================================== */
@media (min-width: 901px) {
  #primary-sidebar {
    overflow-y: hidden;
    padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
    gap: calc(3px * var(--ui-scale, 1));
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
  }
  #primary-sidebar > * { flex: 0 0 auto; }
  #primary-sidebar > #agents-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    scrollbar-width: thin;
  }
  #primary-sidebar .brand { padding-bottom: calc(4px * var(--ui-scale, 1)); }
  #primary-sidebar > #btn-workspace-switcher {
    margin-bottom: 0;
    padding-top: calc(5px * var(--ui-scale, 1));
    padding-bottom: calc(5px * var(--ui-scale, 1));
  }
  #primary-sidebar > .sidebar-top-controls {
    margin: 0;
    padding-bottom: calc(4px * var(--ui-scale, 1));
    gap: calc(3px * var(--ui-scale, 1));
  }
  #primary-sidebar .nav-item {
    padding-top: calc(4px * var(--ui-scale, 1));
    padding-bottom: calc(4px * var(--ui-scale, 1));
    min-height: calc(28px * var(--ui-scale, 1));
  }
  #primary-sidebar > .sidebar-agents-divider { margin: calc(2px * var(--ui-scale, 1)) 0; }
  #primary-sidebar .agent-department-heading { margin: calc(2px * var(--ui-scale, 1)) 0 calc(2px * var(--ui-scale, 1)); }
  #primary-sidebar .agent-department-empty { padding: 0; }
}

/* A short window (a laptop with 950 px of usable height or less) gets a tighter
   rhythm still, so the whole rail stays visible instead of leaving the agent
   list as a sliver. Nothing is hidden or dropped: rows, icons and card padding
   step down one size. */
@media (min-width: 901px) and (max-height: 950px) {
  #primary-sidebar {
    padding-top: calc(10px * var(--ui-scale, 1));
    padding-bottom: 0;
    gap: calc(3px * var(--ui-scale, 1));
  }
  #primary-sidebar .brand { padding-bottom: 0; }
  #primary-sidebar > #btn-workspace-switcher {
    padding-top: calc(6px * var(--ui-scale, 1));
    padding-bottom: calc(6px * var(--ui-scale, 1));
  }
  #primary-sidebar .primary-nav { gap: calc(2px * var(--ui-scale, 1)); }
  #primary-sidebar > .sidebar-agents-divider { margin: calc(3px * var(--ui-scale, 1)) 0 calc(3px * var(--ui-scale, 1)); }
  #primary-sidebar .nav-item {
    padding-top: calc(3px * var(--ui-scale, 1));
    padding-bottom: calc(3px * var(--ui-scale, 1));
  }
  #primary-sidebar .nav-icon {
    width: calc(18px * var(--ui-scale, 1));
    height: calc(18px * var(--ui-scale, 1));
    flex: 0 0 calc(18px * var(--ui-scale, 1));
  }
  #primary-sidebar .nav-icon svg {
    width: calc(15px * var(--ui-scale, 1));
    height: calc(15px * var(--ui-scale, 1));
  }
  #primary-sidebar > .sidebar-top-controls {
    padding-bottom: calc(6px * var(--ui-scale, 1));
    gap: calc(3px * var(--ui-scale, 1));
  }
  #primary-sidebar .sidebar-top-controls .user-menu {
    min-height: calc(34px * var(--ui-scale, 1));
    padding-top: calc(4px * var(--ui-scale, 1));
    padding-bottom: calc(4px * var(--ui-scale, 1));
  }
  #primary-sidebar #queue-card-wrapper {
    padding-top: calc(8px * var(--ui-scale, 1));
    padding-bottom: calc(8px * var(--ui-scale, 1));
  }
  #primary-sidebar #sentralbord-card {
    padding-top: calc(4px * var(--ui-scale, 1)) !important;
    padding-bottom: calc(4px * var(--ui-scale, 1)) !important;
  }
}

/* ==========================================================================
   COMPACT BEMANNING AND OMRÅDE HEADERS
   The workspace switcher and the Område card sit above the menu, so every
   pixel of their padding is taken from the navigation. Both were taller than
   their content needed: the card paid for padding twice (wrapper and button),
   and an empty Zisson line kept a padded row plus a flex gap. Only the vertical
   axis is trimmed - names, phone, line summary and the select all stay.
   ========================================================================== */
@media (min-width: 901px) {
  #primary-sidebar > #btn-workspace-switcher {
    padding-top: calc(4px * var(--ui-scale, 1));
    padding-bottom: calc(4px * var(--ui-scale, 1));
    row-gap: calc(4px * var(--ui-scale, 1));
    column-gap: calc(8px * var(--ui-scale, 1));
  }
  #primary-sidebar > #btn-workspace-switcher .workspace-avatar {
    width: calc(24px * var(--ui-scale, 1));
    height: calc(24px * var(--ui-scale, 1));
    border-radius: calc(8px * var(--ui-scale, 1));
    font-size: calc(10.5px * var(--ui-scale, 1));
  }
  #primary-sidebar > #btn-workspace-switcher.has-department-switcher {
    grid-template-columns: calc(24px * var(--ui-scale, 1)) minmax(0, 1fr) auto;
  }
  #primary-sidebar > #btn-workspace-switcher .workspace-department-select {
    margin-top: calc(2px * var(--ui-scale, 1));
    padding: calc(4px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));
    line-height: 1.25;
  }
  #primary-sidebar .sidebar-top-controls #queue-card-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #primary-sidebar .sidebar-top-controls #btn-toggle-queue-panel {
    min-height: 0 !important;
    padding-top: calc(7px * var(--ui-scale, 1)) !important;
    padding-bottom: calc(7px * var(--ui-scale, 1)) !important;
  }
  #primary-sidebar .sidebar-top-controls .queue-btn-text {
    text-align: center !important;
    align-items: center !important;
  }
  #primary-sidebar .sidebar-top-controls .queue-btn-text strong,
  #primary-sidebar .sidebar-top-controls .queue-btn-text small {
    line-height: 1.2;
    text-align: center !important;
    width: 100% !important;
  }
  #primary-sidebar .sidebar-top-controls .queue-btn-icon {
    width: calc(20px * var(--ui-scale, 1)) !important;
    height: calc(20px * var(--ui-scale, 1)) !important;
    flex: 0 0 calc(20px * var(--ui-scale, 1)) !important;
  }
  #primary-sidebar .sidebar-top-controls .queue-chevron {
    width: calc(20px * var(--ui-scale, 1)) !important;
    flex: 0 0 calc(20px * var(--ui-scale, 1)) !important;
  }
  /* The Zisson line summary is hidden to prevent duplicate text on the Område card */
  #primary-sidebar .sidebar-top-controls .zisson-line-summary {
    display: none !important;
  }
}

/* Ansattnummer på navnelinjen i Samtaler (#30562), ikke i badgeraden. */
.thread-item-top strong { display: flex; align-items: center; gap: calc(5px * var(--ui-scale, 1)); min-width: 0; }
.thread-item-top .thread-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-ansatt-inline {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: calc(8px * var(--ui-scale, 1));
  padding: calc(1px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));
}

/* Compact agent rows in sidebar for Bemanningsledere and Driftssentralen:
   Reduces vertical padding and avatar footprint so more agents fit on screen
   without scrolling, while keeping all functional details (state, timer, queues, transfer). */
#primary-sidebar #agents-list .agent-department-group {
  margin-bottom: calc(4px * var(--ui-scale, 1)) !important;
}
#primary-sidebar #agents-list .agent-department-group + .agent-department-group {
  margin-top: calc(4px * var(--ui-scale, 1)) !important;
  padding-top: calc(4px * var(--ui-scale, 1)) !important;
}
#primary-sidebar #agents-list .agent-department-toggle {
  padding: calc(3px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) !important;
  font-size: calc(11px * var(--ui-scale, 1)) !important;
}
#primary-sidebar #agents-list .agent-mini {
  padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
  gap: calc(8px * var(--ui-scale, 1)) !important;
  border-radius: calc(8px * var(--ui-scale, 1)) !important;
  min-height: 0 !important;
}
#primary-sidebar #agents-list .agent-avatar {
  width: calc(26px * var(--ui-scale, 1)) !important;
  height: calc(26px * var(--ui-scale, 1)) !important;
  font-size: calc(10.5px * var(--ui-scale, 1)) !important;
  flex: 0 0 calc(26px * var(--ui-scale, 1)) !important;
}
#primary-sidebar #agents-list .agent-avatar:after {
  width: calc(7px * var(--ui-scale, 1)) !important;
  height: calc(7px * var(--ui-scale, 1)) !important;
  bottom: 0 !important;
  right: 0 !important;
}
#primary-sidebar #agents-list .agent-mini strong {
  font-size: calc(12.5px * var(--ui-scale, 1)) !important;
  line-height: 1.25 !important;
}
#primary-sidebar #agents-list .agent-mini small,
#primary-sidebar #agents-list .zisson-mini-state {
  font-size: calc(11px * var(--ui-scale, 1)) !important;
  line-height: 1.2 !important;
  margin-top: calc(1px * var(--ui-scale, 1)) !important;
}
#primary-sidebar #agents-list .transfer-agent-button {
  width: calc(24px * var(--ui-scale, 1)) !important;
  height: calc(24px * var(--ui-scale, 1)) !important;
  padding: calc(2px * var(--ui-scale, 1)) !important;
}
#primary-sidebar #agents-list .transfer-agent-button svg {
  width: calc(14px * var(--ui-scale, 1)) !important;
  height: calc(14px * var(--ui-scale, 1)) !important;
}
#primary-sidebar #agents-list .agent-department-empty {
  padding: calc(4px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) !important;
  font-size: calc(11px * var(--ui-scale, 1)) !important;
}


/* Agent status icons and the transfer / call-ended marks (Zisson). */
.zisson-state-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: .3em;
  vertical-align: -0.16em;
}
.zisson-state-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zisson-state-icon[data-state="in_call"] svg { fill: currentColor; stroke: none; }
.zisson-state-icon[data-state="ringing"],
.zisson-state-icon[data-state="transfer_ringing"] { animation: zisson-ring-shake 1s infinite; transform-origin: 50% 50%; }
@keyframes zisson-ring-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
}
.zisson-mini-state[data-state="transfer_ringing"] { color: #fbbf24; font-weight: 600; }
.zisson-mini-state[data-state="transfer_answered"] { color: #4cd09b; font-weight: 600; }
.zisson-mini-state[data-state="transfer_failed"],
.zisson-mini-state[data-state="missed_ring"] { color: #f07a7a; font-weight: 600; }
.zisson-mini-state[data-state="call_ended"] { color: #a3b1ea; font-weight: 600; }
.global-call-answer-hint {
  display: inline-flex;
  align-items: center;
  padding: 0 .75em;
  font-weight: 700;
  color: #b5670f;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .zisson-state-icon[data-state="ringing"],
  .zisson-state-icon[data-state="transfer_ringing"] { animation: none; }
}

/* E-post: the whole conversation as one flow, and the "Ansvarlig" search box. */
.et-email-flow { display: flex; flex-direction: column; gap: calc(14px * var(--ui-scale, 1)); }
.ticket-agent-combo { position: relative; min-width: calc(190px * var(--ui-scale, 1)); }
.ticket-agent-combo-input { width: 100%; box-sizing: border-box; }
.ticket-agent-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  width: max(100%, calc(320px * var(--ui-scale, 1)));
  max-height: calc(320px * var(--ui-scale, 1));
  overflow-y: auto;
  padding: calc(4px * var(--ui-scale, 1));
  background: #fff;
  border: 1px solid var(--line, #d9e0dc);
  border-radius: calc(10px * var(--ui-scale, 1));
  box-shadow: 0 12px 32px rgba(20, 40, 32, .18);
}
.ticket-agent-suggest.hidden { display: none; }
.ticket-agent-heading {
  padding: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1));
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #6b7d74);
}
.ticket-agent-option {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale, 1));
  width: 100%;
  padding: calc(7px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border: 0;
  border-radius: calc(8px * var(--ui-scale, 1));
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.ticket-agent-option:hover, .ticket-agent-option:focus-visible { background: rgba(47, 166, 120, .12); outline: none; }
.ticket-agent-option.is-release { color: var(--muted, #6b7d74); font-weight: 600; }
.ticket-agent-avatar {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: calc(28px * var(--ui-scale, 1));
  height: calc(28px * var(--ui-scale, 1));
  border-radius: 50%;
  background: #6b7fd7;
  color: #fff;
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 700;
}
.ticket-agent-name { font-weight: 600; white-space: nowrap; }
.ticket-agent-option small { color: var(--muted, #6b7d74); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ticket-agent-empty { padding: calc(10px * var(--ui-scale, 1)); color: var(--muted, #6b7d74); }
html[data-theme="dark"] .ticket-agent-suggest { background: #172438; border-color: #29384b; }

/* Agent row: name on the left; status, boxed timer and transfer button on the
   right. The colour of the status text and of the timer box follow the state. */
#primary-sidebar #agents-list .agent-mini { --agent-state-color: #8ad0c0; --agent-state-bg: rgba(138, 208, 192, .14); }
#primary-sidebar #agents-list .agent-mini-text { flex: 1 1 0; min-width: 0; }
#primary-sidebar #agents-list .agent-mini-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  margin-left: auto;
  min-width: 0;
}
#primary-sidebar #agents-list .agent-mini-right .zisson-mini-state {
  display: inline-flex;
  align-items: center;
  max-width: calc(104px * var(--ui-scale, 1));
  margin: 0 !important;
  color: var(--agent-state-color) !important;
  font-weight: 700;
  white-space: nowrap;
}
#primary-sidebar #agents-list .zisson-mini-state-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#primary-sidebar #agents-list .agent-mini-right .agent-status-timer {
  flex: 0 0 auto;
  min-width: calc(48px * var(--ui-scale, 1));
  text-align: center;
  padding: calc(2px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
  border: calc(1.5px * var(--ui-scale, 1)) solid var(--agent-state-color);
  border-radius: calc(7px * var(--ui-scale, 1));
  color: var(--agent-state-color);
  background: var(--agent-state-bg);
  font-size: calc(11.5px * var(--ui-scale, 1));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  margin: 0;
}
#primary-sidebar #agents-list .agent-mini-right .agent-call-actions { margin: 0; min-width: 0; }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="available"] { --agent-state-color: #4cd09b; --agent-state-bg: rgba(76, 208, 155, .16); }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="in_call"],
#primary-sidebar #agents-list .agent-mini[data-zisson-state="transfer_answered"] { --agent-state-color: #ff8a4c; --agent-state-bg: rgba(255, 138, 76, .18); }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="transfer_answered"] { --agent-state-color: #4cd09b; --agent-state-bg: rgba(76, 208, 155, .16); }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="ringing"],
#primary-sidebar #agents-list .agent-mini[data-zisson-state="dialing"],
#primary-sidebar #agents-list .agent-mini[data-zisson-state="transfer_ringing"] { --agent-state-color: #fbbf24; --agent-state-bg: rgba(251, 191, 36, .2); }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="busy"] { --agent-state-color: #e3a75e; --agent-state-bg: rgba(227, 167, 94, .16); }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="paused"] { --agent-state-color: #d9b25f; --agent-state-bg: rgba(217, 178, 95, .16); }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="wrapup"],
#primary-sidebar #agents-list .agent-mini[data-zisson-state="call_ended"] { --agent-state-color: #a3b1ea; --agent-state-bg: rgba(163, 177, 234, .16); }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="transfer_failed"],
#primary-sidebar #agents-list .agent-mini[data-zisson-state="missed_ring"] { --agent-state-color: #f07a7a; --agent-state-bg: rgba(240, 122, 122, .18); }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="offline"] { --agent-state-color: #85958c; --agent-state-bg: rgba(133, 149, 140, .12); }
#primary-sidebar #agents-list .agent-mini[data-zisson-state="ringing"] .agent-status-timer,
#primary-sidebar #agents-list .agent-mini[data-zisson-state="transfer_ringing"] .agent-status-timer { animation: pulse-ring 1.5s infinite; }

/* Signed in to Zisson, not on a line. */
#primary-sidebar #agents-list .agent-mini[data-zisson-state="connected_idle"] { --agent-state-color: #7fc7d9; --agent-state-bg: rgba(127, 199, 217, .14); }
.zisson-mini-state[data-state="connected_idle"] { color: #7fc7d9; font-weight: 600; }
.agent-avatar.connected_idle:after { background: #7fc7d9; }

/* The line the agent is logged on to sits under the name, not next to the status. */
#primary-sidebar #agents-list .agent-mini-text .agent-mini-lines {
  display: block;
  margin-top: calc(1px * var(--ui-scale, 1)) !important;
  color: #93aca5;
  font-size: calc(10.5px * var(--ui-scale, 1)) !important;
  line-height: 1.2 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Område: a compact, centred status card. The area label is a small caps title,
   the chosen line is the headline, the state and its timer are one pill, and the
   Pause / Logg ut buttons share the width evenly.
   --------------------------------------------------------------------------- */
#agent-controls-rail-section #queue-card-wrapper {
  gap: calc(8px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
  border-radius: calc(16px * var(--ui-scale, 1));
  align-items: stretch;
  text-align: center;
}
#agent-controls-rail-section #queue-card-wrapper .queue-accordion-btn {
  min-height: calc(48px * var(--ui-scale, 1));
  padding: 0 calc(34px * var(--ui-scale, 1)) !important;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#agent-controls-rail-section #queue-card-wrapper .queue-btn-icon {
  left: 0;
  width: calc(32px * var(--ui-scale, 1));
  height: calc(32px * var(--ui-scale, 1));
  display: grid;
  place-items: center;
  border-radius: calc(10px * var(--ui-scale, 1));
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
#agent-controls-rail-section #queue-card-wrapper .queue-btn-text {
  align-items: center;
  justify-content: center;
  gap: calc(2px * var(--ui-scale, 1));
  width: 100%;
}
#agent-controls-rail-section #queue-card-wrapper .queue-btn-text strong {
  font: 700 calc(10.5px * var(--ui-scale, 1)) var(--font) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}
#agent-controls-rail-section #queue-card-wrapper .status-lines-sub {
  display: block;
  max-width: 100%;
  font: 700 calc(15px * var(--ui-scale, 1)) var(--font) !important;
  line-height: 1.25;
  text-align: center !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#agent-controls-rail-section #queue-card-wrapper .queue-chevron {
  right: 0;
  font-size: calc(14px * var(--ui-scale, 1));
  opacity: .8;
}
/* State + timer as one centred pill instead of a wide box. */
#agent-controls-rail-section #queue-timer-card {
  width: auto;
  align-self: center;
  min-height: 0;
  margin: 0;
  padding: calc(5px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
  border-radius: 999px;
  background: rgba(0, 0, 0, .26) !important;
  border: calc(1px * var(--ui-scale, 1)) solid rgba(255, 255, 255, .2) !important;
}
#agent-controls-rail-section #queue-card-wrapper .status-timer-sub,
#agent-controls-rail-section #queue-timer-card .status-timer-sub {
  margin: 0;
  padding: 0;
  font: 600 calc(13px * var(--ui-scale, 1)) var(--font) !important;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}
#agent-controls-rail-section #status-timer-text {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Pause / Logg ut: two equal, centred buttons. */
#agent-controls-rail-section #queue-agent-actions {
  gap: calc(8px * var(--ui-scale, 1));
  margin-top: calc(8px * var(--ui-scale, 1));
}
#agent-controls-rail-section #queue-agent-actions .btn-agent-action {
  height: calc(34px * var(--ui-scale, 1)) !important;
  min-height: calc(34px * var(--ui-scale, 1)) !important;
  border-radius: calc(11px * var(--ui-scale, 1)) !important;
  font: 700 calc(12.5px * var(--ui-scale, 1)) var(--font) !important;
  letter-spacing: .02em;
}

/* The simplified-menu button only exists on the phone layout. */
.mobile-simple-toggle { display: none; }
.mobile-simple-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mobile-simple-toggle.active { background: #17584c; color: #fff; border-color: #54c98f; }

@media (max-width: 900px) {
  .mobile-simple-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* The whole open menu scrolls, not only the agent list at the bottom. */
  .sidebar.mobile-open {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
  }
  .sidebar.mobile-open > * { flex-shrink: 0; }
  .sidebar.mobile-open #agents-list {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: calc(24px * var(--ui-scale, 1));
  }

  /* Simplified menu: Område, Oversikt, Meldinger, E-post and the agents. */
  .sidebar.sidebar-simple #mobile-sentralbord-slot,
  .sidebar.sidebar-simple .workspace-switcher,
  .sidebar.sidebar-simple #utility-agent-select,
  .sidebar.sidebar-simple #queue-agent-actions,
  .sidebar.sidebar-simple .nav-item[data-tab="customers-tab"],
  .sidebar.sidebar-simple .nav-item[data-tab="statistics-tab"],
  .sidebar.sidebar-simple #admin-agents-nav {
    display: none !important;
  }
}

/* Phone menu header: the logo gets its own row and the four tools sit below it
   as equal, labelled buttons, so nothing overlaps the logo. */
@media (max-width: 900px) {
  .sidebar .brand-row {
    flex-wrap: wrap;
    row-gap: calc(10px * var(--ui-scale, 1));
    padding-bottom: calc(12px * var(--ui-scale, 1));
  }
  .sidebar .brand-row .brand { flex: 1 0 100%; }
  .sidebar .sidebar-header-actions {
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(58px * var(--ui-scale, 1)), 1fr));
    gap: calc(8px * var(--ui-scale, 1));
  }
  .sidebar .sidebar-header-actions > button {
    width: 100% !important;
    height: calc(52px * var(--ui-scale, 1)) !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: calc(3px * var(--ui-scale, 1));
    padding: 0 !important;
    border: calc(1px * var(--ui-scale, 1)) solid #1f4239 !important;
    border-radius: calc(14px * var(--ui-scale, 1)) !important;
    background: #17352e !important;
    color: #b7c8c0 !important;
    box-sizing: border-box;
  }
  .sidebar .sidebar-header-actions > button::after {
    content: attr(data-label);
    font: 600 calc(10.5px * var(--ui-scale, 1)) var(--font);
    letter-spacing: .02em;
    line-height: 1;
  }
  .sidebar .sidebar-header-actions > button svg {
    width: calc(20px * var(--ui-scale, 1));
    height: calc(20px * var(--ui-scale, 1));
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .sidebar .sidebar-header-actions > .notification-toggle { font-size: calc(19px * var(--ui-scale, 1)) !important; line-height: 1 !important; }
  .sidebar .sidebar-header-actions > button.active,
  .sidebar .sidebar-header-actions > .mobile-simple-toggle.active {
    background: #15714e !important;
    border-color: #2fa678 !important;
    color: #fff !important;
  }
}

/* ===========================================================================
   E-post composer v2: one card. Top: Svar/Videresend + small tools. Then the
   Til/CC/BCC/Emne fields as quiet rows, the quick replies on one scrolling
   line, the editor, and a footer with the tools left and Lukk/Send right.
   =========================================================================== */
#email-tab .et-composer-v2 {
  --c-line: #e3e8e5;
  --c-soft: #f4f7f5;
  --c-text: #1f2a24;
  --c-muted: #667085;
  --c-accent: #0d6b5c;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(16, 40, 32, .06) !important;
  overflow: visible !important;
}
#email-tab .et-composer-v2 .et-composer-mode-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--c-line) !important;
  background: transparent !important;
  flex-wrap: nowrap !important;
}
#email-tab .et-composer-v2 .et-composer-modes {
  display: inline-flex !important;
  gap: 2px !important;
  padding: 3px !important;
  border-radius: 11px !important;
  background: var(--c-soft) !important;
  border: 0 !important;
  flex: 0 0 auto;
}
#email-tab .et-composer-v2 .et-mode-tab {
  border: 0 !important;
  background: transparent !important;
  color: var(--c-muted) !important;
  font: 600 13px var(--font) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  min-height: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
}
#email-tab .et-composer-v2 .et-mode-tab.active {
  background: #fff !important;
  color: var(--c-accent) !important;
  box-shadow: 0 1px 3px rgba(16, 40, 32, .14) !important;
}
#email-tab .et-composer-v2 .et-composer-head-tools {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}
#email-tab .et-composer-v2 .et-head-tool {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #475467 !important;
  font: 600 12px var(--font) !important;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
}
#email-tab .et-composer-v2 .et-head-tool.hidden { display: none !important; }
#email-tab .et-composer-v2 .et-head-tool.et-icon-only { width: 32px !important; padding: 0 !important; }
#email-tab .et-composer-v2 .et-head-tool svg,
#email-tab .et-composer-v2 .et-foot-tool svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#email-tab .et-composer-v2 .et-head-tool:hover,
#email-tab .et-composer-v2 .et-foot-tool:hover { background: #eef4f1 !important; color: var(--c-accent) !important; }
#email-tab .et-composer-v2 .et-head-tool.active,
#email-tab .et-composer-v2 .et-head-tool[aria-pressed="true"] {
  background: #e9f4f1 !important;
  border-color: #8fc9b9 !important;
  color: var(--c-accent) !important;
}

/* Til / CC / BCC / Emne */
#email-tab .et-composer-v2 .et-recipient-drawer {
  display: block !important;
  padding: 2px 14px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#email-tab .et-composer-v2 .et-recipient-drawer.hidden { display: none !important; }
#email-tab .et-composer-v2 .et-field-row {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #eef2ef !important;
  background: transparent !important;
}
#email-tab .et-composer-v2 .et-field-row label {
  font: 600 12px var(--font) !important;
  color: var(--c-muted) !important;
  letter-spacing: .02em;
  margin: 0 !important;
}
#email-tab .et-composer-v2 .et-field-row input {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--c-text) !important;
  font: 500 14px var(--font) !important;
}
#email-tab .et-composer-v2 .et-subject-field-row input { font-weight: 600 !important; }
#email-tab .et-composer-v2 .email-copy-fields { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
#email-tab .et-composer-v2.show-copy .email-copy-fields { display: block !important; }

/* Quick replies on one line that scrolls sideways */
#email-tab .et-composer-v2 .et-quick-reply-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  background: transparent !important;
}
#email-tab .et-composer-v2 .et-quick-reply-bar::-webkit-scrollbar { display: none; }
#email-tab .et-composer-v2 .et-quick-reply-label {
  flex: 0 0 auto;
  font: 600 11px var(--font) !important;
  color: var(--c-muted) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
#email-tab .et-composer-v2 .et-quick-chip {
  flex: 0 0 auto !important;
  padding: 5px 11px !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 999px !important;
  background: var(--c-soft) !important;
  color: #344054 !important;
  font: 600 12.5px var(--font) !important;
  white-space: nowrap !important;
  min-height: 0 !important;
  cursor: pointer;
}
#email-tab .et-composer-v2 .et-quick-chip:hover { border-color: #8fc9b9 !important; color: var(--c-accent) !important; }

/* Editor */
#email-tab .et-composer-v2 .email-format-toolbar { margin: 0 14px !important; border-radius: 10px !important; }
#email-tab .et-composer-v2 .email-rich-editor {
  min-height: 130px !important;
  max-height: 340px !important;
  padding: 10px 14px 14px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--c-text) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}
#email-tab .et-composer-v2.composer-expanded .email-rich-editor { min-height: 320px !important; max-height: 60vh !important; }
#email-tab .et-composer-v2 .email-attachments { padding: 0 14px 10px !important; margin: 0 !important; }

/* Footer: tools left, Lukk sak + Send right */
#email-tab .et-composer-v2 .et-composer-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--c-line) !important;
  border-radius: 0 0 16px 16px !important;
  background: #fafbfa !important;
  flex-wrap: nowrap !important;
}
#email-tab .et-composer-v2 .email-compose-tools {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-wrap: nowrap !important;
  min-width: 0;
}
#email-tab .et-composer-v2 .et-foot-tool {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #475467 !important;
  font: 600 12.5px var(--font) !important;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
}
#email-tab .et-composer-v2 .et-foot-tool[aria-expanded="true"] { background: #e9f4f1 !important; color: var(--c-accent) !important; }
#email-tab .et-composer-v2 .email-compose-submit {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto;
  margin: 0 !important;
}
#email-tab .et-composer-v2 .et-close-btn {
  height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #344054 !important;
  font: 600 13px var(--font) !important;
  white-space: nowrap;
  cursor: pointer;
}
#email-tab .et-composer-v2 .et-close-btn:hover { border-color: #8fc9b9 !important; color: var(--c-accent) !important; }
#email-tab .et-composer-v2 .et-send-btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  font: 700 14px var(--font) !important;
  white-space: nowrap;
}

/* Phone: icon-only tools, the height toggle hidden, roomier editor. */
@media (max-width: 900px) {
  #email-tab .et-composer-v2 { border-radius: 14px !important; }
  #email-tab .et-composer-v2 .et-composer-mode-bar { padding: 7px 8px !important; }
  #email-tab .et-composer-v2 .et-mode-tab { padding: 6px 10px !important; font-size: 12.5px !important; }
  #email-tab .et-composer-v2 #btn-toggle-email-wide { display: none !important; }
  #email-tab .et-composer-v2 .et-head-tool { padding: 0 8px !important; }
  #email-tab .et-composer-v2 .et-field-row { grid-template-columns: 44px minmax(0, 1fr) !important; }
  #email-tab .et-composer-v2 .et-field-row input { font-size: 15px !important; }
  #email-tab .et-composer-v2 .et-tool-label { display: none !important; }
  #email-tab .et-composer-v2 .et-foot-tool { width: 38px !important; height: 38px !important; padding: 0 !important; justify-content: center !important; }
  #email-tab .et-composer-v2 .et-foot-tool svg { width: 19px; height: 19px; }
  #email-tab .et-composer-v2 .email-rich-editor { min-height: 150px !important; font-size: 15px !important; }
  #email-tab .et-composer-v2 .et-close-btn { padding: 0 12px !important; }
  #email-tab .et-composer-v2 .et-send-btn { padding: 0 16px !important; }
}
@media (max-width: 380px) {
  #email-tab .et-composer-v2 .et-close-btn { font-size: 12px !important; padding: 0 9px !important; }
  #email-tab .et-composer-v2 .et-foot-tool { width: 34px !important; }
}

/* Dark theme */
html[data-theme="dark"] #email-tab .et-composer-v2 {
  --c-line: #29384b;
  --c-soft: #1c2a3d;
  --c-text: #e6edf3;
  --c-muted: #93a3b8;
  --c-accent: #6ed3b0;
  background: #142033 !important;
}
html[data-theme="dark"] #email-tab .et-composer-v2 .et-mode-tab.active,
html[data-theme="dark"] #email-tab .et-composer-v2 .et-head-tool,
html[data-theme="dark"] #email-tab .et-composer-v2 .et-close-btn { background: #1a283b !important; color: var(--c-text) !important; }
html[data-theme="dark"] #email-tab .et-composer-v2 .et-field-row { border-bottom-color: #22324a !important; }
html[data-theme="dark"] #email-tab .et-composer-v2 .et-composer-footer { background: #111c2c !important; }
html[data-theme="dark"] #email-tab .et-composer-v2 .et-quick-chip { color: var(--c-text) !important; }
html[data-theme="dark"] #email-tab .et-composer-v2 .et-foot-tool { color: #b4c2d3 !important; }

.et-btn-label-short { display: none; }
@media (max-width: 900px) {
  /* E-post heading: the title keeps its place on the left, the actions are
     compact on the right instead of stretching over the title. */
  #email-tab .et-command-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  #email-tab .et-command-title-group { flex: 1 1 auto !important; min-width: 0 !important; }
  #email-tab .et-command-title-group .eyebrow { display: none !important; }
  #email-tab .et-title-row h1 { white-space: nowrap !important; font-size: 22px !important; margin: 0 !important; }
  #email-tab .et-command-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    gap: 8px !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
  }
  #email-tab .et-command-actions .et-action-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }
  #email-tab #btn-sync-email-now { width: 40px !important; padding: 0 !important; justify-content: center !important; }
  #email-tab #btn-new-email .et-btn-label { display: none !important; }
  #email-tab #btn-new-email .et-btn-label-short { display: inline !important; }

  /* Composer footer on one line: icon tools left, Lukk + Send right. */
  #email-tab .et-composer-v2 .email-composer-actions.et-composer-footer {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  #email-tab .et-composer-v2 .et-composer-footer .email-compose-tools,
  #email-tab .et-composer-v2 .et-composer-footer .email-compose-submit {
    width: auto !important;
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
  }
  #email-tab .et-composer-v2 .et-composer-footer .email-compose-submit { flex: 0 0 auto !important; justify-content: flex-end !important; }
  #email-tab .et-composer-v2 .et-composer-footer .template-picker { flex: 0 0 auto !important; }
  #email-tab .et-composer-v2 .et-foot-tool { width: 34px !important; height: 36px !important; }
  #email-tab .et-composer-v2 .et-close-btn { height: 36px !important; padding: 0 11px !important; }
  #email-tab .et-composer-v2 .et-send-btn { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; }
  #email-tab .et-composer-v2 .et-hide-mobile { display: none; }
}

/* Område, final layout (desktop and phone): icon | centred text | chevron on
   one row, all vertically centred, the status pill centred under it. The
   selectors carry three ids so the older mobile rules cannot pull it apart. */
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 10px 12px 12px !important;
  min-height: 0 !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper #btn-toggle-queue-panel {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 !important;
  text-align: center !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-btn-icon {
  position: static !important;
  transform: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: start !important;
  margin: 0 !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-btn-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-btn-text strong {
  margin: 0 !important;
  font: 700 10.5px var(--font) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  opacity: .75;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .status-lines-sub {
  margin: 0 !important;
  max-width: 100% !important;
  font: 700 15px var(--font) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-chevron {
  position: static !important;
  transform: none !important;
  justify-self: end !important;
  margin: 0 !important;
  font-size: 14px !important;
  opacity: .8;
}
#primary-sidebar #agent-controls-rail-section .queue-profile-accordion.open #queue-card-wrapper .queue-chevron { transform: rotate(180deg) !important; }
#primary-sidebar #agent-controls-rail-section #queue-timer-card {
  align-self: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Phone: the theme picker lives only in the menu, not in the top bar. */
@media (max-width: 900px) {
  #btn-theme-picker-topbar { display: none !important; }
}

/* Meldinger heading: the same actions as E-post (refresh + Ny). */
#sms-tab .sms-page-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
#sms-tab .sms-title-group { min-width: 0; }
#sms-tab .sms-command-actions { display: flex !important; gap: 8px !important; flex: 0 0 auto !important; }
#sms-tab .sms-action-btn { white-space: nowrap; }
.sms-new-modal datalist { display: none; }

@media (max-width: 900px) {
  #sms-tab .sms-page-heading {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  #sms-tab .sms-title-group .eyebrow,
  #sms-tab .sms-title-group p:not(.eyebrow) { display: none !important; }
  #sms-tab .sms-title-group h1 { white-space: nowrap !important; font-size: 22px !important; margin: 0 !important; }
  #sms-tab .sms-command-actions { width: auto !important; margin: 0 !important; flex-wrap: nowrap !important; }
  #sms-tab .sms-action-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }
  #sms-tab #btn-sync-sms-now { width: 40px !important; padding: 0 !important; justify-content: center !important; }
  #sms-tab .sms-action-btn .et-btn-label { display: none !important; }
  #sms-tab .sms-action-btn .et-btn-label-short { display: inline !important; }
}

/* Desktop: the Meldinger heading reads left to right like E-post. */
#sms-tab .sms-page-heading { flex-direction: row !important; text-align: left !important; }
#sms-tab .sms-title-group { flex: 1 1 auto !important; text-align: left !important; }
#sms-tab .sms-command-actions { align-self: flex-end !important; }

/* Meldinger: "Samtaler" can be dragged wider or narrower on desktop. */
@media (min-width: 901px) {
  #sms-tab .inbox-layout { grid-template-columns: var(--sms-list-width, calc(265px * var(--ui-scale, 1))) minmax(0, 1fr) !important; }
  #sms-tab .thread-panel { position: relative; min-width: 0; }
}
@media (max-width: 900px) {
  #sms-list-resizer { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Klar / Etterarbeid / Pause / Logg ut: four equal tiles under Område. Each has
   its own colour as a soft tint; the current state is filled. The pause menu
   lists the account's own Zisson pause reasons with an icon each.
   --------------------------------------------------------------------------- */
#agent-controls-rail-section #queue-agent-actions.agent-state-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px !important;
  margin-top: 8px !important;
  padding: 0 !important;
  border: 0 !important;
}
#agent-controls-rail-section #queue-agent-actions.agent-state-actions[hidden] { display: none !important; }
#agent-controls-rail-section #queue-agent-actions .pause-control-container { position: relative; min-width: 0; width: 100% !important; }
#agent-controls-rail-section #queue-agent-actions .state-btn {
  --tone: 47, 166, 120;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 0 4px !important;
  border: 1px solid rgba(var(--tone), .42) !important;
  border-radius: 14px !important;
  background: rgba(var(--tone), .14) !important;
  color: rgb(var(--tone)) !important;
  font: 700 10.5px var(--font) !important;
  letter-spacing: .02em;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
#agent-controls-rail-section #queue-agent-actions .state-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#agent-controls-rail-section #queue-agent-actions .state-btn span { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#agent-controls-rail-section #queue-agent-actions .state-ready { --tone: 52, 199, 120; }
#agent-controls-rail-section #queue-agent-actions .state-acw { --tone: 245, 166, 35; }
#agent-controls-rail-section #queue-agent-actions .state-pause { --tone: 240, 128, 48; }
#agent-controls-rail-section #queue-agent-actions .state-logout { --tone: 235, 87, 87; }
#agent-controls-rail-section #queue-agent-actions .state-btn:hover:not(:disabled) { background: rgba(var(--tone), .24) !important; transform: translateY(-1px); }
#agent-controls-rail-section #queue-agent-actions .state-btn:active:not(:disabled) { transform: translateY(0); }
#agent-controls-rail-section #queue-agent-actions .state-btn.is-current {
  background: rgb(var(--tone)) !important;
  border-color: rgb(var(--tone)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(var(--tone), .28), 0 6px 16px rgba(var(--tone), .32) !important;
}
#agent-controls-rail-section #queue-agent-actions .state-btn:disabled,
#agent-controls-rail-section #queue-agent-actions .state-btn.disabled-gray {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
#agent-controls-rail-section #queue-agent-actions .state-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Pause reasons */
#agent-controls-rail-section #pause-dropdown-menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  min-width: 210px !important;
  padding: 6px !important;
  border-radius: 14px !important;
  background: #14251f !important;
  border: 1px solid #2b473c !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45) !important;
}
#agent-controls-rail-section #pause-dropdown-menu .pause-option-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #e7f1ec !important;
  font: 600 13.5px var(--font) !important;
  text-align: left !important;
  cursor: pointer;
}
#agent-controls-rail-section #pause-dropdown-menu .pause-option-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #f08030;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#agent-controls-rail-section #pause-dropdown-menu .pause-option-btn:hover,
#agent-controls-rail-section #pause-dropdown-menu .pause-option-btn:focus-visible { background: rgba(240, 128, 48, .16) !important; outline: none; }
#agent-controls-rail-section #queue-agent-actions.agent-state-actions { position: relative; }
#agent-controls-rail-section #queue-agent-actions .pause-control-container { position: static !important; }
#agent-controls-rail-section #pause-dropdown-menu {
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  min-width: 0 !important;
  width: auto !important;
  z-index: 40;
}
#agent-controls-rail-section #queue-agent-actions .state-btn span { font-size: 10px; letter-spacing: 0; }

/* SMS Hurtigsvar: the Maler as one-tap chips above the SMS composer. */
.sms-quick-reply-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(6px * var(--ui-scale, 1));
  align-items: center;
  overflow-x: auto;
  padding: calc(6px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) 0;
  scrollbar-width: thin;
}
.sms-quick-reply-bar:empty { display: none; }
.sms-quick-reply-bar .et-quick-chip { flex: 0 0 auto; }

/* Maler: edit (pencil) next to delete in both the SMS and the e-mail menu. */
.template-edit-button {
  width: calc(28px * var(--ui-scale, 1));
  border: 0;
  border-radius: calc(12px * var(--ui-scale, 1));
  background: transparent;
  color: #667085;
  cursor: pointer;
  font-size: calc(15px * var(--ui-scale, 1));
}
.template-edit-button:hover { color: var(--blue, #0d6b5c); background: var(--blue-soft, rgba(13, 107, 92, 0.08)); }

/* Header: logo on its own line, the round icon buttons (incl. the admin gear)
   under it, so nothing is drawn over the logo. */
.brand-row { flex-wrap: wrap; row-gap: calc(10px * var(--ui-scale, 1)); }
.brand-row .brand { flex: 1 0 100%; }
.sidebar-header-actions { flex: 1 0 100%; justify-content: flex-start; flex-wrap: wrap; }
.sidebar-header-actions .admin-settings-toggle {
  width: calc(34px * var(--ui-scale, 1)) !important;
  height: calc(34px * var(--ui-scale, 1)) !important;
  flex: 0 0 calc(34px * var(--ui-scale, 1)) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: calc(1px * var(--ui-scale, 1)) solid #1f4239 !important;
  border-radius: 50% !important;
  background: #17352e !important;
  color: #9db0a8 !important;
  cursor: pointer;
  transition: all .2s ease;
}
.sidebar-header-actions .admin-settings-toggle.hidden,
.sidebar-header-actions .admin-settings-toggle[hidden] { display: none !important; }
.sidebar-header-actions .admin-settings-toggle:hover { background: #1e453c !important; border-color: #2b594d !important; color: #fff !important; }
.sidebar-header-actions .admin-settings-toggle svg { width: calc(17px * var(--ui-scale, 1)); height: calc(17px * var(--ui-scale, 1)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The logged-in agent is a plain label now: no chevron, no picker. */
.agent-identity { cursor: default; pointer-events: none; }

/* Område, rounded: every piece of the card is a soft pill/circle instead of a
   box with sharp-ish corners. Same three-id selectors as the layout above. */
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper {
  border-radius: 28px !important;
  padding: 14px 16px 16px !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-btn-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper #btn-toggle-queue-panel {
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  border-radius: 999px !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-chevron {
  width: 30px;
  height: 30px;
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
#primary-sidebar #agent-controls-rail-section #queue-timer-card {
  border-radius: 999px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
#agent-controls-rail-section #queue-agent-actions .state-btn {
  border-radius: 999px !important;
  height: 58px !important;
  min-height: 58px !important;
}
#agent-controls-rail-section #queue-agent-actions.agent-state-actions { gap: 10px !important; }
#agent-controls-rail-section .queue-panel-content,
#primary-sidebar .queue-panel-content { border-radius: 24px !important; }
#agent-controls-rail-section .queue-toggle-item { border-radius: 18px !important; }
#agent-controls-rail-section .pause-dropdown-menu { border-radius: 22px !important; }
#utility-agent-select .active-agent-select-wrapper,
#utility-agent-select .agent-identity { border-radius: 999px !important; }
#utility-agent-select .user-avatar { border-radius: 50% !important; }

/* Header v2: the round buttons sit to the right of the logo; when the row is
   too narrow for both they drop under the logo (flex-wrap does the choosing). */
.brand-row { flex-wrap: wrap; row-gap: calc(8px * var(--ui-scale, 1)); column-gap: calc(8px * var(--ui-scale, 1)); }
.brand-row .brand { flex: 1 0 auto; }
.sidebar-header-actions { flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 900px) {
  .sidebar .sidebar-header-actions { flex: 1 0 100%; }
}

/* Område v2: compact, with the line choices as a dropdown laid over what is
   below instead of pushing it down. */
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper {
  border-radius: 22px !important;
  padding: 8px 10px 9px !important;
  gap: 6px !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper #btn-toggle-queue-panel {
  grid-template-columns: 28px minmax(0, 1fr) 28px !important;
  min-height: 34px !important;
  gap: 4px !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-btn-icon {
  width: 28px !important;
  height: 28px !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-btn-icon svg { width: 14px; height: 14px; }
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-btn-text { gap: 0 !important; }
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-btn-text strong {
  font-size: 9px !important;
  letter-spacing: .16em !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .status-lines-sub { font-size: 12.5px !important; }
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-chevron {
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  font-size: 0 !important;
  padding: 0 !important;
}
#primary-sidebar #agent-controls-rail-section #queue-card-wrapper .queue-chevron svg { display: block; margin: 0; }
#primary-sidebar #agent-controls-rail-section #queue-timer-card {
  padding: 2px 12px !important;
  min-height: 0 !important;
}
#primary-sidebar #agent-controls-rail-section #queue-timer-card .status-timer-sub { font-size: 11px !important; }
#primary-sidebar #agent-controls-rail-section #queue-timer-card #status-timer-text { font-size: 11px !important; }

#agent-controls-rail-section .queue-profile-accordion { position: relative; }
#agent-controls-rail-section .queue-panel-content {
  position: absolute !important;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  margin-top: 0 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5) !important;
}
#agent-controls-rail-section #queue-agent-actions .state-btn {
  height: 46px !important;
  min-height: 46px !important;
}
#agent-controls-rail-section #queue-agent-actions.agent-state-actions { margin-top: 6px !important; gap: 8px !important; }

/* A toast never sits on top of what is underneath it (it covered the Send button). */
.toast-container, .toast { pointer-events: none; }