/* ============ 1. Tokens ============ */
:root{
  --font:"Inter","Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:12px;--lh-xs:16px;--fs-sm:14px;--lh-sm:20px;--fs-lg:16px;--lh-lg:24px;--fs-stat:24px;
  --radius:8px;--radius-lg:12px;--topbar-h:56px;
  --shadow-xs:0 1px 2px 0 rgb(0 0 0/.05);
  --shadow-lg:0 10px 30px -5px rgb(0 0 0/.18),0 4px 10px -4px rgb(0 0 0/.1);
  --background:#ffffff;--foreground:#09090b;--card:#ffffff;--muted:#f4f4f5;--muted-foreground:#71717a;
  --accent:#f4f4f5;--border:#e4e4e7;--input:#e4e4e7;--ring:#a1a1aa;--primary:#18181b;--primary-foreground:#fafafa;
  --secondary:#f4f4f5;--destructive:#dc2626;
  --green-bg:#dcfce7;--green-fg:#15803d;--amber-bg:#fef3c7;--amber-fg:#b45309;--blue-bg:#dbeafe;--blue-fg:#1d4ed8;
  --purple-bg:#f3e8ff;--purple-fg:#7e22ce;--red-bg:#fee2e2;--red-fg:#b91c1c;
  color-scheme:light;
}
:root[data-theme=dark]{
  --background:#09090b;--foreground:#fafafa;--card:#111113;--muted:#27272a;--muted-foreground:#a1a1aa;
  --accent:#27272a;--border:#ffffff1a;--input:#ffffff26;--ring:#71717a;--primary:#fafafa;--primary-foreground:#18181b;
  --secondary:#27272a;--destructive:#ef4444;--shadow-xs:none;
  --green-bg:#14532d80;--green-fg:#86efac;--amber-bg:#78350f80;--amber-fg:#fcd34d;--blue-bg:#1e3a8a80;--blue-fg:#93c5fd;
  --purple-bg:#581c8780;--purple-fg:#d8b4fe;--red-bg:#7f1d1d80;--red-fg:#fca5a5;
  color-scheme:dark;
}

/* ============ 2. Base ============ */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
body{font:400 var(--fs-sm)/var(--lh-sm) var(--font);background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
[hidden]{display:none!important}
h1{font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600}
h2,h3{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:600}
strong,b{font-weight:500}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--muted-foreground)}.text-xs{font-size:var(--fs-xs);line-height:var(--lh-xs)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.left{text-align:left!important}.nowrap{white-space:nowrap}
.stack-y{display:grid;gap:16px}
.grid{display:grid;gap:16px}.two-col{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:1/-1}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ 3. Shell ============ */
.app{min-height:100vh}
.logo{width:32px;height:32px;border-radius:8px;background:var(--primary);color:var(--primary-foreground);display:grid;place-items:center;flex:none}
.topbar{position:sticky;top:0;z-index:20;height:var(--topbar-h);display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--background) 85%,transparent);backdrop-filter:blur(8px)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.env-badge{font-size:var(--fs-xs);font-weight:500;padding:0 8px;line-height:22px;border-radius:6px;background:var(--blue-bg);color:var(--blue-fg)}
.theme-moon{display:none}:root[data-theme=dark] .theme-sun{display:none}:root[data-theme=dark] .theme-moon{display:inline}
.page{max-width:1280px;margin:0 auto;padding:24px;display:grid;gap:16px;align-content:start}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.footer{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--muted-foreground);border-top:1px solid var(--border);padding-top:16px;margin-top:8px}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:4px}

