:root {
  --bg: #fafafa; --fg: #1c1e22; --muted: #70757e; --line: #e2e4e8;
  --accent: #3b64d8; --accent-fg: #ffffff; --card: #ffffff;
  --in: #f7f9fc; --out: #f6faf7; --note: #fbf9f2;
  --ok: #2e8b57; --warn: #b45309; --danger: #c0392b;
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d; --fg: #d6d9de; --muted: #8a8f98; --line: #2a2d34;
    --accent: #6f92e8; --accent-fg: #10131a; --card: #1c1f25;
    --in: #1b2027; --out: #1a211c; --note: #211f18;
    --ok: #58b283; --warn: #d9993f; --danger: #d4685a;
  }
}
* { box-sizing: border-box; }
html { font-size: 14px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 1rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.14em; flex: none; }

nav {
  display: flex; gap: .65rem; align-items: center;
  padding: calc(.45rem + env(safe-area-inset-top)) .9rem .45rem;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5;
}
nav .brand { font-weight: 650; text-decoration: none; color: var(--fg); white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
nav .search { flex: 1; max-width: 480px; }
nav .search input { width: 100%; }
.nav-gear { color: var(--muted); display: inline-flex; padding: .3rem; }
.nav-gear:hover { color: var(--fg); }
main { max-width: 860px; margin: 0 auto; padding: .9rem; }
main.wide { max-width: 1160px; }

input, textarea, select, button {
  font: inherit; color: var(--fg); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .6rem;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
button {
  cursor: pointer; background: var(--accent); color: var(--accent-fg); border: 0;
  padding: .38rem .85rem; font-weight: 550;
  display: inline-flex; align-items: center; gap: .35rem;
}
button:hover { filter: brightness(1.08); }
button.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); font-weight: 450; }
button.ghost:hover { border-color: var(--muted); filter: none; }
textarea { width: 100%; resize: vertical; }
.muted-text { color: var(--muted); }

.login { max-width: 340px; margin: 18vh auto; text-align: center; display: grid; gap: .9rem; }
.login h1 { font-size: 1.25rem; display: flex; align-items: center; justify-content: center; gap: .45rem; }
.login form { display: grid; gap: .6rem; }
.notice { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; }
.auth-error { text-align: center; }
.auth-error-icon { font-size: 1.6rem; color: var(--muted); }
.auth-error p { margin: .25rem 0; }

.filters { display: flex; gap: .4rem; margin-bottom: .8rem; flex-wrap: wrap; }
.filters a {
  padding: .22rem .75rem; border-radius: 999px; text-decoration: none; font-size: .93em;
  color: var(--muted); border: 1px solid var(--line);
}
.filters a.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.saved-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.saved-chip a { padding: .22rem .3rem .22rem .75rem; text-decoration: none; color: var(--muted); font-size: .93em; }
.saved-chip a:hover { color: var(--fg); }
.chip-x { background: none; border: 0; color: var(--muted); padding: 0 .5rem 0 .1rem; min-height: 0; font-size: 1em; }
.chip-x:hover { color: var(--danger); filter: none; }

