/* P.mumu 設計規範 v1.2 — 灰階（三層）+ 螢光薄荷綠 + 字級層次重校（h1 28px）
   見 P.mumu_DESIGN.md。所有未來視覺修改先對齊規範，再動 code。
*/

:root {
  /* 三層灰階 */
  --pmumu-bg-outer: #E8E8E8;
  --pmumu-bg: #F2F2F2;
  --pmumu-surface: #FFFFFF;

  /* 邊框與文字 */
  --pmumu-border: #1A1A1A;
  --pmumu-text-1: #1A1A1A;
  --pmumu-text-2: #5C5C5C;
  --pmumu-text-3: #9A9A9A;

  /* 點綴色 */
  --pmumu-accent-solid: #1AE8B0;
  --pmumu-accent-subtle-bg: rgba(26, 232, 176, 0.15);
  --pmumu-accent-subtle-border: #1AE8B0;

  /* 字體 */
  --pmumu-font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --pmumu-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --pmumu-font-cn: '思源黑體', '蘭亭黑', 'Noto Sans TC', sans-serif;

  /* 字級 */
  --pmumu-size-hero: 72px;
  --pmumu-size-h1: 28px;
  --pmumu-size-h2: 22px;
  --pmumu-size-body: 16px;
  --pmumu-size-small: 13px;
  --pmumu-size-tiny: 11px;
  --pmumu-size-number-xl: 56px;
  --pmumu-size-number-lg: 32px;

  /* 字重 */
  --pmumu-weight-normal: 400;
  --pmumu-weight-medium: 500;
  --pmumu-weight-bold: 700;

  /* 行高 */
  --pmumu-line-tight: 1.1;
  --pmumu-line-normal: 1.5;
  --pmumu-line-loose: 1.7;

  /* 間距 */
  --pmumu-gap-sm: 8px;
  --pmumu-gap-md: 16px;
  --pmumu-gap-lg: 24px;
  --pmumu-gap-xl: 32px;

  /* 邊框 */
  --pmumu-border-width: 1px;
  --pmumu-border-width-strong: 2px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--pmumu-bg-outer);
  color: var(--pmumu-text-1);
  font-family: var(--pmumu-font-sans), var(--pmumu-font-cn);
  font-size: var(--pmumu-size-body);
  line-height: var(--pmumu-line-normal);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--pmumu-text-1); text-decoration: none; }
a:hover { text-decoration: underline; }

.pm-dim { color: var(--pmumu-text-3); }

/* 弱綠方式 C：重要數字用強調色文字、不改字級
   套在 .pm-usage 內的數字 span、以及未來 dashboard 的數據上 */
.pmumu-number {
  color: var(--pmumu-accent-solid);
}

/* ---- header ---- */
.pm-header {
  background: var(--pmumu-bg);
  border-bottom: 1px solid var(--pmumu-border);
}
.pm-header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--pmumu-gap-xl) var(--pmumu-gap-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pmumu-gap-md);
}
/* logo：純 wrapper <a>，不再有 font-* 樣式（SVG 取代文字） */
.pm-title {
  display: block;
  width: 100%;
  max-width: 600px;
  text-decoration: none;
  line-height: 0;
}
/* SVG logo 本體：等比縮放、不固定 height */
.pm-logo-svg {
  display: block;
  width: 85%;
  max-width: 600px;
  height: auto;
}
/* metadata 行容器（靠 .pm-header-inner 的 flex gap 定位）*/
.pm-header-meta { }
/* 花費 metadata：純文字（無框 pill）、small + mono（規範：數據/時間戳 → mono）*/
.pm-usage {
  font-family: var(--pmumu-font-mono);
  font-size: var(--pmumu-size-small);
  color: var(--pmumu-text-2);
}

/* ---- flash ---- */
.pm-flash-wrap {
  max-width: 960px;
  margin: 12px auto 0;
  padding: 0 16px;
}
.pm-flash {
  border: 1px solid var(--pmumu-border);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--pmumu-surface);
}
/* 錯誤 flash：規範「警示/錯誤 → 深灰底白字，不用紅」*/
.pm-flash--error {
  background: var(--pmumu-border);
  color: var(--pmumu-surface);
  border-color: var(--pmumu-border);
}

/* ---- main ---- */
.pm-main {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px 60px;
  flex: 1;
}

/* ---- panes (desktop: stacked; mobile: swipe) ---- */
/* margin-top 給第一個 pane 的跨坐標題上緣留空間（避免貼 header border 的 subpixel 擠壓）*/
.pm-panes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: var(--pmumu-gap-lg);
}
/* 桌面：文字雲 placeholder 隱藏（三螢幕 mental model 只在手機成立；桌面是垂直堆疊）*/
#pane-wordcloud { display: none; }
.pm-pane {
  position: relative;
  border: 1px solid var(--pmumu-border);
  background: var(--pmumu-surface);
}
/* 跨坐在 .pm-pane 上邊框的 label pill（白底黑邊、方括號保留）
   top: -20px 估算：h1 28px × line 1.1 + padding 4/12 + border 1+1 ≈ 41px 的一半
   實機驗收時 DevTools 量實際 computed height 再微調 */