/* ============ 4. Components ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--input);background:var(--background);font-weight:500;box-shadow:var(--shadow-xs);white-space:nowrap}
.btn:hover{background:var(--accent)}
.btn.primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}.btn.primary:hover{background:color-mix(in srgb,var(--primary) 88%,var(--background))}
.btn.secondary{background:var(--secondary);border-color:transparent}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}.btn.ghost:hover{background:var(--accent)}
.btn.destructive{background:var(--destructive);border-color:var(--destructive);color:#fff}
.btn.sm{height:32px;padding:0 12px}.btn.icon-btn{width:36px;padding:0}.btn.icon-btn.sm{width:32px}.btn.block{width:100%}
.btn:disabled{opacity:.5;pointer-events:none}
.btn.is-busy .ic{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:hidden}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px}
.card-header p{color:var(--muted-foreground);font-size:var(--fs-xs);line-height:var(--lh-xs);margin-top:4px}
.card-body{padding:20px}.card-header+.card-body{padding-top:0}
.card-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;background:color-mix(in srgb,var(--muted) 40%,transparent);border-top:1px solid var(--border)}
.card-footer.start{justify-content:flex-start}
.card-footer.pager{justify-content:space-between;align-items:center;flex-wrap:wrap}

.stat{padding:20px;display:grid;gap:8px}.stat-top{display:flex;justify-content:space-between;color:var(--muted-foreground)}
.stat-value{font-size:var(--fs-stat);line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums}
.stat-foot{font-size:var(--fs-xs);color:var(--muted-foreground)}
a.stat:hover{background:color-mix(in srgb,var(--muted) 50%,var(--card))}

.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--border);font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.green{background:var(--green-bg);color:var(--green-fg);border-color:transparent}.badge.amber{background:var(--amber-bg);color:var(--amber-fg);border-color:transparent}
.badge.blue{background:var(--blue-bg);color:var(--blue-fg);border-color:transparent}.badge.purple{background:var(--purple-bg);color:var(--purple-fg);border-color:transparent}
.badge.red{background:var(--red-bg);color:var(--red-fg);border-color:transparent}.badge.secondary{background:var(--secondary);color:var(--muted-foreground);border-color:transparent}

.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;flex:none}
.avatar.sm{width:24px;height:24px}
.t0{background:var(--green-bg);color:var(--green-fg)}.t1{background:var(--blue-bg);color:var(--blue-fg)}.t2{background:var(--purple-bg);color:var(--purple-fg)}
.t3{background:var(--amber-bg);color:var(--amber-fg)}.t4{background:var(--red-bg);color:var(--red-fg)}

.table-wrap{overflow:auto;border-top:1px solid var(--border)}
table{width:100%;border-collapse:collapse;white-space:nowrap}
th{height:40px;padding:0 20px;font-size:var(--fs-xs);font-weight:500;color:var(--muted-foreground);text-align:right;border-bottom:1px solid var(--border)}
td{padding:12px 20px;text-align:right;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}tbody tr:hover{background:color-mix(in srgb,var(--muted) 50%,transparent)}
.cell{display:flex;align-items:center;gap:12px;text-align:left}
.cell .name{display:block;font-weight:500;max-width:420px;overflow:hidden;text-overflow:ellipsis}
.cell small{display:block;font-size:var(--fs-xs);color:var(--muted-foreground);font-weight:400}
.cell a:hover .name{text-decoration:underline}
.unread-dot{width:8px;height:8px;border-radius:50%;background:var(--blue-fg);flex:none}
.unread-dot.off{background:transparent}
tr.is-unread .name{font-weight:600}
.empty-row{text-align:center!important;color:var(--muted-foreground);padding:40px 20px}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 16px;align-items:center}
.input-icon{position:relative;flex:1;max-width:320px;min-width:200px}
.input-icon .ic{position:absolute;left:12px;top:10px;color:var(--muted-foreground)}.input-icon input{padding-left:36px}
.pagination{display:flex;gap:4px;align-items:center}.pager-gap{padding:0 4px;color:var(--muted-foreground)}
.per-page{display:flex;align-items:center;gap:8px}.per-page select{width:auto;min-width:72px}

.field{display:grid;gap:6px;font-weight:500}.field small{font-size:var(--fs-xs);font-weight:400;color:var(--muted-foreground)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.req{color:var(--destructive)}.field-error{color:var(--destructive);font-size:var(--fs-xs);font-weight:400}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;height:36px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--input);background:transparent;box-shadow:var(--shadow-xs)}
textarea{height:auto;min-height:120px;padding:8px 12px;resize:vertical;line-height:var(--lh-sm)}
select{appearance:none;padding-right:32px;background: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='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center}
:root[data-theme=dark] select option{background:#18181b}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 40%,transparent)}
input[readonly],input:disabled{background:var(--muted);color:var(--muted-foreground)}
.toolbar select{width:auto;min-width:140px}

.tabs-list{display:inline-flex;padding:3px;border-radius:var(--radius);background:var(--muted);gap:2px}
.tab{height:30px;padding:0 12px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--muted-foreground);cursor:pointer}
.tab[aria-selected=true],.tabs-list label:has(input:checked){background:var(--background);color:var(--foreground);box-shadow:var(--shadow-xs)}
.tabs-list input{position:absolute;opacity:0;pointer-events:none}

.alert{display:flex;gap:12px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card)}
.alert .ic{margin-top:2px}.alert p{color:var(--muted-foreground)}.alert p a{text-decoration:underline;color:var(--foreground)}
.alert.destructive{border-color:color-mix(in srgb,var(--destructive) 40%,var(--border));color:var(--destructive)}.alert.destructive p{color:inherit}
.alert.warn{border-color:color-mix(in srgb,var(--amber-fg) 40%,var(--border))}

.empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:48px 20px;border:1px dashed var(--border);border-radius:var(--radius-lg)}
.progress{height:8px;border-radius:999px;background:var(--muted);overflow:hidden}.progress>span{display:block;height:100%;background:var(--primary);border-radius:999px}
.meta{display:grid;gap:14px}.meta dt{font-size:var(--fs-xs);color:var(--muted-foreground)}.meta dd{margin:0;word-break:break-word}
.bars{display:grid;gap:14px}.bars div.row{display:grid;gap:6px}.bars .lbl{display:flex;justify-content:space-between}

/* dialog + toast */
dialog{width:512px;max-width:calc(100vw - 32px);padding:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--background);color:var(--foreground);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgb(0 0 0/.5)}dialog[open]{animation:pop .15s ease-out}@keyframes pop{from{opacity:0;transform:scale(.96)}}
.modal-head{padding:20px}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:0 20px 20px}
#toast{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:100}
.toast{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow-lg);max-width:380px;display:flex;gap:10px;align-items:flex-start}
.toast.error{border-color:var(--destructive)}.toast button{text-decoration:underline;font-weight:500}

