/* Jira Deck — Twilight Fable theme (mirrors chat.css palette) */

/* Inherit all custom properties from chat.css when linked together;
   define only Jira-specific tokens here. */
:root {
  --sprint-bar-h: 56px;
  --chip-radius: 4px;

  --status-todo:     #6B6280;
  --status-progress: var(--ember);
  --status-done:     var(--aqua);
  --status-critical: var(--rose);

  --priority-critical: var(--rose);
  --priority-high:     #F5A742;
  --priority-medium:   #A0C4FF;
  --priority-low:      var(--ink-dim2);

  --plan-none:     var(--ink-dim2);
  --plan-planned:  var(--ember);
  --plan-reported: var(--aqua);
}

/* ---- base reset (scoped to this page only) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

/* ---- layout ---- */
#jiraApp {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* ---- header ---- */
#jiraHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 52px;
  flex-shrink: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
#backBtn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 6px;
}
#backBtn:hover { background: var(--bg-hover); color: var(--ink); }
#headerTitle {
  font-weight: 600;
  font-size: 16px;
  flex: 1;
}
#healthDot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-dim2);
  flex-shrink: 0;
}
#healthDot.ok   { background: var(--status-done); }
#healthDot.demo { background: var(--ember); }
#healthDot.err  { background: var(--status-critical); }
#healthLabel {
  font-size: 12px;
  color: var(--ink-dim2);
}
#lastUpdated {
  font-size: 11px;
  color: var(--ink-dim2);
  white-space: nowrap;
}
#refreshBtn {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 17px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
#refreshBtn:hover { background: var(--bg-hover); color: var(--ink); }
#refreshBtn.spinning {
  animation: spin .7s linear infinite;
  pointer-events: none;
  color: var(--ember);
}

/* ---- sprint bar ---- */
#sprintBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
#sprintSelect {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
  padding: 5px 8px;
  cursor: pointer;
}
#scopeToggle {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 6px;
  color: var(--ink-dim);
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
}
#scopeToggle.all {
  color: var(--status-progress);
  border-color: rgba(245,167,66,.4);
}
.chip.epic { background: rgba(154,120,230,.12); color: #9A78E6; border-color: rgba(154,120,230,.3); }
.chip.assignee { background: rgba(255,255,255,.06); color: var(--ink-dim2); border-color: var(--line2); }

/* ---- board switcher (tabs) ---- */
#boardBar {
  display: flex;
  gap: 6px;
  padding: 8px 12px 0;
  flex-shrink: 0;
  background: var(--surface);
}
.boardTab {
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.boardTab:hover { color: var(--ink); }
.boardTab.active {
  background: var(--ember);
  border-color: var(--ember);
  color: #1a1206;
}

/* ---- due-date urgency chips (infra board) ---- */
.chip.due-overdue { background: rgba(220,60,60,.16);  color: #ff8080; border-color: rgba(220,60,60,.45); font-weight: 600; }
.chip.due-soon    { background: rgba(245,120,66,.16);  color: #ffab73; border-color: rgba(245,120,66,.4); font-weight: 600; }
.chip.due-week    { background: rgba(245,200,66,.13);  color: #e6c34e; border-color: rgba(245,200,66,.32); }
.chip.due-later   { background: rgba(255,255,255,.05); color: var(--ink-dim2); border-color: var(--line2); }
.chip.due-none    { background: transparent; color: var(--ink-dim2); border-color: var(--line2); }

/* ---- inline edit section (detail panel) ---- */
.editSection { border-top: 1px solid var(--line); padding-top: 14px; }
.editRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.editRow label {
  font-size: 12px;
  color: var(--ink-dim);
  width: 78px;
  flex-shrink: 0;
}
.editRow select, .editRow input {
  flex: 1;
  min-width: 0;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  padding: 6px 8px;
}
#edSaveBtn {
  background: var(--ember);
  border: none;
  border-radius: 6px;
  color: #1a1206;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
}
#edSaveBtn:hover { filter: brightness(1.08); }
.editMsg { font-size: 12px; }
.editMsg.ok  { color: var(--status-done); }
.editMsg.err { color: var(--status-critical); }
#sprintStats {
  font-size: 13px;
  color: var(--ink-dim);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sprintCountdown {
  font-size: 12px;
  color: var(--ink-dim2);
  white-space: nowrap;
}

/* ---- main scroll area ---- */
#jiraMain {
  flex: 1;
  overflow: hidden;
  display: flex;
  position: relative;
}

/* ---- issue list ---- */
#issueList {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 80px;
}
#issueList.hidden { display: none; }

.issueGroup {
  padding: 8px 12px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim2);
}