.pm-pane-head {
  position: absolute;
  top: -20px;
  left: 16px;
  z-index: 1;
  background: var(--pmumu-surface);
  border: 1px solid var(--pmumu-border);
  padding: 4px 12px;
  font-family: var(--pmumu-font-mono);
  font-size: var(--pmumu-size-h1);
  font-weight: var(--pmumu-weight-bold);
  line-height: var(--pmumu-line-tight);
  letter-spacing: 1px;
}
/* padding-top 用 gap-lg 給跨坐標題下半（約 21px）留空間、避免蓋到內容 */
.pm-pane-body { padding: var(--pmumu-gap-lg) var(--pmumu-gap-md) var(--pmumu-gap-md); }

.pm-report-placeholder p { margin: 8px 0; }

/* textarea + form */
#pm-text {
  width: 100%;
  font-family: var(--pmumu-font-sans), var(--pmumu-font-cn);
  font-size: var(--pmumu-size-body);
  line-height: var(--pmumu-line-normal);
  padding: 12px;
  border: 1px solid var(--pmumu-border);
  background: var(--pmumu-surface);
  color: var(--pmumu-text-1);
  resize: vertical;
  outline: none;
}
#pm-text:focus { background: var(--pmumu-bg); }

.pm-drop {
  margin-top: 10px;
  border: 1px dashed var(--pmumu-border);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pmumu-bg);
}
.pm-drop.is-dragging { background: var(--pmumu-border); color: var(--pmumu-surface); }
.pm-drop.is-dragging .pm-btn,
.pm-drop.is-dragging .pm-drop-hint { color: var(--pmumu-surface); border-color: var(--pmumu-surface); }
.pm-drop-hint { color: var(--pmumu-text-3); }
.pm-drop-file { color: var(--pmumu-text-1); }

.pm-form-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pm-form-actions .pm-dim { flex: 1; }

/* buttons — 方正、1px 邊框 */
.pm-btn {
  font-family: var(--pmumu-font-mono);
  font-size: var(--pmumu-size-body);
  font-weight: var(--pmumu-weight-medium);
  padding: 12px 24px;
  border: 1px solid var(--pmumu-border);
  background: transparent;
  color: var(--pmumu-text-1);
  cursor: pointer;
  line-height: 1.2;
  border-radius: 0;
}
.pm-btn:hover { background: var(--pmumu-border); color: var(--pmumu-surface); }
.pm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* 主要 CTA：強綠底黑字（規範:「該被點擊的動作」→ 強綠） */
.pm-btn--primary {
  background: var(--pmumu-accent-solid);
  color: var(--pmumu-text-1);
  border-color: var(--pmumu-accent-solid);
  transition: opacity 0.15s ease;
}
.pm-btn--primary:hover {
  background: var(--pmumu-accent-solid);
  color: var(--pmumu-text-1);
  opacity: 0.88;
}
/* pane dots (mobile only) — 在 @media 區塊實作 */
.pm-pane-nav { display: none; }

/* ---- recent list ---- */
.pm-recent { margin-top: 24px; }
/* 獨立 label pill：不跨坐（[ 最近 N 則 ] 上下都沒 card）
   inline-block 讓盒子收縮到文字寬、方括號保留 */
.pm-section-head {
  display: inline-block;
  background: var(--pmumu-surface);
  border: 1px solid var(--pmumu-border);
  padding: 4px 12px;
  margin: 8px 0 var(--pmumu-gap-md);
  font-family: var(--pmumu-font-mono);
  font-size: var(--pmumu-size-h1);
  font-weight: var(--pmumu-weight-bold);
  line-height: var(--pmumu-line-tight);
  letter-spacing: 1px;
}
.pm-notelist { list-style: none; margin: 0; padding: 0; }
.pm-noteitem {
  border-top: 1px solid var(--pmumu-border);
}
.pm-noteitem:last-child { border-bottom: 1px solid var(--pmumu-border); }
.pm-noteitem-link {
  display: block;
  padding: 10px 8px;
  color: var(--pmumu-text-1);
}
.pm-noteitem-link:hover {
  background: var(--pmumu-bg);
  text-decoration: none;
}
.pm-noteitem-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.pm-noteitem-date { font-size: var(--pmumu-size-small); color: var(--pmumu-text-3); }
.pm-noteitem-preview { white-space: pre-line; color: var(--pmumu-text-1); }

/* tags */
.pm-tag {
  font-family: var(--pmumu-font-mono);
  font-size: var(--pmumu-size-tiny);
  padding: 2px 8px;
  border: 1px solid var(--pmumu-border);
  background: var(--pmumu-surface);
  color: var(--pmumu-text-1);
}
.pm-tag--secret {
  background: var(--pmumu-border);
  color: var(--pmumu-surface);
}

/* ---- note page ---- */
.pm-note {
  border: 1px solid var(--pmumu-border);
  background: var(--pmumu-surface);
  padding: 16px;
}
.pm-note-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pmumu-border);
}
.pm-back { font-size: var(--pmumu-size-small); }
.pm-note-date { color: var(--pmumu-text-3); font-size: var(--pmumu-size-small); }