/* ============ 5. Ticket thread ============ */
.thread{display:grid;gap:0}
.msg{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:20px;border-top:1px solid var(--border)}
.msg:first-child{border-top:0}
.msg.agent{background:color-mix(in srgb,var(--blue-bg) 28%,transparent)}
.msg.note{background:color-mix(in srgb,var(--amber-bg) 45%,transparent)}
.msg-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.msg-head .when{margin-left:auto;font-size:var(--fs-xs);color:var(--muted-foreground)}
.msg-body{overflow-wrap:anywhere;line-height:22px}
.msg-body img{max-width:100%;height:auto}.msg-body blockquote{border-left:3px solid var(--border);margin:8px 0;padding-left:12px;color:var(--muted-foreground)}
.msg-body a{text-decoration:underline}.msg-body p{margin:0 0 8px}.msg-body table{white-space:normal;width:auto}.msg-body td,.msg-body th{padding:4px 8px;text-align:left;border:1px solid var(--border)}
.msg-body pre{white-space:pre-wrap;background:var(--muted);padding:8px;border-radius:var(--radius)}
.msg-to{font-size:var(--fs-xs);color:var(--muted-foreground);margin-bottom:8px}
.atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.atts a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius);padding:4px 10px;font-size:var(--fs-xs)}.atts a:hover{background:var(--accent)}
.reply-box{display:grid;gap:12px}
.reply-row{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between}
.reply-row .field{min-width:180px}
.banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius-lg);background:var(--blue-bg);color:var(--blue-fg);font-weight:500}

/* ============ 6. Responsive ============ */
@media(max-width:1024px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}}
@media(max-width:800px){
  .page{padding:16px}
}
@media(max-width:560px){.fields{grid-template-columns:1fr}.page-head{flex-direction:column}.input-icon{max-width:none;flex-basis:100%}.stats{grid-template-columns:1fr}.msg{grid-template-columns:1fr}.msg .avatar{display:none}}

.check{display:flex;align-items:center;gap:8px;height:36px;font-weight:400}
.tab{white-space:nowrap}
.tabs-list{flex:none}
.card-header{flex-wrap:wrap}
.card-header>div:first-child{flex:1 1 260px;min-width:0}
.sync-status{white-space:nowrap}
.msg-new{animation:msgflash 3s ease-out}@keyframes msgflash{from{box-shadow:inset 3px 0 0 var(--blue-fg);background:color-mix(in srgb,var(--blue-bg) 70%,transparent)}to{box-shadow:inset 3px 0 0 transparent}}
.link-btn{margin-top:8px;font-size:var(--fs-xs);color:var(--muted-foreground);text-decoration:underline;text-underline-offset:2px}
.link-btn:hover{color:var(--foreground)}
.msg-quote{margin-top:8px;padding-left:12px;border-left:3px solid var(--border);color:var(--muted-foreground);font-size:var(--fs-xs);line-height:18px}

/* Side panels: size to their content, no stretched empty space */
.two-col{align-items:start}
.stack-y{align-content:start}
.page>.two-col>aside.stack-y{position:sticky;top:calc(var(--topbar-h) + 16px)}
@media(max-width:1024px){.page>.two-col>aside.stack-y{position:static}}

/* Compact ticket side card */
.side-form{display:grid;gap:12px;padding:16px 16px 14px}
.side-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.side-meta{margin:0;padding:14px 16px 16px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.side-meta dt{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--muted-foreground)}
.side-meta dd{margin:0;word-break:break-word}.side-meta .wide{grid-column:1/-1}
@media(max-width:560px){.side-fields,.side-meta{grid-template-columns:1fr}}

/* Tables that wrap their text instead of scrolling sideways */
.table-wrap-text{overflow-x:hidden}
.table-wrap-text table{white-space:normal}
.table-wrap-text th,.table-wrap-text td{padding-left:12px;padding-right:12px}
.table-wrap-text th:first-child,.table-wrap-text td:first-child{padding-left:20px;min-width:0;width:100%}
.table-wrap-text th:last-child,.table-wrap-text td:last-child{padding-right:20px}
.table-wrap-text td:not(:first-child){white-space:nowrap}
.table-wrap-text .cell{min-width:0}
.table-wrap-text .cell>a{min-width:0}
.table-wrap-text .cell .name{max-width:none;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
.table-wrap-text .cell small{overflow-wrap:anywhere}
@media(max-width:560px){.table-wrap-text .cell .avatar{display:none}}
.table-wrap-text th:first-child,.table-wrap-text td:first-child{min-width:150px}
@media(max-width:560px){
  .table-wrap-text th:nth-child(3),.table-wrap-text td:nth-child(3){display:none}
  .table-wrap-text th,.table-wrap-text td{padding-left:8px;padding-right:8px}
  .table-wrap-text th:first-child,.table-wrap-text td:first-child{padding-left:16px}
  .table-wrap-text th:last-child,.table-wrap-text td:last-child{padding-right:16px}
  .table-wrap-text .unread-dot{display:none}
}

/* Search box: keep text clear of the icon (must out-rank the general input padding) */
.input-icon input:not([type=checkbox]):not([type=radio]){padding-left:36px}
.input-icon input[type=search]{-webkit-appearance:none;appearance:none}
.input-icon input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.input-icon .ic{pointer-events:none}

/* ============ Tags ============ */
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{display:inline-block;padding:0 7px;line-height:18px;border-radius:999px;background:var(--muted);color:var(--muted-foreground);font-size:var(--fs-xs);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.tag.more{background:transparent;border:1px solid var(--border)}
.cell .tags{margin-top:4px}

/* ============ Kanban board ============ */
.page:has(.board){max-width:none}
.board-search{display:flex;gap:8px;align-items:center}
.board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:12px}
.board-col{flex:1 0 250px;max-width:340px;min-width:250px;background:color-mix(in srgb,var(--muted) 55%,transparent);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column}
.board-col-head{display:flex;align-items:center;gap:8px;padding:12px 14px 8px}
.board-col-head h2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-count{font-size:var(--fs-xs);color:var(--muted-foreground);background:var(--background);border:1px solid var(--border);border-radius:999px;padding:0 8px;line-height:20px;font-variant-numeric:tabular-nums}
.col-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted-foreground)}
.col-dot.blue{background:var(--blue-fg)}.col-dot.amber{background:var(--amber-fg)}.col-dot.green{background:var(--green-fg)}.col-dot.purple{background:var(--purple-fg)}.col-dot.red{background:var(--red-fg)}
.board-body{display:grid;gap:8px;align-content:start;padding:4px 8px 10px;min-height:80px;max-height:calc(100vh - 250px);overflow-y:auto;border-radius:0 0 var(--radius-lg) var(--radius-lg);transition:background .15s}
.board-col.drag-over .board-body{background:color-mix(in srgb,var(--ring) 22%,transparent)}
.col-empty{text-align:center;padding:16px 0}
.kcard{display:grid;gap:8px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-xs);cursor:grab}
.kcard:hover{border-color:var(--ring)}
.kcard.dragging{opacity:.4}
.kcard-title{font-weight:500;overflow-wrap:anywhere;display:flex;gap:6px;align-items:flex-start}
.kcard.is-unread .kcard-title{font-weight:600}
.kcard-title .unread-dot{margin-top:6px}
.kcard-title:hover{text-decoration:underline}
.kcard-who{font-size:var(--fs-xs);color:var(--muted-foreground);overflow-wrap:anywhere}
.kcard-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kcard-time{margin-left:auto;font-size:var(--fs-xs)}
.kcard-move{display:none}
.kcard:focus-within .kcard-move{display:block}
.kcard-move select{height:30px;font-size:var(--fs-xs)}
@media(hover:none){.kcard-move{display:block}}
.board-body .btn.block{margin-top:2px}

