:root {
  --ink: #20364a;
  --muted: #667787;
  --line: #dce5ec;
  --soft: #f4f7fa;
  --paper: #fff;
  --sidebar: #f2f5f7;
  --coral: #557fae;
  --coral-dark: #3e678f;
  --coral-soft: #edf4fa;
  --mint: #4b967d;
  --blue: #668cc1;
  --shadow: 0 12px 36px rgba(25, 39, 31, .11);
}

* { box-sizing: border-box; }
[hidden]{display:none!important}
html, body { margin: 0; min-height: 100%; }
body { font-family: "DM Sans", sans-serif; color: var(--ink); background: #e9ece7; overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.app-shell { height: 100vh; display: grid; grid-template-columns: 226px minmax(0, 1fr); background: var(--paper); }
.sidebar { background: var(--sidebar); border-right: 1px solid #dde2dc; padding: 22px 14px 14px; display: flex; flex-direction: column; min-height: 0; }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 10px 24px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(24,33,29,.18); }
.brand-mark span:first-child { position: absolute; width: 22px; height: 10px; border: 3px solid #fff; border-top: 0; transform: rotate(-37deg); top: 8px; left: 4px; border-radius: 0 0 10px 10px; }
.brand-mark span:last-child { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); right: 5px; bottom: 5px; }
.brand strong { display: block; font: 800 16px/1.05 "Manrope"; letter-spacing: -.3px; }
.brand small { display: block; color: #8a918d; font-size: 10px; margin-top: 4px; letter-spacing: .35px; text-transform: uppercase; }
.nav-block { display: grid; gap: 3px; }
.nav-item { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; padding: 10px 11px; border-radius: 9px; text-align: left; color: #535d57; cursor: pointer; transition: .16s ease; text-decoration: none; font-size: 13px; }
.nav-item:hover { background: rgba(255,255,255,.65); color: var(--ink); }
.nav-item.active { background: var(--ink); color: white; box-shadow: 0 5px 14px rgba(26,36,31,.14); }
.nav-item b { font-size: 11px; min-width: 21px; padding: 2px 6px; border-radius: 9px; background: rgba(24,33,29,.08); text-align: center; }
.nav-item.active b { color: var(--ink); background: #f7a193; }
.nav-icon { font-size: 17px; text-align: center; }
.nav-label { padding: 0 11px; margin: 27px 0 9px; color: #929994; text-transform: uppercase; letter-spacing: 1.2px; font-size: 10px; font-weight: 700; }
.mailbox-nav .nav-item { grid-template-columns: 16px 1fr auto; }
.mail-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--coral); }
.mail-dot.mint { background: var(--mint); }.mail-dot.blue { background: var(--blue); }.mail-dot.coral { background: var(--coral); }
.sidebar-footer { margin-top: auto; }
.sync-state { margin: 0 8px 14px; padding: 11px 10px; display: flex; gap: 9px; border-top: 1px solid #dce1db; border-bottom: 1px solid #dce1db; align-items: center; }
.sync-state > span { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px #d8eee6; }
.sync-state strong, .sync-state small { display: block; }.sync-state strong { font-size: 11px; }.sync-state small { color: #8a918d; font-size: 9px; margin-top: 2px; }
.profile-button { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; text-align: left; cursor: pointer; padding: 8px; border-radius: 10px; }
.profile-button:hover { background: #fff; }.profile-button strong, .profile-button small { display: block; }.profile-button strong { font-size: 11px; }.profile-button small { color: #8a918d; font-size: 9px; margin-top: 2px; }.more { color: #8a918d; font-size: 11px; }
.avatar { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.avatar-dark { width: 34px; height: 34px; color: #fff; background: #37413c; }.avatar-coral { color: #8b3729; background: #ffcabf; }

.workspace { min-width: 0; height: 100vh; display: grid; grid-template-rows: 81px minmax(0, 1fr); }
.topbar { border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 24px; justify-content: space-between; gap: 20px; }
.topbar h1 { margin: 0; font: 800 21px/1.1 "Manrope"; letter-spacing: -.5px; }.topbar p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }.live-dot { display: inline-block; width: 6px; height: 6px; background: var(--coral); border-radius: 50%; margin-right: 6px; }
.top-actions { display: flex; align-items: center; gap: 9px; }.global-search { height: 38px; width: 270px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 9px; background: #fafbf9; }.global-search input { border: 0; background: transparent; min-width: 0; width: 100%; outline: 0; font-size: 11px; }.global-search kbd { font-size: 9px; border: 1px solid #dfe3de; border-radius: 5px; padding: 2px 5px; color: #8a918d; background: #fff; white-space: nowrap; }
.icon-button { width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; position: relative; }.icon-button:hover { border-color: #bfc7c1; }.icon-button i { width: 5px; height: 5px; background: var(--coral); border: 2px solid #fff; box-sizing: content-box; border-radius: 50%; position: absolute; right: 7px; top: 6px; }
.primary-button, .send-button { border: 0; background: var(--ink); color: white; height: 38px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 11px; cursor: pointer; box-shadow: 0 5px 13px rgba(24,33,29,.15); }.primary-button:hover, .send-button:hover { background: #2b3731; transform: translateY(-1px); }
.mobile-menu { display: none; }

.content-grid { min-height: 0; height: 100%; overflow: hidden; display: grid; grid-template-columns: 335px minmax(420px, 1fr) 252px; }
.ticket-column { min-width: 0; min-height: 0; height: 100%; overflow: hidden; border-right: 1px solid var(--line); display: grid; grid-template-rows: 58px minmax(0, 1fr); }
.filter-row { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--line); gap: 6px; }.filter-tabs { display: flex; gap: 2px; }.filter-tab { border: 0; background: transparent; color: #737b76; padding: 7px 8px; border-radius: 7px; font-size: 10px; cursor: pointer; white-space: nowrap; }.filter-tab.active { color: var(--ink); background: var(--soft); font-weight: 700; }.filter-tab span { color: #9ba19d; margin-left: 2px; }.filter-button { border: 0; background: transparent; color: #7b837e; font-size: 9px; padding: 6px; cursor: pointer; white-space: nowrap; }
.ticket-list { min-height: 0; overflow-y: auto; }.ticket { padding: 16px 15px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; transition: background .15s; }.ticket:hover { background: #fafbf9; }.ticket.active { background: #fff5f2; }.ticket.active::before { content: ""; width: 3px; background: var(--coral); position: absolute; left: 0; top: 0; bottom: 0; }.ticket-top { display: flex; align-items: center; gap: 9px; }.ticket-avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 10px; color: #47514b; background: #e9ece8; flex: 0 0 auto; }.ticket-sender { min-width: 0; flex: 1; }.ticket-sender strong { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.ticket-sender span { display: block; color: #8d948f; font-size: 9px; margin-top: 3px; }.ticket-time { font-size: 9px; color: #929994; align-self: flex-start; margin-top: 2px; }.ticket h3 { font-size: 11px; margin: 12px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.ticket p { font-size: 10px; color: #7b837e; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }.ticket-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }.ticket-label { font-size: 8px; color: #6e746f; padding: 4px 7px; background: #eef0ed; border-radius: 5px; }.ticket-mailbox { font-size: 8px; color: #979e99; display: flex; align-items: center; gap: 4px; }.unread-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); position: absolute; right: 15px; top: 45px; }.ticket.priority .ticket-avatar { background: #ffded6; color: #a24a39; }
.empty-list { text-align: center; padding: 50px 20px; color: #8a918d; font-size: 11px; }

.conversation { min-width: 0; min-height: 0; height: 100%; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: #fbfcfa; }
.conversation-actionbar{min-height:48px;padding:7px 16px;background:#f7f9fb;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.conversation-actionbar>div{display:flex;gap:6px}.conversation-actionbar button{height:32px;border:1px solid var(--line);background:#fff;color:#405668;border-radius:8px;padding:0 10px;font-size:11px;font-weight:600;cursor:pointer}.conversation-actionbar button:hover,.conversation-actionbar button.active{background:#eaf1f6;border-color:#cbd9e4}
.conversation-head { min-height: 74px; padding: 14px 19px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }.subject-block { display: flex; align-items: center; min-width: 0; }.subject-block h2 { font: 700 15px/1.25 "Manrope"; letter-spacing: -.25px; margin: 5px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.eyebrow { display: flex; gap: 8px; align-items: center; color: #8b928e; font-size: 9px; }.status-pill { padding: 3px 7px; border-radius: 8px; font-size: 8px; font-weight: 700; }.status-open { color: #a03f2f; background: #ffded6; }.status-waiting { color: #7a5b19; background: #f7e9bd; }.status-closed { color: #26735a; background: #d9eee6; }.conversation-tools { display: flex; gap: 6px; flex: 0 0 auto; }.conversation-tools .icon-button { width: 33px; height: 33px; }.resolve-button { height: 33px; border: 0; border-radius: 8px; background: #e8eee9; padding: 0 11px; color: #35423a; font-size: 9px; font-weight: 700; cursor: pointer; }.resolve-button:hover { background: #dce5de; }.back-button { display: none; }
.thread-scroll { min-height: 0; overflow-y: auto; padding: 22px 30px 16px; }.thread { max-width: 720px; margin: 0 auto; }.message { margin-bottom: 19px; }.message-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }.message-person { display: flex; gap: 9px; align-items: center; }.message-person .avatar { width: 31px; height: 31px; border-radius: 9px; }.message-person strong { display: block; font-size: 10px; }.message-person span { display: block; font-size: 8px; color: #939a95; margin-top: 2px; }.message-time { font-size: 8px; color: #939a95; }.message-body { margin-left: 40px; background: white; border: 1px solid var(--line); border-radius: 4px 13px 13px 13px; padding: 15px 17px; box-shadow: 0 3px 12px rgba(29,40,34,.035); font-size: 10.5px; line-height: 1.65; }.message.agent .message-body { background: #f1f6f3; border-color: #dbe5de; }.message-body p { margin: 0 0 9px; }.message-body p:last-child { margin-bottom: 0; }.recipient-line { display: flex; align-items: center; gap: 5px; color: #8b928e; font-size: 8px; margin-top: 5px; }.recipient-line .mail-dot { width: 5px; height: 5px; }
.composer { padding: 0 22px 18px; background: #fbfcfa; }.reply-routing { max-width: 720px; margin: 0 auto 7px; display: flex; align-items: center; gap: 8px; font-size: 8px; color: #8a918d; }.mailbox-chip { border: 0; background: #f0f2ef; border-radius: 6px; padding: 5px 8px; font-weight: 600; font-size: 8px; display: flex; align-items: center; gap: 5px; }.mailbox-chip .mail-dot { width: 6px; height: 6px; }.mailbox-chip b { margin-left: 4px; }.routing-note { margin-left: auto; color: var(--mint); }.composer-box { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid #d9dfda; border-radius: 12px; box-shadow: 0 8px 24px rgba(26,39,31,.075); overflow: hidden; }.composer-toolbar { height: 37px; padding: 0 10px; display: flex; align-items: center; border-bottom: 1px solid #ecefec; }.composer-toolbar button, .attach-button, .template-button { border: 0; background: transparent; height: 28px; min-width: 28px; font-size: 10px; color: #666f69; cursor: pointer; border-radius: 5px; }.composer-toolbar button:hover, .attach-button:hover, .template-button:hover { background: var(--soft); }.composer-toolbar i { width: 1px; height: 16px; background: var(--line); margin: 0 5px; }.composer textarea { resize: none; border: 0; outline: 0; width: 100%; min-height: 68px; max-height: 160px; padding: 12px 15px; font-size: 10px; line-height: 1.55; }.composer-footer { border-top: 1px solid #ecefec; min-height: 46px; padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; }.template-button { padding: 0 7px; color: #58635c; }.send-group { display: flex; align-items: center; gap: 9px; }.send-group > span { font-size: 8px; color: #9aa19c; }.send-button { height: 33px; font-size: 9px; padding: 0 12px; }.send-button kbd { font-size: 8px; margin-left: 8px; color: #bfc5c1; }.attachment-row { display: none; padding: 0 10px 9px; gap: 6px; flex-wrap: wrap; }.attachment-row.visible { display: flex; }.attachment { background: #f1f3f0; padding: 5px 8px; border-radius: 6px; font-size: 8px; color: #5d665f; }

.detail-panel { min-width: 0; border-left: 1px solid var(--line); overflow-y: auto; background: #fff; }.panel-section { padding: 18px 17px; border-bottom: 1px solid var(--line); }.customer-top { display: flex; align-items: center; gap: 10px; }.customer-top h3 { margin: 0; font: 700 12px "Manrope"; }.customer-top a { color: #8a918d; font-size: 9px; text-decoration: none; display: block; margin-top: 4px; }.outline-button { width: 100%; height: 31px; border: 1px solid var(--line); border-radius: 8px; background: white; margin-top: 14px; font-size: 9px; font-weight: 600; cursor: pointer; }.outline-button:hover { background: var(--soft); }.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }.section-title h4 { font: 700 10px "Manrope"; margin: 0; }.section-title button { border: 0; background: transparent; font-size: 10px; color: #8d948f; }.field-label { display: block; margin: 12px 0 5px; color: #8b928e; font-size: 8px; }.field-select { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: #fff; height: 32px; padding: 0 8px; outline: 0; font-size: 9px; color: #49534d; }.field-select:focus { border-color: #aab4ad; }.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }.tag-list > span { background: #f0f2ef; border-radius: 5px; padding: 5px 6px; font-size: 8px; color: #59625c; }.tag-list > span button { border: 0; background: transparent; color: #919792; padding: 0 0 0 3px; cursor: pointer; }.add-tag { border: 1px dashed #cfd5d0; background: #fff; color: #7c847f; border-radius: 5px; font-size: 8px; padding: 4px 6px; cursor: pointer; }.activity { display: flex; gap: 9px; position: relative; padding-bottom: 17px; }.activity:not(:last-child)::before { content: ""; width: 1px; background: #dfe4df; position: absolute; left: 3px; top: 8px; bottom: 0; }.activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: 0 0 auto; margin-top: 3px; position: relative; z-index: 1; }.activity-dot.pale { background: #b9c2bc; }.activity p { font-size: 8px; line-height: 1.45; margin: 0; }.activity small { display: block; font-size: 7px; color: #9ba19d; margin-top: 3px; }.panel-note { margin: 16px; padding: 11px; background: #f5f7f4; border-radius: 9px; display: flex; gap: 8px; }.panel-note > span { width: 17px; height: 17px; border-radius: 50%; background: #dfe6e0; display: grid; place-items: center; font: 700 9px serif; }.panel-note p { margin: 0; font-size: 8px; line-height: 1.5; color: #737b76; }.panel-note strong { display: block; color: #4d5750; margin-bottom: 2px; }

.detail-panel { min-height: 0; height: 100%; }
.toast { position: fixed; right: 24px; bottom: 24px; background: var(--ink); color: white; border-radius: 12px; padding: 12px 15px; display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow); transform: translateY(120px); opacity: 0; transition: .3s ease; z-index: 20; }.toast.show { transform: translateY(0); opacity: 1; }.toast > span { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); }.toast strong, .toast small { display: block; }.toast strong { font-size: 10px; }.toast small { font-size: 8px; color: #bfc6c1; margin-top: 3px; }
dialog { width: min(430px, calc(100% - 32px)); border: 0; padding: 10px; border-radius: 15px; box-shadow: 0 22px 70px rgba(20,31,25,.25); } dialog::backdrop { background: rgba(20,27,23,.36); backdrop-filter: blur(2px); }.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 12px 14px; }.dialog-head small { color: var(--coral); text-transform: uppercase; letter-spacing: 1px; font-size: 8px; font-weight: 700; }.dialog-head h3 { margin: 4px 0 0; font: 700 16px "Manrope"; }.dialog-head button { border: 0; background: var(--soft); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }.template-option { width: 100%; border: 0; border-top: 1px solid var(--line); background: white; padding: 13px 12px; text-align: left; cursor: pointer; border-radius: 7px; }.template-option:hover { background: #f7f9f6; }.template-option strong, .template-option span { display: block; }.template-option strong { font-size: 10px; }.template-option span { color: #8b928e; margin-top: 4px; font-size: 9px; }

@media (max-width: 1180px) { .content-grid { grid-template-columns: 310px minmax(430px, 1fr); }.detail-panel { display: none; } }
@media (max-width: 850px) { body { overflow: auto; }.app-shell { grid-template-columns: 1fr; }.sidebar { position: fixed; inset: 0 auto 0 0; width: 230px; z-index: 30; transform: translateX(-102%); transition: .25s ease; box-shadow: var(--shadow); }.sidebar.open { transform: translateX(0); }.workspace { height: 100dvh; }.mobile-menu { display: block; border: 0; background: transparent; font-size: 20px; }.topbar { height: 70px; padding: 0 14px; }.topbar > div:first-of-type { flex: 1; }.top-actions .global-search, .top-actions .icon-button { display: none; }.content-grid { grid-template-columns: minmax(280px, 38%) 1fr; }.ticket-column { min-width: 280px; }.thread-scroll { padding-left: 18px; padding-right: 18px; }.composer { padding-left: 13px; padding-right: 13px; } }
@media (max-width: 670px) { .content-grid { display: block; position: relative; }.ticket-column { height: calc(100dvh - 70px); border: 0; }.conversation { display: none; position: fixed; inset: 70px 0 0; z-index: 10; }.content-grid.show-conversation .ticket-column { display: none; }.content-grid.show-conversation .conversation { display: grid; }.back-button { display: block; border: 0; background: transparent; font-size: 18px; margin-right: 7px; cursor: pointer; }.conversation-tools .icon-button { display: none; }.routing-note { display: none; }.thread-scroll { padding-top: 15px; }.message-body { margin-left: 0; }.send-group > span { display: none; }.topbar h1 { font-size: 17px; }.primary-button { padding: 0 11px; }.filter-row { padding: 0 8px; } }

/* Readability pass: optimized for Windows screens and normal browser scaling. */
body, button, input, textarea, select { font-family: "Segoe UI", Arial, sans-serif; text-rendering: optimizeLegibility; }
.brand strong, .topbar h1, .subject-block h2, .customer-top h3, .section-title h4, .dialog-head h3 { font-family: "Segoe UI", Arial, sans-serif; }
.nav-item { font-size: 13px; }
.brand strong { font-size: 17px; }.brand small { font-size: 10px; }
.topbar h1 { font-size: 22px; }.topbar p { font-size: 12px; }
.global-search input, .primary-button { font-size: 12px; }
.font-scale-button { height:38px; min-width:66px; border:1px solid var(--line); border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; color:#4f5953; }.font-scale-button strong{font-size:13px}.font-scale-button span{font-size:9px;color:#8a938d}.font-scale-button:hover{border-color:#aab4ad;background:#f7f9f6}
.filter-tab { font-size: 12px; }.filter-button { font-size: 11px; }
.ticket-sender strong { font-size: 13px; }.ticket-sender span, .ticket-time { font-size: 11px; }
.ticket h3 { font-size: 13.5px; line-height: 1.35; }.ticket p { font-size: 12px; line-height: 1.55; }.ticket-label, .ticket-mailbox { font-size: 10px; }
.eyebrow { font-size: 11px; }.status-pill { font-size: 10px; }.subject-block h2 { font-size: 17px; }
.resolve-button { font-size: 11px; }.message-person strong { font-size: 12px; }.message-person span, .message-time { font-size: 10px; }
.message-body { font-size: 13.5px; line-height: 1.65; }.recipient-line { font-size: 10px; }
.reply-routing, .mailbox-chip { font-size: 10.5px; }.composer textarea { font-size: 13px; line-height: 1.55; }.template-button, .send-button { font-size: 11px; }.send-group > span { font-size: 10px; }
.customer-top h3 { font-size: 14px; }.customer-top a { font-size: 11px; }.outline-button { font-size: 11px; }
.section-title h4 { font-size: 12px; }.field-label { font-size: 11px; }.field-select { font-size: 12px; height: 36px; }.tag-list > span, .add-tag { font-size: 10px; }
.activity p { font-size: 10.5px; }.activity small { font-size: 9px; }.panel-note p { font-size: 10px; }
.toast strong { font-size: 12px; }.toast small { font-size: 10px; }

.list-actions { display: flex; align-items: center; gap: 4px; }
.view-selector,.list-tool,.page-button { height:31px; border:1px solid var(--line); background:#fff; color:#4d6172; border-radius:7px; padding:0 9px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; }
.view-selector { background:#eef3f7; border-color:#d5e0e8; }.view-selector b{background:#355f83;color:#fff;border-radius:10px;padding:1px 6px;margin-left:4px;font-size:9px}.list-tool:hover,.page-button:not(:disabled):hover{background:#f2f6f9}.page-button{width:31px;padding:0;font-size:17px}.page-button:disabled{opacity:.45;cursor:not-allowed}.page-count{font-size:10px;color:#6b7b88;white-space:nowrap;padding:0 4px}
.advanced-filter-button { border: 1px solid var(--line); background: #fff; color: #4f5953; border-radius: 7px; padding: 6px 8px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.advanced-filter-button span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 3px; border-radius: 9px; background: #edf0ed; font-size: 9px; }
.advanced-filter-button.has-filters { border-color: #f3a292; color: #a84433; background: #fff4f1; }.advanced-filter-button.has-filters span { background: var(--coral); color: #fff; }
.filter-scrim { position: absolute; inset: 81px 0 0; z-index: 17; border: 0; padding: 0; background: rgba(20,29,24,.16); opacity: 0; visibility: hidden; transition: .2s; }
.filter-scrim.open { opacity: 1; visibility: visible; }
.filter-drawer { position: absolute; z-index: 18; top: 81px; right: 0; bottom: 0; width: 320px; background: #fff; border-left: 1px solid var(--line); box-shadow: -14px 0 36px rgba(25,37,30,.11); display: grid; grid-template-rows: auto minmax(0,1fr) auto; transform: translateX(105%); transition: transform .23s ease; }
.filter-drawer.open { transform: translateX(0); }
.filter-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 15px; border-bottom: 1px solid var(--line); }
.filter-drawer-head small { display: block; color: #929a95; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; }.filter-drawer-head h2 { margin: 3px 0 0; font-size: 20px; }
.filter-drawer-head button { width: 31px; height: 31px; border: 0; border-radius: 8px; background: var(--soft); font-size: 18px; cursor: pointer; }
.filter-drawer-body { overflow-y: auto; padding: 15px 18px; }
.filter-search { height: 38px; border: 1px solid #d5dcd6; border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-bottom: 13px; color: #7f8982; }.filter-search input { width: 100%; border: 0; outline: 0; font-size: 12px; }
.filter-group { border-bottom: 1px solid #ecefec; padding: 4px 0 12px; margin-bottom: 7px; }.filter-group summary { list-style: none; display: flex; justify-content: space-between; padding: 9px 0; font-size: 12px; font-weight: 700; cursor: pointer; }.filter-group summary::-webkit-details-marker { display:none; }.filter-group summary span { transition:.15s; }.filter-group[open] summary span { transform: rotate(180deg); }
.filter-group label { display: grid; grid-template-columns: 19px 1fr auto; align-items: center; gap: 7px; min-height: 34px; padding: 4px 6px; border-radius: 7px; cursor: pointer; font-size: 12px; }.filter-group label:hover { background: #f5f7f4; }.filter-group input { width: 15px; height: 15px; accent-color: var(--ink); }.filter-group label span { display: flex; align-items: center; gap: 6px; }.filter-group label small { color: #9aa19d; font-size: 10px; }
.filter-drawer-footer { border-top: 1px solid var(--line); padding: 12px 18px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }.filter-drawer-footer button { height: 38px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor:pointer; }.reset-filter { border: 1px solid var(--line); background:#fff; }.apply-filter { border:0; background:var(--ink); color:#fff; }
@media (max-width:850px) { .filter-drawer { top:70px; width:min(340px,100%); }.filter-scrim { inset:70px 0 0; } }
@media (max-width:670px) { .filter-tab[data-filter="priority"] { display:none; }.filter-button { display:none; } }
@media (min-width:851px) {
  .app-shell { grid-template-columns:74px minmax(0,1fr); }
  .sidebar { padding:18px 10px; }
  .brand { padding:2px 10px 24px; justify-content:center; }.brand>div { display:none; }
  .nav-label { display:none; }.nav-block { margin-bottom:18px; }
  .nav-item,.mailbox-nav .nav-item { position:relative; grid-template-columns:1fr; justify-items:center; padding:11px 7px; font-size:0; }
  .nav-item .nav-icon { font-size:17px; }.nav-item b { display:none; }.mailbox-nav .mail-dot { width:10px; height:10px; }
  .sidebar-footer .sync-state { justify-content:center; padding:12px 0; margin:0 4px 12px; }.sync-state div { display:none; }
  .profile-button { grid-template-columns:1fr; justify-items:center; }.profile-button>span:not(.avatar) { display:none; }
  .content-grid { grid-template-columns:minmax(305px,38%) minmax(420px,1fr); }
  .filter-tab[data-filter="priority"], .filter-button { display:none; }
}

/* User-selectable readability modes. Large is the default. */
.font-large .ticket { padding:20px 16px; min-height:132px; }
.font-large .ticket-sender strong { font-size:14px; }.font-large .ticket-sender span,.font-large .ticket-time { font-size:12px; }
.font-large .ticket h3 { font-size:15px; margin-top:14px; }.font-large .ticket p { font-size:13px; line-height:1.6; }
.font-large .ticket-label,.font-large .ticket-mailbox { font-size:11px; }
.font-large .subject-block h2 { font-size:19px; }.font-large .eyebrow { font-size:12px; }.font-large .status-pill { font-size:11px; }
.font-large .message-person strong { font-size:13px; }.font-large .message-person span,.font-large .message-time { font-size:11px; }
.font-large .message-body { font-size:15px; line-height:1.7; padding:18px 20px; }.font-large .recipient-line { font-size:11px; }
.font-large .composer textarea { font-size:14px; min-height:76px; }.font-large .reply-routing,.font-large .mailbox-chip { font-size:11.5px; }
.font-large .field-label { font-size:12px; }.font-large .field-select { font-size:13px; height:39px; }.font-large .section-title h4 { font-size:13px; }
.font-large .activity p { font-size:11.5px; }.font-large .activity small { font-size:10px; }.font-large .panel-note p { font-size:11px; }
.font-xlarge .ticket { padding:22px 17px; min-height:146px; }
.font-xlarge .ticket-sender strong { font-size:15px; }.font-xlarge .ticket-sender span,.font-xlarge .ticket-time { font-size:13px; }
.font-xlarge .ticket h3 { font-size:16px; margin-top:15px; }.font-xlarge .ticket p { font-size:14px; line-height:1.65; }
.font-xlarge .ticket-label,.font-xlarge .ticket-mailbox { font-size:12px; }
.font-xlarge .subject-block h2 { font-size:20px; }.font-xlarge .eyebrow { font-size:13px; }.font-xlarge .status-pill { font-size:12px; }
.font-xlarge .message-person strong { font-size:14px; }.font-xlarge .message-person span,.font-xlarge .message-time { font-size:12px; }
.font-xlarge .message-body { font-size:16px; line-height:1.75; padding:20px 22px; }.font-xlarge .recipient-line { font-size:12px; }
.font-xlarge .composer textarea { font-size:15px; min-height:82px; }.font-xlarge .reply-routing,.font-xlarge .mailbox-chip { font-size:12.5px; }
.font-xlarge .field-label { font-size:13px; }.font-xlarge .field-select { font-size:14px; height:42px; }.font-xlarge .section-title h4 { font-size:14px; }
.font-xlarge .activity p { font-size:12.5px; }.font-xlarge .activity small { font-size:11px; }.font-xlarge .panel-note p { font-size:12px; }
@media(max-width:850px){.font-scale-button{min-width:44px}.font-scale-button span{display:none}}

/* Softer slate palette and list-first workflow. */
.brand-mark { background:#2b4a64; box-shadow:0 4px 12px rgba(31,55,75,.16); }
.nav-item.active { background:#dfe8ef; color:#213b51; box-shadow:none; }.nav-item.active b { color:#274760; background:#c8d9e6; }
.ticket.active { background:#eef4f9; }.ticket.active::before { background:#557fae; }
.ticket.priority .ticket-avatar { background:#e1ebf4; color:#355f83; }.avatar-coral { background:#e2ebf3; color:#355f83; }
.message.agent .message-body { background:#f2f6f9; border-color:#d8e3eb; }
.layout-button { height:38px; padding:0 11px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#405668; font-size:11px; cursor:pointer; }.layout-button:hover{background:#f5f8fa;border-color:#aebdca}
.ticket-list-header,.wide-meta { display:none; }
.list-view .content-grid { grid-template-columns:minmax(0,1fr); }
.list-view .ticket-column { display:grid; width:100%; border-right:0; }
.list-view .conversation,.list-view .detail-panel { display:none; }
.list-view .ticket-list-header { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:minmax(240px,.9fr) minmax(380px,1.8fr) minmax(230px,.9fr); gap:26px; padding:12px 24px; background:#f5f7f9; border-bottom:1px solid var(--line); color:#728291; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.65px; }
.list-view .ticket { display:grid; grid-template-columns:minmax(240px,.9fr) minmax(380px,1.8fr) minmax(230px,.9fr); gap:26px; align-items:center; min-height:112px; padding:18px 24px; background:#fff; }
.list-view .ticket:hover { background:#f7f9fb; }.list-view .ticket.active { background:#f0f5f9; }
.list-view .ticket-top { min-width:0; }.list-view .ticket-time { margin-left:auto; }
.list-view .ticket-content { min-width:0; }.list-view .ticket-content h3 { margin:0 0 8px; font-size:15px; }.list-view .ticket-content p { font-size:12.5px; line-height:1.5; -webkit-line-clamp:1; }
.list-view .ticket-bottom { margin:0; display:grid; gap:6px; min-width:0; }.list-view .ticket-label { display:none; }.list-view .ticket-mailbox { width:max-content; max-width:100%; }
.list-view .wide-meta { min-width:0; display:grid; gap:5px; margin:0; font-size:11px; color:#667787; }.list-view .wide-meta b,.list-view .wide-meta i,.list-view .wide-meta em { font-style:normal; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.list-view .wide-meta b::before{content:"◆";color:#86bb67;font-size:8px;margin-right:6px}.list-view .wide-meta i::before{content:"♙";margin-right:6px}.list-view .wide-meta em::before{content:"⌁";margin-right:6px}
.list-view .unread-mark { top:50%; transform:translateY(-50%); right:auto; left:10px; background:#557fae; }
.ticket-view .back-button { display:block; border:0; background:#f0f4f7; color:#405668; width:32px; height:32px; border-radius:8px; margin-right:10px; cursor:pointer; }
@media(max-width:1000px){.list-view .ticket-list-header,.list-view .ticket{grid-template-columns:minmax(210px,.9fr) minmax(300px,1.5fr) minmax(180px,.75fr);gap:18px}.layout-button{display:none}}
@media(max-width:1150px){.list-view .filter-tabs .filter-tab,.list-view .list-tool,.list-view .page-count,.list-view .page-button{display:none}}
@media(max-width:750px){.list-view .ticket-list-header{display:none}.list-view .ticket{display:block;min-height:0;padding:18px}.list-view .ticket-content h3{margin-top:13px}.list-view .ticket-bottom{margin-top:13px}.list-view .wide-meta{display:none}}

/* Freshdesk-inspired focused ticket workspace: reading first, properties second. */
.ticket-view .content-grid { grid-template-columns:minmax(0,1fr) clamp(250px,20vw,292px); }
.ticket-view .ticket-column { display:none; }
.ticket-view .conversation { grid-column:1; background:#fff; }
.ticket-view .detail-panel { display:block; grid-column:2; }
.ticket-view.details-collapsed .content-grid { grid-template-columns:minmax(0,1fr); }
.ticket-view.details-collapsed .detail-panel { display:none; }
.ticket-view .thread { max-width:980px; }
.ticket-view .composer-box,.ticket-view .reply-routing { max-width:980px; }
.ticket-view .thread-scroll { padding:26px clamp(24px,4vw,58px) 20px; background:#fff; }
.ticket-view .composer { padding:10px clamp(24px,4vw,58px) 22px; background:#fff; border-top:1px solid #edf1f4; }
.viewer-presence { margin-top:7px; color:#728291; font-size:10px; }
.viewer-presence span { color:#4b967d; margin-right:4px; }
.sla-card { background:#f8fafc; }
.sla-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sla-head small { display:block; color:#7b8995; font-size:9px; letter-spacing:.65px; }
.sla-head strong { display:block; margin-top:4px; font-size:15px; }
.sla-head button { border:0; background:#e9eff4; width:27px; height:27px; border-radius:7px; cursor:pointer; font-size:18px; }
.sla-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:10px; color:#6b7a87; border-top:1px solid #e5ebf0; }
.sla-row b { color:#435767; font-weight:600; text-align:right; }.sla-row .sla-ok{color:#347d66}
.update-ticket-button { width:100%; height:38px; margin-top:16px; border:0; border-radius:8px; background:#557fae; color:white; font-size:11px; font-weight:700; cursor:pointer; }
.update-ticket-button:hover { background:#446f9b; }
@media(max-width:800px){
  .ticket-view .content-grid { grid-template-columns:minmax(0,1fr); }
  .ticket-view .detail-panel { display:none; }
  .ticket-view #toggleDetails { display:none; }
  .viewer-presence { display:none; }
}

/* Freshdesk-like typography and reply editor. */
body,button,input,textarea,select{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:auto}
.language-select{height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 9px;color:#405668;font-size:12px;outline:0}.language-select:focus{border-color:#6d9bd4}
.ticket-view .conversation-actionbar button{font-size:13px;font-weight:600}.ticket-view .subject-block h2{font-size:19px;font-weight:700}.ticket-view .message-person strong{font-size:13px}.ticket-view .message-person span,.ticket-view .message-time{font-size:11px}.ticket-view .message-body{font-size:14px;line-height:1.62}.ticket-view .field-label{font-size:12px}.ticket-view .field-select{height:38px;font-size:13px}
.composer{padding:12px clamp(24px,4vw,58px) 20px;background:#fff;border-top:0}.composer.collapsed .expanded-composer{display:none}.composer.expanded .quick-reply{display:none}.quick-reply{max-width:980px;margin:0 auto;border:1px solid #96c8ff;border-radius:8px;background:#fff;min-height:102px;padding:11px 12px}.quick-reply>div{display:flex;gap:7px}.quick-mode{height:30px;border:0;background:#f1f4f7;color:#344d61;border-radius:6px;padding:0 11px;font-size:13px;font-weight:600;cursor:pointer}.quick-mode.active{background:#dfeeff;color:#1663bb}.quick-placeholder{display:block;width:100%;border:0;background:transparent;text-align:left;color:#92a0ad;font-size:13px;padding:18px 0 8px;cursor:text}.expanded-composer{max-width:1100px;margin:0 auto}.composer.expanded{padding-top:0}.composer.expanded .composer-box{max-width:1100px;border:1px solid #2878e6;border-radius:9px;box-shadow:none}.composer-modebar{height:52px;border-bottom:1px solid #e1e7ed;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.composer-modebar>div{display:flex;gap:7px}.composer-modebar button{height:31px;border:0;border-radius:6px;background:#f1f4f7;color:#344d61;padding:0 11px;font-size:13px;font-weight:600;cursor:pointer}.composer-modebar button.active{background:#dcecff;color:#1262bd}.composer-modebar>#closeComposer{background:transparent;font-size:18px;color:#708393;padding:0 8px}.recipient-fields{border-bottom:1px solid #e5eaee;padding:12px 16px 8px}.recipient-fields>div{min-height:41px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13px}.recipient-fields>div>span:first-child{color:#506577}.recipient-fields strong{font-size:13px}.recipient-fields .mailbox-chip{width:max-content;background:transparent;padding:0;font-size:13px}.recipient-chip{width:max-content;background:#f0f3f6;border-radius:16px;padding:7px 11px;color:#38556b}.bcc-link,.clear-link{border:0;background:transparent;color:#075fd2;font-size:12px;cursor:pointer}.composer.expanded textarea{min-height:260px;max-height:42vh;padding:20px 16px;font-size:14px;line-height:1.6}.composer.expanded .composer-toolbar{order:3;height:48px;border-top:1px solid #e5eaee;border-bottom:0;padding:0 12px}.composer.expanded .composer-toolbar button{font-size:12px}.composer.expanded .composer-footer{min-height:57px;padding:7px 12px}.composer.expanded .send-button{height:36px;background:#2878e6;border-radius:7px;font-size:13px;padding:0 16px}.discard-button{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer}.composer.expanded .template-button{font-size:12px}.composer.expanded .send-group>span{font-size:11px}.conversation.reply-open{grid-template-rows:auto auto minmax(100px,.35fr) minmax(440px,.9fr)}
@media(max-width:850px){.language-select{max-width:125px}.conversation.reply-open{grid-template-rows:auto auto minmax(80px,.25fr) minmax(390px,.85fr)}.composer.expanded textarea{min-height:200px}}

/* Final Freshdesk desktop dimensions. */
@media (min-width:851px){.app-shell{grid-template-columns:66px minmax(0,1fr)}.sidebar{padding-left:8px;padding-right:8px}}
.composer textarea{font-size:14px}

/* Keep the full reply editor inside the viewport, matching Freshdesk. */
.conversation.reply-open{grid-template-rows:auto auto clamp(82px,14vh,128px) minmax(0,1fr)}
.conversation.reply-open .thread-scroll{overflow:auto;padding-top:14px;padding-bottom:10px}
.composer.expanded{min-height:0;height:100%;overflow:hidden;padding-bottom:12px}
.composer.expanded .expanded-composer,.composer.expanded .composer-box{height:100%;min-height:0}
.composer.expanded .composer-box{display:flex;flex-direction:column}
.composer.expanded textarea{flex:1 1 auto;min-height:70px;max-height:none;overflow-y:auto}
.composer.expanded .composer-modebar,.composer.expanded .recipient-fields,.composer.expanded .composer-toolbar,.composer.expanded .composer-footer,.composer.expanded .attachment-row{flex:0 0 auto}
.conversation-subview[hidden]{display:none}.activity-feed,.threads-panel{max-width:980px;margin:0 auto;background:#fff}.activity-feed h3,.threads-panel h3{font-size:16px;margin:0 0 18px}.activity-feed article{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #e5eaee}.activity-feed article>span{width:30px;height:30px;border-radius:9px;background:#eaf1f6;display:grid;place-items:center;color:#355f83}.activity-feed strong,.activity-feed small{display:block;font-size:12px}.activity-feed small{color:#81909c;margin-top:5px}.threads-panel{padding:20px;border:1px solid #dce5ec;border-radius:10px}.threads-panel p{font-size:13px;color:#687b89}.threads-panel button{height:36px;border:0;border-radius:8px;background:#2878e6;color:#fff;padding:0 14px;font-weight:600;cursor:pointer}
@media(max-height:720px){.conversation.reply-open{grid-template-rows:auto auto 70px minmax(0,1fr)}.composer-modebar{height:44px}.recipient-fields>div{min-height:34px}.composer.expanded .composer-toolbar{height:42px}.composer.expanded .composer-footer{min-height:49px}}

/* Reply editor follows the conversation instead of squeezing/covering it. */
.conversation.reply-open{display:block;height:100%;overflow-y:auto;overscroll-behavior:contain}
.conversation.reply-open .conversation-actionbar{position:sticky;top:0;z-index:8}
.conversation.reply-open .thread-scroll{min-height:180px;height:auto;overflow:visible;padding-bottom:18px}
.conversation.reply-open .composer.expanded{height:auto;min-height:0;overflow:visible;padding-top:0;padding-bottom:24px}
.conversation.reply-open .expanded-composer,.conversation.reply-open .composer-box{height:auto;min-height:0}
.conversation.reply-open .composer-modebar{order:0}.conversation.reply-open .recipient-fields{order:1}.conversation.reply-open textarea{order:2;min-height:260px;max-height:none;flex:none}.conversation.reply-open .composer-toolbar{order:3}.conversation.reply-open .composer-footer{order:4}.conversation.reply-open .attachment-row{order:5}
@media(max-height:720px){.conversation.reply-open .thread-scroll{min-height:140px}.conversation.reply-open textarea{min-height:220px}}

/* Freshdesk-style ticket views and crisp, reusable interface icons. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.nav-icon,.ticket-views svg,.view-search svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:block}
.nav-icon{font-size:0}
.ticket-views{display:none;min-width:0;min-height:0;background:#fff;border-right:1px solid var(--line);padding:14px 10px;overflow-y:auto}
.list-view .content-grid{grid-template-columns:290px minmax(0,1fr)}
.list-view .ticket-views{display:block}
.list-view .layout-button{display:none}
.view-search{height:40px;border:1px solid #cbd8e2;border-radius:7px;display:flex;align-items:center;gap:8px;padding:0 10px;color:#526b7e;background:#fff;margin-bottom:18px}
.view-search:focus-within{border-color:#2878e6;box-shadow:0 0 0 1px #2878e6}
.view-search svg{width:18px;height:18px;flex:0 0 auto}
.view-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#263f52;font-size:13px}
.view-search input::placeholder{color:#7c8d9a}
.view-section-title{height:34px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#213b51}
.view-section-title span{font-size:13px;color:#607789}
.view-menu{display:grid;gap:2px}
.ticket-view-option{width:100%;min-height:40px;border:0;border-left:3px solid transparent;border-radius:3px;background:transparent;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 10px;color:#38546a;text-align:left;font-size:13px;cursor:pointer}
.ticket-view-option svg{width:18px;height:18px;color:#0b63d8}
.ticket-view-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-view-option b{min-width:22px;border-radius:12px;padding:2px 6px;background:#edf2f6;color:#5e7180;text-align:center;font-size:10px;font-weight:700}
.ticket-view-option:hover{background:#f3f7fa}
.ticket-view-option.active{border-left-color:#2878e6;background:#e8f2ff;color:#0758bd;font-weight:600}
.ticket-view-option.active b{background:#2f5d7f;color:#fff}
.view-menu-secondary{border-top:1px solid #dfe7ed;margin-top:8px;padding-top:9px}
.list-view .ticket-column{grid-column:2}
.list-view .filter-row{height:58px;padding:0 20px}
.list-view .view-selector{border:0;background:transparent;padding-left:0;font-size:13px;color:#233f54}
.list-view .filter-tabs .filter-tab{display:none}
.list-view .ticket-list-header{padding-left:20px;padding-right:20px;background:#f7f9fb;color:#607385}
.list-view .ticket{padding-left:20px;padding-right:20px;min-height:104px}
@media(max-width:1100px){.list-view .content-grid{grid-template-columns:245px minmax(0,1fr)}.ticket-view-option{font-size:12px;padding-left:8px;padding-right:8px}.ticket-view-option b{display:none}}
@media(max-width:850px){.list-view .content-grid{grid-template-columns:minmax(0,1fr)}.list-view .ticket-views{display:none}.list-view .ticket-column{grid-column:1}}

/* Ticket list and controls aligned with the Freshdesk card workflow. */
.new-menu-wrap{position:relative}.primary-button span{font-size:10px;margin-left:4px}.new-menu{position:absolute;z-index:40;right:0;top:44px;width:250px;padding:7px;background:#fff;border:1px solid #d8e1e8;border-radius:10px;box-shadow:0 16px 38px rgba(24,46,63,.17)}.new-menu button{width:100%;border:0;background:#fff;border-radius:7px;padding:10px;display:grid;grid-template-columns:28px 1fr;gap:8px;text-align:left;cursor:pointer;color:#17364d}.new-menu button:hover{background:#f1f6fa}.new-menu button>b{font-size:17px;color:#3577c5}.new-menu strong,.new-menu small{display:block}.new-menu strong{font-size:13px}.new-menu small{font-size:11px;color:#728291;margin-top:2px}
.select-all,.ticket-check{display:grid;place-items:center;cursor:pointer}.select-all input,.ticket-check input{position:absolute;opacity:0}.select-all span,.ticket-check span{width:16px;height:16px;border:1px solid #9fb2c2;border-radius:4px;background:#fff;display:block}.select-all input:checked+span,.ticket-check input:checked+span{background:#2f72d6;border-color:#2f72d6;box-shadow:inset 0 0 0 3px #fff}.bulk-bar{min-height:47px;padding:7px 20px;display:flex;align-items:center;gap:7px;background:#eef5ff;border-bottom:1px solid #cbdcf1;color:#17364d}.bulk-bar[hidden]{display:none}.bulk-bar strong{font-size:12px;margin-right:auto}.bulk-bar button{height:31px;border:1px solid #b8c9d8;border-radius:7px;background:#fff;color:#294b65;font-size:11px;padding:0 10px;cursor:pointer}.bulk-bar button:hover{border-color:#5c8bb4;background:#f8fbfe}
.list-view .filter-row{height:57px}.list-view .filter-tabs{align-items:center}.list-view .list-actions{align-items:center}.list-view .filter-button b{color:#17364d}.list-view .ticket-list{background:#f5f7f9;padding:9px 10px 24px}.list-view .ticket{position:relative;grid-template-columns:30px 58px minmax(380px,1fr) minmax(220px,310px);gap:10px;min-height:106px;margin-bottom:8px;padding:17px 18px;background:#fff;border:1px solid #dce4ea;border-radius:3px}.list-view .ticket:hover{border-color:#b8c7d3;background:#fbfdff}.list-view .ticket.active{background:#fff;border-color:#dce4ea}.list-view .ticket.active::before{display:none}.list-view .ticket-check{align-self:center}.list-view .ticket-top{display:block}.list-view .ticket-avatar{width:44px;height:44px;border-radius:50%;font-size:13px;background:#e6f0fa;color:#315d7f}.list-view .ticket-sender{display:none}.list-view .ticket-content{align-self:center}.list-view .ticket-tags{display:flex;gap:5px;margin-bottom:6px}.ticket-tags span{display:inline-flex;border:1px solid #c7d4de;border-radius:4px;padding:2px 5px;font-size:10px;color:#335067;background:#fff}.ticket-tags .overdue-tag{border:0;background:#ffebed;color:#cb2940}.list-view .ticket-content h3{font-size:14px;color:#082f49;margin:0 0 8px}.list-view .ticket-content h3 small{font-size:12px;color:#62798a;font-weight:400}.list-view .ticket-content p{font-size:12px;color:#607687}.list-view .ticket-content p b{font-weight:400}.list-view .ticket-bottom{align-self:center;display:grid;gap:7px}.list-view .ticket-mailbox{font-size:11px;color:#718493}.list-view .wide-meta{font-size:12px;gap:7px}.list-view .unread-mark{left:8px;width:5px;height:50%;border-radius:3px}.ticket-list-header{display:none!important}
.message-actions{display:flex;align-items:center;gap:5px}.message-actions button{opacity:0;border:1px solid #d5e0e8;background:#fff;border-radius:6px;height:27px;min-width:27px;color:#466278;cursor:pointer}.message:hover .message-actions button{opacity:1}.quoted-toggle{border:1px solid #aabac6;background:#fff;border-radius:8px;height:18px;line-height:8px;margin:8px 0;color:#34546b;cursor:pointer}.send-options{height:37px;border:0;border-left:1px solid rgba(255,255,255,.35);border-radius:0 7px 7px 0;background:#2774dc;color:#fff;cursor:pointer}.send-button{border-radius:7px 0 0 7px!important}.composer-toolbar{flex-wrap:wrap}.composer-toolbar button{min-width:27px}.new-item-dialog{width:min(620px,calc(100% - 30px));border:0;border-radius:12px;padding:0;box-shadow:0 24px 70px rgba(18,43,61,.25)}.new-item-dialog::backdrop{background:rgba(16,36,49,.36)}.new-item-dialog form{padding:22px}.new-item-dialog header{display:flex;justify-content:space-between;align-items:start;margin-bottom:12px}.new-item-dialog header small{font-size:9px;color:#657d8e;letter-spacing:.8px}.new-item-dialog h2{margin:4px 0;font-size:20px}.new-item-dialog header button{width:30px;height:30px;border:0;border-radius:7px;background:#eef3f6;font-size:19px}.new-item-dialog label{display:block;font-size:12px;font-weight:600;margin:13px 0}.new-item-dialog input,.new-item-dialog textarea{width:100%;border:1px solid #cbd8e2;border-radius:8px;margin-top:6px;padding:10px;font:13px inherit}.new-item-dialog input{height:40px}.new-item-dialog textarea{min-height:150px;resize:vertical}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #e2e9ee;padding-top:14px}.secondary-dialog,.primary-dialog{height:37px;padding:0 15px;border-radius:7px;font-weight:600;cursor:pointer}.secondary-dialog{border:1px solid #cbd8e2;background:#fff}.primary-dialog{border:0;background:#2774dc;color:#fff}
@media(max-width:900px){.list-view .ticket{grid-template-columns:26px 50px 1fr}.list-view .ticket-bottom{display:none}.new-menu{position:fixed;right:12px;top:64px}.bulk-bar button:not(:last-child){display:none}}

/* Collapsible Ticket Views panel and compact responsive toolbar. */
.topbar-title{display:flex;align-items:center;gap:10px;min-width:0}.topbar-title>div{min-width:0}.ticket-views-toggle{position:relative;width:34px;height:34px;flex:0 0 34px;border:1px solid #dbe3e9;border-radius:8px;background:#fff;color:#35536a;display:grid;place-items:center;cursor:pointer}.ticket-views-toggle:hover,.ticket-views-toggle.active{background:#e8f1f8;border-color:#c6d8e5;color:#0c64cc}.ticket-views-toggle>span{font-size:16px;line-height:1}.ticket-views-toggle>i{position:absolute;z-index:60;left:0;top:41px;display:none;width:max-content;padding:6px 8px;border-radius:5px;background:#17364d;color:#fff;font-size:10px;font-style:normal;font-weight:600;box-shadow:0 4px 10px rgba(10,35,51,.18)}.ticket-views-toggle>i::before{content:"";position:absolute;left:12px;top:-4px;width:8px;height:8px;background:#17364d;transform:rotate(45deg)}.ticket-views-toggle:hover>i,.ticket-views-toggle:focus-visible>i{display:block}.ticket-view .ticket-views-toggle{display:none}
.list-view.views-collapsed .content-grid{grid-template-columns:minmax(0,1fr)}.list-view.views-collapsed .ticket-views{display:none}.list-view.views-collapsed .ticket-column{grid-column:1}.list-view .filter-button{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#526b7d}.list-view .filter-button:hover{color:#164e78;background:#f0f5f8;border-radius:6px}
@media(max-width:1100px){.list-view #layoutModeButton{display:none}.list-view .filter-button{font-size:10px}.list-view .page-count{display:none}}
@media(max-width:850px){.ticket-views-toggle{display:none}.topbar-title{flex:1}.list-view .filter-button{display:none}}
@media(max-width:1100px){
  .ticket-view .content-grid{grid-template-columns:minmax(0,1fr)}
  .ticket-view .detail-panel{display:none}
  .ticket-view #toggleDetails{display:none}
  .ticket-view .conversation-actionbar{overflow-x:auto;scrollbar-width:thin;justify-content:flex-start}
  .ticket-view .conversation-actionbar>div{flex:0 0 auto}
  .ticket-view .thread-scroll{padding-left:26px;padding-right:26px}
  .ticket-view .composer{padding-left:26px;padding-right:26px}
}

/* Compact desktop ticket rhythm matched to Freshdesk. */
@media(min-width:901px){
  .list-view .topbar{height:64px;padding:0 18px}
  .list-view .topbar h1{font-size:16px;font-weight:600;letter-spacing:0}
  .list-view .topbar p{display:none}
  .list-view .filter-row{height:52px}
  .list-view .ticket-list{padding:8px 10px 18px}
  .list-view .ticket{grid-template-columns:26px 50px minmax(340px,1fr) minmax(210px,300px);min-height:92px;margin-bottom:7px;padding:12px 16px}
  .list-view .ticket-avatar{width:42px;height:42px;font-size:12px}
  .list-view .ticket-tags{margin-bottom:5px}
  .list-view .ticket-content h3{font-size:13px;font-weight:600;margin-bottom:6px}
  .list-view .ticket-content h3 small{font-size:11px}
  .list-view .ticket-content p{font-size:11px}
  .list-view .ticket-mailbox,.list-view .wide-meta{font-size:11px}
}

/* Freshdesk ticket workspace: wide, plain conversation and full-width composer. */
@media(min-width:1101px){
  .ticket-view .thread{max-width:none;width:100%;margin:0;padding:0 clamp(24px,3.5vw,58px)}
  .ticket-view .message-body{border:0;border-radius:0;box-shadow:none;background:transparent;padding:10px 0 4px}
  .ticket-view .message.agent .message-body{background:transparent;border:0}
  .ticket-view .quick-reply,
  .ticket-view .expanded-composer,
  .ticket-view .composer-box,
  .ticket-view .reply-routing{max-width:none;width:100%}
  .ticket-view .composer{padding-left:clamp(26px,3.5vw,58px);padding-right:clamp(26px,3.5vw,58px)}
  .ticket-view .composer.expanded textarea{min-height:300px}
}