.pm-note-attachments { margin: 8px 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.pm-note-img {
  max-width: 240px;
  max-height: 240px;
  border: 1px solid var(--pmumu-border);
  background: var(--pmumu-bg);
}

/* position: relative → 內部跨坐 sectionhead 的定位父容器 */
.pm-note-section {
  position: relative;
  margin: 16px 0;
}
/* 預設 label pill 樣式 —— [ 對話 ] 這個 sectionhead 吃這套
   .pm-note-section 裡的 sectionhead 會被下方覆寫成跨坐 */
.pm-note-sectionhead {
  display: inline-block;
  background: var(--pmumu-surface);
  border: 1px solid var(--pmumu-border);
  padding: 4px 12px;
  margin: 16px 0 8px;
  font-family: var(--pmumu-font-mono);
  font-size: var(--pmumu-size-h2);
  font-weight: var(--pmumu-weight-bold);
  line-height: var(--pmumu-line-tight);
  letter-spacing: 1px;
}
/* 在 .pm-note-section 裡：sectionhead 改跨坐；body 加 padding-top 避開標題下半
   top: -17px 估算：h2 22px × 1.1 + padding 4/12 + border 1+1 ≈ 34px 的一半 */
.pm-note-section .pm-note-sectionhead {
  position: absolute;
  top: -17px;
  left: 17px;
  z-index: 1;
  margin: 0;
}
.pm-note-section .pm-note-body {
  padding-top: var(--pmumu-gap-lg);
}
/* 筆記內文區塊（原文／整理版）：淺灰 inset，跟白色卡片框區分 */
.pm-note-body {
  background: var(--pmumu-bg);
  border: 1px solid var(--pmumu-border);
  padding: var(--pmumu-gap-md);
  white-space: normal;
}

.pm-collapse { margin: 8px 0 16px; }
.pm-collapse summary {
  cursor: pointer;
  color: var(--pmumu-text-2);
  list-style: none;
  padding: 4px 0;
}
.pm-collapse summary::-webkit-details-marker { display: none; }

.pm-tidy-form { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* chat */
.pm-chat { margin-top: 24px; border-top: 1px solid var(--pmumu-border); padding-top: 12px; }
.pm-chat-log { margin-bottom: 12px; }
/* 對話訊息：保持白底 + border 分格（不做 inset 灰底）
   user/model 目前同樣式、靠 who 欄位的「P028」vs「P.mumu」區分
   未來若要強化區隔，可在 .pm-chat-turn--model 加 border-left 等 */
.pm-chat-turn {
  padding: var(--pmumu-gap-md);
  margin-bottom: 8px;
  border: 1px solid var(--pmumu-border);
  background: var(--pmumu-surface);
}
.pm-chat-who { font-size: var(--pmumu-size-small); color: var(--pmumu-text-2); margin-bottom: 4px; }
.pm-chat-text { color: var(--pmumu-text-1); }

.pm-chat-form textarea {
  width: 100%;
  font-family: var(--pmumu-font-sans), var(--pmumu-font-cn);
  font-size: var(--pmumu-size-body);
  padding: 12px;
  border: 1px solid var(--pmumu-border);
  background: var(--pmumu-surface);
  color: var(--pmumu-text-1);
  resize: vertical;
  outline: none;
}
.pm-chat-form textarea:focus { background: var(--pmumu-bg); }
.pm-chat-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* 對話下方 inline 狀態訊息：預設走 .pm-dim（text-3 淺灰）
   錯誤時由 JS 切 .pm-chat-status--error 類別，變深色 + medium weight */
.pm-chat-status--error {
  color: var(--pmumu-text-1);
  font-weight: var(--pmumu-weight-medium);
}

/* footer */
.pm-footer {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 16px 20px;
  color: var(--pmumu-text-2);
  font-size: var(--pmumu-size-small);
  text-align: center;
}

/* ---- mobile ---- */
@media (max-width: 768px) {
  /* header 手機 override：縮 padding、放寬 logo 最大寬 */
  .pm-header-inner {
    padding: var(--pmumu-gap-md) var(--pmumu-gap-md);
    gap: var(--pmumu-gap-sm);
  }
  .pm-logo-svg {
    width: 95%;
    max-width: 100%;
  }

  .pm-panes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0;
    scrollbar-width: none;
    /* overflow-x: auto 觸發 spec 把 overflow-y 也推成 auto、會 clip 跨坐標題；
       用 padding-top 在 clip 框內預留空間，避開 overflow 屬性陷阱 */
    padding-top: var(--pmumu-gap-lg);
  }
  .pm-panes::-webkit-scrollbar { display: none; }
  .pm-pane {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  /* 手機還原文字雲 pane 顯示 */
  #pane-wordcloud { display: block; }

  .pm-pane-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }
  /* 三螢幕 indicator：未選灰圓點、選中強綠膠囊 */
  .pm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--pmumu-text-3);
    padding: 0;
    cursor: pointer;
  }
  .pm-dot--active {
    background: var(--pmumu-accent-solid);
    width: 24px;
    border-radius: 4px;
  }

  .pm-note-img { max-width: 100%; }
}