/* column editor */
.col-handle{width:44px;padding-right:0!important}
.drag-handle{display:inline-grid;place-items:center;width:28px;height:28px;color:var(--muted-foreground);cursor:grab}
.row-actions{display:flex;gap:4px;justify-content:flex-end}.row-actions form{display:inline}
tr.row-dragging{opacity:.4}
tr.row-over td{box-shadow:inset 0 2px 0 var(--ring)}
.fieldset{border:0;padding:0;margin:0;min-width:0}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.check-card{display:flex;align-items:center;gap:8px;border:1px solid var(--input);border-radius:var(--radius);padding:8px 10px;font-weight:400}
.check-card:has(input:checked){background:var(--accent);border-color:var(--ring)}
.modal-body{padding:0 20px 20px}
@media(max-width:560px){.check-grid{grid-template-columns:1fr}.board-col{flex-basis:85vw}}
/* centre native dialogs (the global margin reset removed the default) */
dialog{margin:auto}

/* Board popup */
dialog.wide{width:760px}
.tm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px}
.tm-head h2{font-size:var(--fs-lg);line-height:var(--lh-lg);overflow-wrap:anywhere}
.tm-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 20px 12px}
.tm-scroll{max-height:min(58vh,560px);overflow:auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.tm-foot{padding-top:16px}
.tm-loading{padding:40px 20px;text-align:center}
.kcard-title{cursor:pointer}

/* Board popup: header actions + sticky reply box */
dialog.wide[open]{display:flex;flex-direction:column;height:min(90vh,820px);overflow:hidden}
dialog.wide .tm-content{display:flex;flex-direction:column;flex:1;min-height:0}
dialog.wide .tm-content>div{display:flex;flex-direction:column;flex:1;min-height:0}
dialog.wide .tm-scroll{flex:1;min-height:0;max-height:none}
.tm-head-actions{display:flex;gap:4px;align-items:center;flex:none}
.tm-reply{display:grid;gap:8px;padding:12px 16px 14px;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -8px 14px -10px rgb(0 0 0/.2);flex:none}
.tm-reply-top,.tm-reply-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tm-reply textarea{min-height:76px;max-height:170px}
.tm-opts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tm-opts select{width:auto;min-width:130px;height:32px}
.check.sm{height:32px;font-size:var(--fs-xs)}
.tm-note{margin:0}
.tm-to{overflow-wrap:anywhere}
@media(max-width:560px){dialog.wide[open]{height:94vh}.tm-head-actions .btn:not(.icon-btn){display:none}}

/* Wide board columns (set per column in Edit columns) */
.board-col.w2{flex:2 0 520px;max-width:720px}
.board-col.w2 .board-body{grid-template-columns:1fr 1fr;align-items:start}
.board-col.w2 .board-body>.col-empty,.board-col.w2 .board-body>.btn{grid-column:1/-1}
.board-search select{width:auto;min-width:150px}
@media(max-width:560px){.board-col.w2{flex-basis:85vw}.board-col.w2 .board-body{grid-template-columns:1fr}}

/* Phone call summary */
.call-card{display:flex;gap:14px;padding:16px 20px;align-items:flex-start;border-left:3px solid var(--purple-fg)}
.call-icon{width:36px;height:36px;border-radius:50%;background:var(--purple-bg);color:var(--purple-fg);display:grid;place-items:center;flex:none}
.call-body{display:grid;gap:6px;min-width:0}
.call-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.call-notes{background:var(--muted);border-radius:var(--radius);padding:8px 12px;overflow-wrap:anywhere}
.tm-call{margin:0 20px 12px}

/* Split column: two lanes side by side — "Need response" | "Replied" */
.board-col.w2 .board-body.lanes{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 8px 10px;overflow:visible;max-height:none}
.lane{min-width:0;display:flex;flex-direction:column;border-radius:10px;background:color-mix(in srgb,var(--background) 55%,transparent);border:1px solid var(--border)}
.lane.needs{background:color-mix(in srgb,var(--red-bg) 38%,var(--background));border-color:color-mix(in srgb,var(--red-fg) 30%,var(--border))}
.lane-head{display:flex;align-items:center;gap:8px;padding:10px 12px 8px}
.lane-head h3{flex:1;min-width:0}
.lane-cards{display:grid;gap:8px;align-content:start;padding:0 8px 10px;max-height:calc(100vh - 290px);min-height:70px;overflow-y:auto}
.board-col.w2 .lane-cards>.col-empty,.board-col.w2 .lane-cards>.btn{grid-column:auto}
.board-col.drag-over .lane{box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 45%,transparent)}
@media(max-width:560px){.board-col.w2 .board-body.lanes{grid-template-columns:1fr}.board-col.split{flex-basis:90vw}}