.filter-panel { margin-bottom: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.filter-panel summary { cursor: pointer; padding: .4rem .75rem; color: var(--muted); font-size: .92em; display: flex; align-items: center; gap: .35rem; }
.filter-form { display: grid; gap: .45rem; padding: .3rem .75rem .6rem; }
.crit-row { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.crit-label { min-width: 130px; font-size: .9em; color: var(--fg); }
.crit-row select, .crit-row input[type=text] { min-width: 140px; }
.crit-row input.num { width: 90px; }
.crit-add { display: flex; gap: .5rem; align-items: center; margin-top: .25rem; }
.save-form { display: flex; gap: .5rem; padding: 0 .75rem .6rem; border-top: 1px dashed var(--line); padding-top: .6rem; }
.save-form input[type=text] { flex: 1; max-width: 280px; }

.pager { display: flex; align-items: center; gap: .6rem; padding: .7rem .2rem; font-size: .9em; }
.pagebtn { color: var(--fg); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem .65rem; font-variant-numeric: tabular-nums; }
.pagebtn:hover { border-color: var(--accent); color: var(--accent); }
.pagebtn.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.pagebtn.disabled { color: var(--muted); opacity: .5; pointer-events: none; }
.pager-show { display: inline-flex; gap: .35rem; align-items: center; }

.ticket-table {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  overflow: hidden;
}
.tt-head, .tt-row {
  display: grid; align-items: center; gap: .8rem; min-width: 0;
  grid-template-columns: 3.2em minmax(0, 1fr) 15em 7em 3em 6.5em 5.5em;
  padding: .42rem .9rem;
}
.tt-head {
  color: var(--muted); font-size: .82em; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--line) 25%, var(--card));
}
.tt-row { text-decoration: none; color: var(--fg); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.tt-row:last-child { border-bottom: 0; }
.tt-row:hover { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.tid { color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.tt-snippet { color: var(--muted); font-weight: 400; font-size: .9em; }
.tt-contact, .tt-queue { color: var(--muted); font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-num { color: var(--muted); font-size: .85em; text-align: center; font-variant-numeric: tabular-nums; }
.tt-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .9em; }
.tt-time { color: var(--muted); font-size: .85em; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.st-new { background: var(--danger); }
.st-open { background: var(--accent); }
.st-waiting { background: var(--warn); }
.st-resolved, .st-closed { background: var(--ok); }
.prio-urgent { box-shadow: inset 3px 0 0 var(--danger); }
.prio-high { box-shadow: inset 3px 0 0 var(--warn); }
@media (max-width: 800px) {
  .tt-head { display: none; }
  .tt-head, .tt-row { grid-template-columns: 3.2em minmax(0,1fr) 6.5em 5.5em; }
  .tt-contact, .tt-queue, .tt-num { display: none; }
}

.badge {
  display: inline-block; font-size: .72em; padding: .06em .55em; border-radius: 4px;
  border: 1px solid var(--line); color: var(--muted); letter-spacing: .02em;
}
.s-new { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.s-open { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.s-waiting { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

.backlink { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); text-decoration: none; font-size: .9em; margin-bottom: .5rem; }
.backlink:hover { color: var(--accent); }
.ticket header h1 { font-size: 1.12rem; margin: 0 0 .4rem; }
.ticket-meta { display: flex; gap: .6rem; align-items: center; color: var(--muted); flex-wrap: wrap; font-size: .92em; }
.inline { display: inline; }
.inline select { padding: .2rem .45rem; font-size: .92em; }

.thread { display: grid; gap: .55rem; margin: 1rem 0; }
.msg { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.msg-head {
  display: flex; gap: .55rem; align-items: baseline; padding: .35rem .75rem;
  font-size: .84em; border-bottom: 1px solid var(--line);
}
.msg-head .kind { color: var(--muted); display: inline-flex; align-items: center; gap: .25rem; }
.msg-head time { margin-left: auto; color: var(--muted); }
.msg-body { padding: .65rem .75rem; overflow-wrap: anywhere; }
.msg.incoming { background: var(--in); }
.msg.outgoing { background: var(--out); }
.msg.note { background: var(--note); }
.attachments { padding: .4rem .75rem; border-top: 1px dashed var(--line); display: flex; gap: .9rem; flex-wrap: wrap; font-size: .9em; }
.attachments a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.delivery { font-size: .82em; color: var(--muted); }
.d-open { color: var(--ok); }
.d-bounce, .d-dropped { color: var(--danger); font-weight: 600; }

.ai-panel { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .8rem 0 .2rem; }
.ai-label { color: var(--muted); font-size: .84em; display: inline-flex; align-items: center; gap: .25rem; }
.draft-form { display: flex; gap: .4rem; flex: 1; min-width: 240px; }
.draft-form input { flex: 1; }
.htmx-indicator { opacity: 0; transition: opacity .2s; color: var(--muted); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.ai-result { border: 1px solid var(--line); border-radius: var(--radius); margin: .45rem 0; background: var(--card); }
.ai-result.error { padding: .6rem .75rem; color: var(--danger); }
.ai-result-head { padding: .35rem .75rem; font-size: .82em; color: var(--muted); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .3rem; }
.ai-result-body { padding: .65rem .75rem; overflow-wrap: anywhere; }
.ai-notice { color: var(--muted); font-size: .84em; margin-bottom: .3rem; display: flex; align-items: center; gap: .3rem; }

.license-panel { border: 1px solid var(--line); border-radius: var(--radius); margin: .45rem 0; background: var(--card); }
.license-panel.error { padding: .6rem .75rem; color: var(--danger); }
.license-panel.muted { padding: .6rem .75rem; color: var(--muted); }
.lp-head { padding: .35rem .75rem; font-size: .82em; color: var(--muted); border-bottom: 1px solid var(--line); }
.lp-body { padding: .65rem .75rem; margin: 0; white-space: pre-wrap; font-size: .86em; overflow-x: auto; }

.replybox { position: sticky; bottom: 0; background: var(--bg); padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.reply-actions { display: flex; gap: .6rem; align-items: center; margin-top: .45rem; flex-wrap: wrap; }
.send-btn { background: var(--ok); color: #fff; }
.spacer { flex: 1; }

.empty { text-align: center; color: var(--muted); padding: 2.5rem 0; }

.act-day h2 { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 1.1rem 0 .4rem; }
.act-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.act-list li { display: flex; gap: .55rem; align-items: baseline; padding: .3rem .5rem; border-radius: var(--radius); }
.act-list li:hover { background: var(--card); }
.act-time { color: var(--muted); font-size: .82em; font-variant-numeric: tabular-nums; flex: none; }
.act-icon { color: var(--muted); flex: none; }
.act-icon.k-incoming { color: var(--accent); }
.act-icon.k-outgoing { color: var(--ok); }
.act-icon.k-triage { color: var(--warn); }
.act-body { min-width: 0; }
.act-ticket { text-decoration: none; color: var(--fg); font-weight: 550; margin-right: .4rem; }
.act-ticket:hover { color: var(--accent); }
.act-detail { color: var(--muted); font-size: .9em; overflow-wrap: anywhere; }

.settings h1 { font-size: 1.15rem; }
.setting-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: .85rem; margin: .8rem 0; }
.setting-group h2 { font-size: .95rem; margin: 0 0 .7rem; }
.setting-row { display: grid; grid-template-columns: 240px 1fr; gap: .25rem .7rem; align-items: center; margin-bottom: .4rem; }
.setting-row label { color: var(--muted); font-size: .92em; }
.setting-row .hint { grid-column: 2; font-size: .78em; color: var(--muted); margin-top: -0.15rem; }
.setting-group button { margin-top: .5rem; margin-right: .4rem; }
.flash { background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid var(--ok); border-radius: var(--radius); padding: .45rem .75rem; margin: .7rem 0; font-size: .92em; }
.editor { border-top: 1px dashed var(--line); padding: .35rem 0; }
.editor summary { cursor: pointer; padding: .25rem 0; }
.hint-inline { color: var(--muted); font-size: .85em; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; margin: .7rem 0; }
.grid2 label { display: grid; gap: .2rem; color: var(--muted); font-size: .88em; }
.grid2 label.check { grid-template-columns: auto 1fr; align-items: center; }
.siglabel { display: grid; gap: .2rem; color: var(--muted); font-size: .88em; margin: .4rem 0; }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--line); }
.dot.on { background: var(--ok); }

@media (max-width: 700px) {
  .setting-row { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  main { padding: .7rem; }
}
/* touch devices keep comfortable targets */
@media (pointer: coarse) {
  button { min-height: 42px; }
  input, select { min-height: 40px; }
}

/* Parallel-run mirror mode: persistent reminder that Redmine is the writer */
.mirror-banner {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; font-size: 12px;
  background: color-mix(in srgb, var(--accent, #6D8FE8) 14%, var(--bg, #14161B));
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #6D8FE8) 30%, transparent);
  color: var(--fg-muted, #9aa3b2);
}
.mirror-banner .icon { width: 14px; height: 14px; }

/* Push bell: filled accent when subscribed */
#push-bell { background: none; border: none; cursor: pointer; }
#push-bell.on .icon { color: var(--accent, #6D8FE8); }