.issueCard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.issueCard:hover  { background: var(--bg-hover); }
.issueCard.active { background: var(--bg-sel); }
.issueCard.subtask {
  padding-left: 28px;
  opacity: .88;
}

.icPriority {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.icPriority.Critical { background: var(--priority-critical); }
.icPriority.High     { background: var(--priority-high); }
.icPriority.Medium   { background: var(--priority-medium); }
.icPriority.Low      { background: var(--priority-low); }

.icBody { flex: 1; min-width: 0; }
.icKey  { font-size: 11px; color: var(--ink-dim2); margin-bottom: 2px; }
.icSummary {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ---- chips ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--chip-radius);
  border: 1px solid transparent;
}
.chip.status-todo     { background: rgba(107,98,128,.18); color: var(--status-todo); border-color: rgba(107,98,128,.3); }
.chip.status-progress { background: rgba(245,167,66,.14); color: var(--status-progress); border-color: rgba(245,167,66,.3); }
.chip.status-done     { background: rgba(78,216,196,.12); color: var(--status-done); border-color: rgba(78,216,196,.3); }
.chip.status-other    { background: rgba(255,255,255,.07); color: var(--ink-dim); border-color: var(--line2); }
.chip.plan-none     { background: transparent; color: var(--plan-none); border-color: transparent; }
.chip.plan-planned  { background: rgba(245,167,66,.14); color: var(--plan-planned); border-color: rgba(245,167,66,.3); }
.chip.plan-reported { background: rgba(78,216,196,.12); color: var(--plan-reported); border-color: rgba(78,216,196,.3); }
.chip.pts { background: rgba(255,255,255,.06); color: var(--ink-dim); border-color: var(--line2); }

/* ---- detail panel ---- */
#detailPanel {
  position: absolute;
  inset: 0;
  background: var(--bg);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.9,.3,1);
  z-index: 10;
}
#detailPanel.open { transform: translateX(0); }

#detailHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 2;
}
#detailBackBtn {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
#detailBackBtn:hover { background: var(--bg-hover); color: var(--ink); }
#detailKey {
  font-size: 12px;
  color: var(--ink-dim2);
  font-weight: 600;
}
#detailTitle {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  line-height: 1.3;
}

#detailBody {
  padding: 12px;
}

.detailSection {
  margin-bottom: 20px;
}
.detailSectionLabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim2);
  margin-bottom: 6px;
}
.detailDesc {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.6;
}
.plainText { white-space: pre-wrap; }