/* ============ Top menu (replaces the old left sidebar) ============ */
.brand{display:flex;align-items:center;gap:10px;flex:none;margin-right:8px}
.brand-text{white-space:nowrap;font-weight:600}
.topnav{display:flex;align-items:center;gap:2px;min-width:0}
.topnav a{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:8px;color:var(--muted-foreground);font-weight:500;white-space:nowrap}
.topnav a:hover{background:var(--accent);color:var(--foreground)}
.topnav a[aria-current=page]{background:var(--accent);color:var(--foreground)}
.topnav a[aria-current=page] .ic{color:var(--foreground)}
.nav-count{font-size:var(--fs-xs);background:var(--primary);color:var(--primary-foreground);border-radius:999px;padding:0 7px;line-height:18px;font-weight:500}
@media(max-width:800px){
  .topbar{height:auto;flex-wrap:wrap;padding:8px 12px;row-gap:6px}
  .topnav{order:3;width:100%;overflow-x:auto}
  .hide-sm{display:none}
  .brand{margin-right:0}
}
@media(max-width:560px){
  .topnav{justify-content:space-between;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{padding:0 8px;flex:1;justify-content:center}
  .topnav a .ic{display:none}
}

/* ============ Internal notes (light yellow, like a sticky note) ============ */
:root{--note-bg:#fefce8;--note-card:#fef9c3;--note-border:#fde68a;--note-fg:#713f12}
:root[data-theme=dark]{--note-bg:#25220f;--note-card:#332e12;--note-border:#5c4f1c;--note-fg:#fde68a}
.notes-panel{background:var(--note-bg);display:flex;flex-direction:column;min-height:0;min-width:0}
.notes-head{padding:14px 16px 8px}
.notes-head h3{display:flex;align-items:center;gap:6px;color:var(--note-fg)}
.notes-head p{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--muted-foreground);margin-top:2px}
.note-form{display:grid;gap:8px;padding:4px 16px 12px;border-bottom:1px solid var(--note-border)}
.note-form textarea{min-height:64px;background:color-mix(in srgb,var(--note-card) 55%,var(--background));border-color:var(--note-border)}
.note-form .btn{justify-self:end;background:var(--note-fg);color:var(--note-bg);border-color:var(--note-fg)}
.note-list{display:grid;gap:10px;align-content:start;padding:12px 16px 16px;overflow-y:auto;flex:1;min-height:0}
.note{background:var(--note-card);border:1px solid var(--note-border);border-radius:6px;padding:9px 11px;box-shadow:0 1px 2px rgb(0 0 0/.06)}
.note-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--note-fg);opacity:.85;margin-bottom:4px}
.note-body{overflow-wrap:anywhere;color:var(--foreground)}
.note-del{opacity:.5;display:grid;place-items:center;width:20px;height:20px;border-radius:4px;flex:none}
.note-del:hover{opacity:1;background:color-mix(in srgb,var(--note-border) 60%,transparent)}
.note-empty{font-size:var(--fs-xs);color:var(--muted-foreground);text-align:center;padding:8px 0}
.note.is-new{animation:notepop 1.6s ease-out}@keyframes notepop{from{box-shadow:0 0 0 3px color-mix(in srgb,var(--note-border) 80%,transparent)}}
.badge.note{background:var(--note-card);color:var(--note-fg);border-color:var(--note-border)}
/* in the full ticket page's right-hand column */
.notes-card{border:1px solid var(--note-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs)}
.notes-card .note-list{max-height:340px}
/* in the board popup: a side panel to the right of the conversation */
dialog.wide{width:1060px}
.tm-cols{display:flex;flex:1;min-height:0}
.tm-left{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.notes-panel.tm-notes{width:300px;flex:none;border-left:1px solid var(--note-border)}
@media(max-width:800px){
  .tm-cols{flex-direction:column;overflow-y:auto}
  .tm-left{flex:none}
  .notes-panel.tm-notes{width:auto;border-left:0;border-top:1px solid var(--note-border);flex:none}
  .tm-notes .note-list{max-height:200px}
}

/* Missed calls */
.tabs-wrap{display:flex;flex-wrap:wrap;gap:8px}
.tab-count{font-size:var(--fs-xs);background:var(--primary);color:var(--primary-foreground);border-radius:999px;padding:0 7px;line-height:18px;font-weight:500}
.tel{text-decoration:underline;text-underline-offset:2px}.tel:hover{color:var(--foreground)}
.call-note-cell{overflow-wrap:anywhere}
.cell .badge{margin-top:4px;white-space:normal;height:auto;line-height:18px}
.table-wrap-text td:not(:first-child).left{white-space:normal}
.table-wrap-text td.nowrap{white-space:nowrap}
.table-wrap-text td .ic{vertical-align:-2px}
.missed-table table{white-space:normal}
.missed-table td,.missed-table th{padding-left:14px;padding-right:14px}
.missed-table th:first-child,.missed-table td:first-child{padding-left:20px;min-width:240px}
.missed-table th:last-child,.missed-table td:last-child{padding-right:20px;white-space:nowrap}
.missed-table th:nth-child(4),.missed-table td:nth-child(4){width:34%;min-width:220px}
.missed-table td:nth-child(2),.missed-table td:nth-child(3),.missed-table td:nth-child(5){white-space:nowrap}
.missed-table .cell .name{max-width:none}
.missed-table .cell .badge{white-space:nowrap}

/* My notes: customers on the left, their notes on the right */
.notes-split{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:calc(100vh - 230px)}
.cust-col{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border)}
.cust-search{display:flex;gap:8px;align-items:center;padding:14px 14px 8px}.cust-search .input-icon{max-width:none;min-width:0}
.cust-count{padding:0 16px 8px}
.cust-list{display:flex;flex-direction:column;overflow-y:auto;max-height:calc(100vh - 290px);border-top:1px solid var(--border)}
.cust-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--border)}
.cust-item:hover{background:var(--accent)}
.cust-item[aria-current=true]{background:var(--note-card);box-shadow:inset 3px 0 0 var(--note-fg)}
.cust-text{display:grid;min-width:0}
.cust-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cust-snip{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cust-meta{display:grid;justify-items:end;gap:2px}
.cust-empty{padding:20px 16px}
.notes-detail{background:var(--note-bg);min-width:0;display:flex;flex-direction:column}
.detail-head{padding:18px 22px 12px;border-bottom:1px solid var(--note-border)}
.detail-head h2{font-size:var(--fs-lg);line-height:var(--lh-lg);color:var(--note-fg)}
.detail-notes{display:grid;gap:12px;align-content:start;padding:16px 22px 24px;overflow-y:auto;max-height:calc(100vh - 300px)}
.detail-notes .note{padding:12px 14px}
.note-ticket{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:var(--fs-xs);color:var(--muted-foreground)}
.note-ticket:hover{color:var(--foreground);text-decoration:underline}
.detail-empty{display:grid;place-items:center;align-content:center;gap:8px;flex:1;padding:60px 20px;text-align:center}
@media(max-width:800px){
  .notes-split{grid-template-columns:1fr}
  .cust-col{border-right:0;border-bottom:1px solid var(--border)}
  .cust-list{max-height:260px}
  .detail-notes{max-height:none}
}
@media(max-width:560px){.topnav a{padding:0 4px;font-size:13px}}

/* Ticket page: the reply box stays at the bottom of the window while you read a long conversation */
.ticket-main{display:flex;flex-direction:column;gap:16px}        /* flex (not grid) so the reply can stick across the whole column */
.ticket-main>*{flex:none}
#reply{position:sticky;bottom:12px;z-index:15;box-shadow:0 -10px 26px -14px rgb(0 0 0/.35),var(--shadow-xs);border-color:var(--ring)}
#reply .card-header{padding:12px 16px 8px;align-items:center}
#reply .card-header p{margin-top:2px}
#reply .card-body{padding:0 16px 14px}
#reply .reply-box{gap:8px}
#reply textarea{height:84px;min-height:84px;max-height:32vh}
#reply .reply-row{gap:8px}
#reply .reply-row .field{min-width:0;gap:3px;font-size:var(--fs-xs)}
#reply .reply-row .field input:not([type=checkbox]),#reply .reply-row .field select{height:32px}
#reply .reply-row .check{height:32px;font-weight:400}
@media(max-height:620px),(max-width:560px){#reply{position:static}}   /* small screens: don't let it take over the view */

/* note: Freshdesk status chip */
.note-tools{display:inline-flex;align-items:center;gap:6px}
.note-fd{display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:16px;padding:0 6px;border-radius:999px;white-space:nowrap}
.note-fd .ic{width:11px;height:11px}
.note-fd.ok{color:var(--green-fg);background:var(--green-bg)}
.note-fd.warn{color:var(--amber-fg);background:var(--amber-bg);cursor:pointer;border:1px solid color-mix(in srgb,var(--amber-fg) 35%,transparent)}
.note-fd.warn:hover{filter:brightness(.96)}
.note-fd.is-busy{opacity:.6;pointer-events:none}

/* Badges in a row: even spacing and the same baseline, wrapping neatly when narrow */
.badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px}
.badge{vertical-align:middle}
.badge .ic{width:13px;height:13px}

/* Toggle chip used for on/off filters */
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--input);border-radius:var(--radius);font-weight:500;cursor:pointer;white-space:nowrap;background:var(--background);box-shadow:var(--shadow-xs)}
.chip:hover{background:var(--accent)}
.chip:has(input:checked){background:var(--red-bg);color:var(--red-fg);border-color:color-mix(in srgb,var(--red-fg) 35%,transparent)}
.chip input{accent-color:var(--red-fg)}

