/* Folio AI — 手帳の余白で会話し、予定候補は別紙で確認する */
:root {
  --ai-paper: #f4eddb;
  --ai-paper-deep: #e8dcc2;
  --ai-ink: #303b34;
  --ai-moss: #4f6757;
  --ai-russet: #925f48;
  --ai-brass: #9a7d48;
}

.folio-ai-paper { overflow: hidden; }
.folio-ai-header { margin-bottom: 14px; }
.ai-header-actions { display: flex; align-items: center; gap: 9px; }
.ai-header-actions > button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(48,59,52,.2);
  color: var(--ai-ink);
  background: rgba(255,252,243,.58);
  font: 10px var(--utility);
}
.ai-header-actions svg { width: 17px; height: 17px; }
.ai-header-actions b { min-width: 20px; display: inline-grid; place-items: center; padding: 2px 5px; color: #fffaf0; background: var(--ai-russet); }
.ai-connection-pill { padding: 5px 8px; border-left: 3px solid var(--ai-brass); color: var(--ai-ink); background: rgba(154,125,72,.1); font: 9px var(--utility); }
.ai-connection-pill[data-state="connected"] { border-color: var(--ai-moss); background: rgba(79,103,87,.12); }
.ai-connection-pill[data-state="error"] { border-color: var(--ai-russet); background: rgba(146,95,72,.12); }

.folio-ai-layout {
  min-height: calc(100dvh - 150px);
  display: grid;
  grid-template-columns: minmax(180px, 25%) minmax(0,1fr);
  gap: clamp(13px, 2vw, 25px);
}
.ai-margin-note { align-self: start; padding: 18px; border-top: 5px solid var(--ai-moss); transform: rotate(-.25deg); }
.ai-margin-note h2 { margin: 5px 0 10px; font: 500 clamp(19px,2vw,27px) var(--display); }
.ai-margin-note p { margin: 0; color: var(--folio-ink-soft); font: 11px/1.8 var(--body); }
.ai-margin-note dl { margin: 18px 0; border-top: 1px solid rgba(48,59,52,.16); }
.ai-margin-note dl div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px dashed rgba(48,59,52,.17); }
.ai-margin-note dt { color: var(--folio-ink-soft); font: 9px var(--utility); }
.ai-margin-note dd { margin: 0; font: 11px var(--display); }
.ai-margin-note button { width: 100%; min-height: 38px; border: 1px solid rgba(48,59,52,.2); color: var(--ai-moss); background: transparent; font: 10px var(--utility); }