/* ---- rich text (Jira renderedFields HTML, sanitized client-side) ---- */
.richText { line-height: 1.6; overflow-wrap: break-word; }
.richText > :first-child { margin-top: 0; }
.richText > :last-child  { margin-bottom: 0; }
.richText p { margin: 0 0 10px; }
.richText h1, .richText h2, .richText h3,
.richText h4, .richText h5, .richText h6 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.35;
  margin: 18px 0 8px;
}
.richText h1 { font-size: 18px; }
.richText h2 { font-size: 16.5px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.richText h3 { font-size: 15px; }
.richText h4, .richText h5, .richText h6 { font-size: 14px; }
.richText ul, .richText ol { margin: 0 0 10px; padding-left: 22px; }
.richText li { margin: 3px 0; }
.richText li > ul, .richText li > ol { margin-bottom: 0; }
.richText tt, .richText code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .87em;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 0 4px;
}
.richText pre {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre;
  font-size: 12.5px;
  margin: 0 0 10px;
}
.richText pre tt, .richText pre code {
  background: none; border: none; padding: 0; font-size: inherit;
}
.richText blockquote {
  margin: 0 0 10px;
  padding: 6px 12px;
  border-left: 3px solid var(--line2);
  color: var(--ink-dim);
}
.richText a { color: var(--aqua); }
.richText table {
  border-collapse: collapse;
  margin: 0 0 10px;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.richText th, .richText td {
  border: 1px solid var(--line2);
  padding: 4px 8px;
  font-size: 13px;
  text-align: left;
}
.richText th { background: var(--bg3); }
.richText hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
html[data-theme="light"] .richText tt,
html[data-theme="light"] .richText code { background: rgba(80,60,30,.08); }
.detailMeta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ---- comments ---- */
.comment {
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--bg2);
}
.comment.ai-plan  { border-color: rgba(245,167,66,.4); background: rgba(245,167,66,.05); }
.comment.ai-report { border-color: rgba(78,216,196,.4); background: rgba(78,216,196,.05); }
.commentMeta {
  font-size: 11px;
  color: var(--ink-dim2);
  margin-bottom: 6px;
}
.commentBody {
  font-size: 13px;
  font-family: var(--font-mono, ui-monospace, monospace);
  line-height: 1.5;
}
/* Human comments render as Jira HTML in the normal UI font;
   AI plan/report blocks stay plainText + mono (machine format). */
.commentBody .richText {
  font-family: var(--font);
  font-size: 13.5px;
}
.commentBody.clamped {
  max-height: 280px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.showMoreBtn {
  display: block;
  background: none;
  border: none;
  color: var(--ember);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0 0;
  margin-top: 2px;
}
.showMoreBtn:hover { text-decoration: underline; }
.commentTag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.commentTag.plan   { background: rgba(245,167,66,.25); color: var(--ember); }
.commentTag.report { background: rgba(78,216,196,.25); color: var(--aqua); }

/* ---- plan action bar ---- */
#planBar {
  position: sticky;
  bottom: 0;
  background: var(--bg2);
  border-top: 1px solid var(--line2);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#modelSelect {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  padding: 5px 7px;
  cursor: pointer;
}
#planBtn {
  background: var(--grad, linear-gradient(135deg, #F5A742 0%, #E85A8A 100%));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
}
#planBtn:hover { box-shadow: 0 2px 18px rgba(245,167,66,.4); }
#planBtn:active { transform: scale(.97); }
#postPlanBtn {
  background: rgba(78,216,196,.15);
  color: var(--aqua);
  border: 1px solid rgba(78,216,196,.35);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .15s;
  display: none;
}
#postPlanBtn:hover { background: rgba(78,216,196,.25); }
#postPlanBtn.visible { display: inline-flex; align-items: center; gap: 5px; }
#planSessionLink {
  font-size: 12px;
  color: var(--ember);
  text-decoration: none;
  display: none;
}
#planSessionLink.visible { display: inline; }
#planSessionLink:hover { text-decoration: underline; }

/* E: live plan-poll state so the bar never looks silently stuck */
#planStatus { font-size: 12px; color: var(--ink-dim, #8a8f98); }
#planStatus.hidden { display: none; }
#planStatus.working { color: var(--ember); }
#planStatus.warn { color: #d9a441; }
#planStatus.done { color: var(--bull, #4ed8c4); }