/* Brand-new tickets (not yet opened): a light blue tint. Replies on older tickets are not tinted. */
:root{--new-tint:color-mix(in srgb,var(--blue-bg) 55%,var(--card))}
tbody tr.is-new{background:var(--new-tint);box-shadow:inset 3px 0 0 var(--blue-fg)}
tbody tr.is-new:hover{background:color-mix(in srgb,var(--blue-bg) 80%,var(--card))}
.kcard.is-new{background:var(--new-tint);border-color:color-mix(in srgb,var(--blue-fg) 28%,var(--border));box-shadow:inset 3px 0 0 var(--blue-fg),var(--shadow-xs)}

/* Editable tags */
.tag-editor{display:grid;gap:8px}
.tag-items{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag.removable{display:inline-flex;align-items:center;gap:2px;padding:0 3px 0 8px;max-width:100%}
.tag-x{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--muted-foreground);flex:none}
.tag-x:hover{background:color-mix(in srgb,var(--destructive) 18%,transparent);color:var(--destructive)}
.tag-x .ic{width:11px;height:11px}
.tag-add{display:flex;gap:6px}
.tag-add input{height:32px;min-width:0}
.tag-editor.is-busy{opacity:.65;pointer-events:none}
.side-tags{padding:12px 16px 4px;border-top:1px solid var(--border)}
.side-label{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--muted-foreground);margin-bottom:6px}
.tm-tags{padding:0 20px 10px}
.tm-tags .tag-add{max-width:340px}