.ai-chat-sheet {
  min-width: 0;
  min-height: 560px;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto auto;
  padding: 18px 20px 16px;
  border: 1px solid rgba(48,59,52,.18);
  background:
    linear-gradient(90deg, transparent 0 42px, rgba(146,95,72,.16) 42px 43px, transparent 43px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(79,103,87,.105) 31px 32px),
    var(--ai-paper);
  box-shadow: 0 8px 22px rgba(70,54,35,.12);
}
.ai-messages { min-height: 0; max-height: calc(100dvh - 330px); overflow: auto; padding: 4px 5px 20px 36px; scroll-behavior: smooth; }
.ai-message { width: min(78%, 620px); margin: 0 0 15px; padding: 10px 13px; color: var(--ai-ink); background: rgba(255,252,243,.83); box-shadow: 2px 3px 0 rgba(85,66,42,.08); }
.ai-message[data-role="user"] { margin-left: auto; border-right: 4px solid var(--ai-russet); background: rgba(232,220,194,.92); }
.ai-message[data-role="assistant"] { border-left: 4px solid var(--ai-moss); }
.ai-message small { display: block; margin-bottom: 5px; color: var(--folio-ink-soft); font: 8px var(--utility); letter-spacing: .08em; }
.ai-message p { margin: 0; white-space: pre-wrap; font: 12px/1.75 var(--body); }
.ai-message.is-waiting p::after { content: ""; width: 6px; height: 6px; display: inline-block; margin-left: 7px; border-radius: 50%; background: var(--ai-moss); animation: ai-writing 1s ease-in-out infinite alternate; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 7px; padding: 7px 0 10px 36px; }
.ai-suggestions button { min-height: 34px; padding: 6px 10px; border: 1px dashed rgba(79,103,87,.38); color: var(--ai-moss); background: rgba(255,252,243,.7); font: 9px var(--utility); }
.ai-composer { padding: 10px 0 0 36px; border-top: 1px solid rgba(48,59,52,.18); }
.ai-composer > label { display: block; margin-bottom: 6px; color: var(--ai-moss); font: 600 9px var(--utility); letter-spacing: .12em; }
.ai-composer > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.ai-composer textarea { min-height: 58px; resize: vertical; padding: 10px; border: 1px solid rgba(48,59,52,.22); border-radius: 0; color: var(--ai-ink); background: rgba(255,253,247,.88); font: 13px/1.55 var(--body); }
.ai-composer button { min-width: 82px; display: grid; grid-template-columns: 19px auto; place-items: center; gap: 5px; padding: 8px 12px; border: 0; color: #fffaf0; background: var(--ai-moss); font: 10px var(--utility); }
.ai-composer button svg { width: 19px; height: 19px; }
.ai-composer button:disabled { opacity: .48; }
.ai-composer > small { display: block; margin-top: 7px; color: var(--folio-ink-soft); font: 8px/1.5 var(--utility); }

.candidate-box-intro { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 4px 0 12px; padding: 13px 16px; border-left: 5px solid var(--ai-brass); background: rgba(154,125,72,.08); }
.candidate-box-intro h2 { margin: 3px 0 0; font: 500 22px var(--display); }
.candidate-box-intro p { max-width: 520px; margin: 0; color: var(--folio-ink-soft); font: 10px/1.65 var(--body); }
.candidate-source-legend { display: flex; gap: 8px; margin: 11px 0; }
.candidate-source-legend span, .candidate-source {
  padding: 4px 8px;
  border-left: 3px solid var(--source-color, var(--ai-moss));
  color: var(--ai-ink);
  background: rgba(79,103,87,.08);
  font: 9px var(--utility);
}
[data-source="line"] { --source-color: #3b8060; }
[data-source="alexa"] { --source-color: #39758f; }
[data-source="folio-ai"] { --source-color: var(--ai-russet); }
.candidate-box-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.schedule-candidate { position: relative; min-width: 0; padding: 15px 16px 13px; border: 1px solid rgba(48,59,52,.17); background: rgba(255,251,240,.74); box-shadow: 3px 4px 0 rgba(79,62,40,.06); }
.schedule-candidate::after { content: ""; position: absolute; top: -4px; right: 14%; width: 76px; height: 13px; background: rgba(204,181,128,.42); transform: rotate(1deg); }
.schedule-candidate header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.schedule-candidate header time { color: var(--folio-ink-soft); font: 8px var(--utility); }
.schedule-candidate h3 { margin: 13px 0 10px; overflow-wrap: anywhere; font: 500 19px/1.35 var(--display); }
.candidate-date-line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 9px 0; border-top: 1px dashed rgba(48,59,52,.18); border-bottom: 1px dashed rgba(48,59,52,.18); }
.candidate-date-line strong { color: var(--ai-moss); font: 12px var(--body); }
.candidate-date-line span { color: var(--folio-ink-soft); font: 10px var(--utility); }
.candidate-note { min-height: 30px; margin: 9px 0; color: var(--folio-ink-soft); font: 10px/1.5 var(--body); }
.candidate-actions { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; }
.candidate-actions button { min-height: 37px; padding: 7px 9px; border: 1px solid rgba(48,59,52,.22); color: var(--ai-ink); background: transparent; font: 9px var(--utility); }
.candidate-actions .candidate-register { color: #fffaf0; border-color: var(--ai-moss); background: var(--ai-moss); }
.candidate-actions .candidate-delete { color: var(--ai-russet); }
.candidate-empty { min-height: 280px; display: grid; place-items: center; padding: 30px; border: 1px dashed rgba(48,59,52,.24); color: var(--folio-ink-soft); background: rgba(255,251,240,.42); text-align: center; }
.candidate-empty svg { width: 42px; height: 42px; margin-bottom: 12px; color: var(--ai-moss); }
.candidate-empty h2 { margin: 0 0 7px; font: 500 22px var(--display); }
.candidate-empty p { margin: 0; font: 10px/1.7 var(--body); }

.ai-settings-panel { margin: 12px -4px; padding: 15px 16px 8px; border-left: 3px solid var(--ai-russet); background: rgba(146,95,72,.055); }
.ai-settings-title { margin-bottom: 8px; }
.ai-settings-title h2 { margin: 3px 0; font: 500 21px var(--display); }
.ai-settings-title p { margin: 0; color: var(--folio-ink-soft); font: 10px/1.6 var(--body); }
.ai-setting-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(48,59,52,.13); }
.ai-setting-row > span:first-child b, .ai-setting-row > span:first-child small { display: block; }
.ai-setting-row > span:first-child small { margin-top: 4px; color: var(--folio-ink-soft); font: 9px var(--utility); }
.ai-setting-row > strong { color: var(--ai-moss); font: 12px var(--display); }
.ai-setting-row input[type="text"], .ai-setting-row input[type="password"] { width: min(320px,52%); min-height: 38px; padding: 7px 9px; border: 1px solid rgba(48,59,52,.22); color: var(--ai-ink); background: rgba(255,252,243,.76); }
.ai-setting-row > button { min-height: 37px; padding: 7px 11px; border: 1px solid rgba(48,59,52,.2); color: var(--ai-moss); background: rgba(255,252,243,.58); font: 9px var(--utility); }
.ai-limit-input { display: flex; align-items: center; gap: 6px; font: 10px var(--utility); }
.ai-limit-input input { width: 90px; min-height: 38px; padding: 7px; border: 1px solid rgba(48,59,52,.22); color: var(--ai-ink); background: rgba(255,252,243,.76); }
.ai-billing-note { margin: 10px 0 2px; padding: 9px 11px; border: 1px dashed rgba(146,95,72,.28); color: var(--folio-ink-soft); background: rgba(255,250,238,.44); font: 9px/1.65 var(--body); }

body.dark .ai-chat-sheet, body.dark .schedule-candidate, body.dark .candidate-empty { color: #ebe5d7; background-color: #29332e; }
body.dark .ai-message { color: #ebe5d7; background: rgba(49,60,54,.94); }
body.dark .ai-message[data-role="user"] { background: rgba(83,68,54,.94); }
body.dark .ai-composer textarea, body.dark .ai-setting-row input, body.dark .ai-limit-input input { color: #ebe5d7; background: #303b35; }

@keyframes ai-writing { to { opacity: .22; transform: translateY(-3px); } }

@media (max-width: 839px) {
  .folio-ai-layout { min-height: calc(100dvh - 112px); grid-template-columns: 1fr; }
  .ai-margin-note { display: none; }
  .folio-ai-header { grid-template-columns: 38px minmax(0,1fr) auto; }
  .ai-connection-pill { display: none; }
  .ai-header-actions > button span { font-size: 0; }
  .ai-header-actions > button b { font-size: 9px; }
  .ai-chat-sheet { min-height: calc(100dvh - 92px); padding: 12px 10px 10px; }
  .ai-messages { max-height: none; padding-left: 24px; }
  .ai-suggestions, .ai-composer { padding-left: 24px; }
  .ai-message { width: min(90%, 600px); }
  .candidate-box-list { grid-template-columns: 1fr; }
  .candidate-box-intro { align-items: start; flex-direction: column; gap: 7px; }
}

@media (max-width: 520px) {
  .folio-ai-paper { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .ai-chat-sheet { min-height: calc(100dvh - 82px); padding-right: 7px; padding-left: 7px; border-right: 0; border-left: 0; }
  .ai-messages { padding-left: 17px; }
  .ai-suggestions, .ai-composer { padding-left: 17px; }
  .ai-suggestions { flex-wrap: nowrap; overflow-x: auto; }
  .ai-suggestions button { flex: 0 0 auto; }
  .ai-composer button { min-width: 60px; grid-template-columns: 1fr; }
  .ai-composer button span { display: none; }
  .candidate-actions { grid-template-columns: 1fr 1fr; }
  .candidate-actions .candidate-edit { grid-column: 1 / -1; grid-row: 1; }
  .ai-setting-row { align-items: stretch; flex-direction: column; gap: 8px; padding: 10px 0; }
  .ai-setting-row input[type="text"], .ai-setting-row input[type="password"] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-messages { scroll-behavior: auto; }
  .ai-message.is-waiting p::after { animation: none; }
}