/* ---- confirm modal ---- */
#confirmModal, #txModal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#confirmModal.hidden, #txModal.hidden { display: none; }
.confirmCard {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 20px;
  max-width: 520px;
  width: 100%;
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.confirmCard h3 { margin: 0; font-size: 16px; }
#confirmPreview {
  flex: 1;
  overflow-y: auto;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 300px;
  color: var(--ink-dim);
}
.confirmBtns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.cancelBtn {
  background: var(--bg-hover);
  border: 1px solid var(--line2);
  color: var(--ink-dim);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
.cancelBtn:hover { color: var(--ink); }
.okBtn {
  background: var(--grad, linear-gradient(135deg, #F5A742 0%, #E85A8A 100%));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.okBtn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- empty / loading states ---- */
.emptyState {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-dim2);
  font-size: 14px;
}
.loadingSpinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--line2);
  border-top-color: var(--ember);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 20px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- skeleton loading ---- */
.skelCard { padding: 12px; border-bottom: 1px solid var(--line); }
.skelLine {
  height: 10px;
  border-radius: 5px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg-hover) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.skelLine.w40 { width: 40%; }
.skelLine.w60 { width: 60%; }
.skelLine.w90 { width: 90%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- error toast ---- */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--bg2);
  border: 1px solid var(--rose);
  color: var(--rose);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  z-index: 70;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- demo banner ---- */
#demoBanner {
  background: rgba(245,167,66,.1);
  border-bottom: 1px solid rgba(245,167,66,.3);
  color: var(--ember);
  font-size: 12px;
  padding: 5px 12px;
  text-align: center;
  display: none;
}
#demoBanner.visible { display: block; }

/* ---- responsive: on wide screens show list + detail side-by-side ---- */
@media (min-width: 800px) {
  #jiraMain { gap: 0; }
  #issueList { max-width: 340px; border-right: 1px solid var(--line); }
  #issueList.hidden { display: block; } /* never hide on desktop */
  #detailPanel {
    position: relative;
    transform: none;
    flex: 1;
    border-left: none;
  }
  #detailBackBtn { display: none; } /* no back button needed on desktop */
}

/* light theme overrides */
html[data-theme="light"] {
  color-scheme: light;
  --bg:      #FBF7F0;
  --bg2:     #F3ECE0;
  --bg3:     #EDE4D2;
  --bg-hover: #E8DEC8;
  --bg-sel:   #E0D4BA;
  --line:    rgba(80,60,30,.1);
  --line2:   rgba(80,60,30,.18);
  --ink:     #2A1F0F;
  --ink-dim: #6B5B3A;
  --ink-dim2:#9C8B6A;
}

/* inline chrome icons — sit on the text baseline, inherit button colour */
.jIcon { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }
#refreshBtn .jIcon { width: 1.15em; height: 1.15em; }

/* ---- accessibility + touch layer (mirrors chat.css; was absent here) ---- */
/* Keyboard focus: one visible ring across every interactive control. */
#refreshBtn:focus-visible, #backBtn:focus-visible, .boardTab:focus-visible,
#scopeToggle:focus-visible, #sprintSelect:focus-visible, #detailBackBtn:focus-visible,
#planBtn:focus-visible, #postPlanBtn:focus-visible, #edSaveBtn:focus-visible,
.showMoreBtn:focus-visible, #planSessionLink:focus-visible,
#confirmOkBtn:focus-visible, #confirmCancelBtn:focus-visible,
.editRow input:focus-visible, .editRow select:focus-visible,
#modelSelect:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The edit inputs (esp. the required Time-spent field) get the same soft ring
   chat inputs use, so focus reads as deliberate. */
.editRow input:focus, .editRow select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Disabled state so buttons mid-request don't look tappable. */
#planBtn:disabled, #postPlanBtn:disabled, #edSaveBtn:disabled,
#confirmOkBtn:disabled { opacity: .55; cursor: default; filter: none; }

/* Touch targets: on a phone every control a thumb hits is ≥44px. */
@media (pointer: coarse) {
  #refreshBtn, #backBtn, #detailBackBtn, #scopeToggle, .boardTab,
  #sprintSelect, .showMoreBtn, #planBtn, #postPlanBtn, #edSaveBtn,
  #confirmOkBtn, #confirmCancelBtn {
    min-height: 44px;
  }
  #refreshBtn { min-width: 44px; }
  /* below 16px iOS Safari zooms the page on focus and never zooms back out */
  #sprintSelect, .editRow select, .editRow input { font-size: 16px; }
}

/* Small screens: stack the edit rows so the label sits above the field and the
   input column isn't crushed on a 393px phone. */
@media (max-width: 480px) {
  .editRow { flex-direction: column; align-items: stretch; gap: 4px; }
  .editRow label { width: auto; }
}

/* prefers-reduced-motion: kill the refresh spin + tab transitions. */
@media (prefers-reduced-motion: reduce) {
  #refreshBtn.spinning { animation: none; }
  .boardTab, .issueCard { transition: none; }
}