/* Scroll to top / bottom: in the top bar (ticket page) and popup header, so they never sit on top of the conversation */
.scroll-btns{display:inline-flex;gap:2px}
.tm-head-actions{gap:2px}
.tm-head-actions .btn.sm:not(.icon-btn){margin-left:6px}

/* Ticket page side column: fits the window, and the Internal notes list scrolls inside it */
.page>.two-col>aside.ticket-aside{display:flex;flex-direction:column;gap:16px;align-self:start;
  position:sticky;top:calc(var(--topbar-h) + 16px);max-height:calc(100vh - var(--topbar-h) - 32px);overflow-y:auto;overscroll-behavior:contain}
.ticket-aside>.side-card{flex:none}
.ticket-aside>.notes-card{flex:1 1 240px;min-height:230px;display:flex;flex-direction:column}
.ticket-aside .notes-card .note-list{flex:1 1 auto;min-height:90px;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.ticket-aside .notes-card .notes-head,.ticket-aside .notes-card .note-form{flex:none}
@media(max-width:1024px){
  .page>.two-col>aside.ticket-aside{position:static;max-height:none;overflow:visible}
  .ticket-aside>.notes-card{min-height:0}
  .ticket-aside .notes-card .note-list{max-height:340px}
}
/* guaranteed room for the notes: never squeezed to a sliver; the column scrolls if the window is very short */
.ticket-aside>.notes-card{flex:1 0 300px;min-height:300px}
.ticket-aside .notes-card .note-list{min-height:150px}
/* use all the spare window height for the notes (the column is exactly one window tall; the notes card stretches to fill it) */
.page>.two-col>aside.ticket-aside{height:calc(100vh - var(--topbar-h) - 32px)}
@media(max-width:1024px){.page>.two-col>aside.ticket-aside{height:auto}}

/* ============ Ticket page: three columns — conversation | ticket details | internal notes ============ */
.page:has(.ticket-grid){max-width:1440px}
.ticket-grid{grid-template-columns:minmax(0,1fr) 290px 320px;grid-template-areas:"main side notes";align-items:start}
.ticket-grid>.ticket-main{grid-area:main;min-width:0}
.ticket-grid>.ticket-side{grid-area:side;min-width:0;position:sticky;top:calc(var(--topbar-h) + 16px);
  max-height:calc(100vh - var(--topbar-h) - 32px);overflow-y:auto;overscroll-behavior:contain}
.ticket-grid>.ticket-notes{grid-area:notes;min-width:0;position:sticky;top:calc(var(--topbar-h) + 16px);
  height:calc(100vh - var(--topbar-h) - 32px);display:flex;flex-direction:column}
.ticket-notes .notes-card{flex:1;min-height:0;display:flex;flex-direction:column}
.ticket-notes .notes-card .note-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.ticket-notes .notes-card .notes-head,.ticket-notes .notes-card .note-form{flex:none}
/* medium windows: details and notes stack in one column beside the conversation */
@media(max-width:1199px){
  .ticket-grid{grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"main side" "main notes"}
  .ticket-grid>.ticket-side,.ticket-grid>.ticket-notes{position:static;max-height:none;height:auto;overflow:visible}
  .ticket-notes .notes-card .note-list{max-height:360px}
}
/* narrow windows and phones: one column */
@media(max-width:1024px){
  .ticket-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "side" "notes"}
}

/* ============ Notes page: click a note → arrow → ticket conversation in a side panel ============ */
.detail-notes .note{position:relative;cursor:pointer;padding-right:56px;transition:box-shadow .12s}
.detail-notes .note:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--note-border) 90%,transparent)}
.detail-notes .note:focus-visible{outline:2px solid var(--note-fg);outline-offset:2px}
.detail-notes .note.is-selected,.detail-notes .note.is-conv{box-shadow:0 0 0 2px var(--note-fg)}
.note-open{display:none;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  background:var(--note-fg);color:var(--note-bg);place-items:center;box-shadow:var(--shadow-xs)}
.note-open:hover{filter:brightness(1.12)}
.note.is-selected .note-open,.note.is-conv .note-open{display:grid}
.note.is-conv .note-open{opacity:.55}
.note-open .ic{width:18px;height:18px}

.conv-panel{display:flex;flex-direction:column;min-width:0;background:var(--card);border-left:1px solid var(--border);
  position:sticky;top:calc(var(--topbar-h) + 16px);height:calc(100vh - var(--topbar-h) - 32px)}
.conv-panel[hidden]{display:none}
.conv-panel .tm-content,.conv-panel .tm-content>div,.conv-panel .tm-cols{display:flex;flex-direction:column;flex:1;min-height:0}
.conv-panel .tm-left{flex:1;min-height:0}
.conv-panel .tm-scroll{flex:1;min-height:0;max-height:none}
.conv-panel .tm-head{padding:14px 16px 10px}
.conv-panel .tm-tools,.conv-panel .tm-tags{padding-left:16px;padding-right:16px}
.conv-panel .tm-call{margin-left:16px;margin-right:16px}
.notes-split.has-conv{grid-template-columns:290px minmax(0,1fr) minmax(430px,540px)}
/* not enough room for three columns: the conversation slides in from the right instead */
@media(max-width:1239px){
  .notes-split.has-conv{grid-template-columns:290px minmax(0,1fr)}
  .conv-panel{position:fixed;top:var(--topbar-h);right:0;bottom:0;height:auto;width:min(580px,100vw);z-index:40;
    box-shadow:-18px 0 40px -16px rgb(0 0 0/.35);border-left:1px solid var(--border)}
}
@media(max-width:800px){.notes-split.has-conv{grid-template-columns:1fr}.conv-panel{width:100vw}}
/* the panel starts below the page title, so size it to fit the window from there (reply box never off-screen) */
.conv-panel{height:calc(100vh - 156px);min-height:420px}
@media(max-width:1239px){.conv-panel{min-height:0}}

/* Sign-in / first-run pages and the environment badge */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--muted);padding:24px}
.login-card{width:min(400px,100%);display:grid;gap:16px}
.login-brand{display:flex;align-items:center;gap:10px;justify-content:center}
.env-badge.live{background:var(--red-bg);color:var(--red-fg)}
.env-badge.staging{background:var(--amber-bg);color:var(--amber-fg)}

/* ============ Deploy screen (local only) ============ */
.dp-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted-foreground);font-size:var(--fs-xs)}
.dp-step{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--card)}
.dp-step b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--primary);color:var(--primary-foreground);font-size:11px}
.dp-checklist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.dp-checklist li{display:flex;gap:10px;align-items:flex-start;overflow-wrap:anywhere}
.dp-mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:600;flex:none}
.dp-checklist .ok .dp-mark{background:var(--green-bg);color:var(--green-fg)}
.dp-checklist .bad .dp-mark{background:var(--red-bg);color:var(--red-fg)}
.dp-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dp-result{padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--muted);overflow-wrap:anywhere}
.dp-result.good{background:color-mix(in srgb,var(--green-bg) 60%,var(--card));border-color:color-mix(in srgb,var(--green-fg) 30%,var(--border))}
.dp-result.warn{background:color-mix(in srgb,var(--amber-bg) 60%,var(--card));border-color:color-mix(in srgb,var(--amber-fg) 30%,var(--border))}
.dp-result p{margin:0 0 8px}
.dp-details{border:1px solid var(--border);border-radius:var(--radius);padding:0}
.dp-details>summary{cursor:pointer;padding:10px 14px;font-weight:500}
.dp-details-body{padding:0 14px 14px;display:grid;gap:12px}
.dp-counts{margin-top:4px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--muted);padding:1px 5px;border-radius:4px}

/* Notes: Done tick, view switch, Date Order list */
.note-done{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);cursor:pointer;color:var(--note-fg);user-select:none}
.note-done input{width:15px;height:15px;margin:0;cursor:pointer;accent-color:var(--note-fg)}
.note.is-done .note-body,.note.is-done .note-ticket{opacity:.55}
.note.is-done .note-body{text-decoration:line-through}
.note.is-done{background:color-mix(in srgb,var(--note-card) 55%,var(--background))}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-md,6px);overflow:hidden;background:var(--card)}
.seg-item{padding:7px 14px;font-size:var(--fs-sm);font-weight:500;color:var(--muted-foreground);white-space:nowrap}
.seg-item+.seg-item{border-left:1px solid var(--border)}
.seg-item:hover{background:var(--accent);color:var(--foreground)}
.seg-item[aria-current=true]{background:var(--foreground);color:var(--background)}
.notes-split.is-dateview{grid-template-columns:minmax(0,1fr)}
.notes-split.is-dateview.has-conv{grid-template-columns:minmax(0,1fr) minmax(430px,540px)}
.date-head{display:grid;gap:6px}
.date-head .cust-search{padding:0}
.hide-done{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);white-space:nowrap;cursor:pointer}
.note-cust{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.note-cust-name{font-weight:600;font-size:var(--fs-md,15px);color:var(--foreground)}
@media(max-width:1239px){.notes-split.is-dateview.has-conv{grid-template-columns:minmax(0,1fr)}}

/* Notes page: two clearly separate, full-width sections */
.page:has(.notes-layout){max-width:none}
.notes-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
.notes-section{display:grid;gap:10px;min-width:0}
.section-title{font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600;padding-left:10px;border-left:4px solid var(--note-fg)}
.inotes{background:var(--note-bg);border-color:var(--note-border);display:flex;flex-direction:column;min-height:calc(100vh - 230px)}
.inotes-top{padding:14px 16px 0;display:grid;gap:10px}
.inotes .note-form{padding:0 0 12px;border-bottom:0}
.tabs-sm{display:flex;gap:4px;border-bottom:1px solid var(--note-border)}
.tab-sm{padding:6px 12px;font-size:var(--fs-sm);font-weight:500;color:var(--muted-foreground);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:6px;align-items:center}
.tab-sm[aria-selected=true]{color:var(--note-fg);border-bottom-color:var(--note-fg)}
.tab-sm .badge{font-size:11px;padding:0 6px}
.inote-list[hidden]{display:none}
@media(max-width:1100px){.notes-layout{grid-template-columns:1fr}.inotes{min-height:0}}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}