/* ============================================================
   panels.css — シート内の各機能パネル
   ============================================================ */

/* ---------- 共通パーツ ---------- */
.f-row{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.f-row.tight{ gap:6px; }
.grow{ flex:1; min-width:140px; }
.sec{ margin-bottom:22px; }
.sec:last-child{ margin-bottom:0; }
.sec-h{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11px; letter-spacing:.2em; color:var(--cy-soft); font-weight:600;
  padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.empty{ padding:26px 12px; text-align:center; color:var(--muted); font-size:13px; }

input[type=text],input[type=date],input[type=time],input[type=number],input[type=password],
textarea,select{
  background:rgba(4,10,20,.7); border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; outline:0; color:var(--ink); transition:border-color .2s, box-shadow .2s;
  font-size:14px; width:100%; }
input:focus,textarea:focus,select:focus{ border-color:var(--line-2); box-shadow:0 0 0 3px rgba(34,211,238,.1); }
textarea{ resize:vertical; min-height:90px; line-height:1.7; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
  linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:32px; }
select option{ background:#0a1424; color:var(--ink); }
label.fl{ display:block; font-size:11px; letter-spacing:.12em; color:var(--muted); margin-bottom:5px; }

.btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:10px;
  font-size:13.5px; font-weight:600; border:1px solid var(--line); color:var(--ink-2);
  background:rgba(12,22,40,.6); transition:.2s; white-space:nowrap; }
.btn:hover{ color:var(--cy); border-color:var(--line-2); background:rgba(34,211,238,.1); }
.btn.pri{ color:var(--ink); border-color:var(--line-2);
  background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(59,130,246,.26));
  box-shadow:0 6px 20px rgba(34,211,238,.14); }
.btn.pri:hover{ background:linear-gradient(135deg, rgba(34,211,238,.34), rgba(59,130,246,.38)); }
.btn.danger:hover{ color:var(--rose); border-color:rgba(251,113,133,.5); background:rgba(251,113,133,.1); }
.btn.sm{ padding:6px 11px; font-size:12px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.tag{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:10.5px; letter-spacing:.1em;
  border:1px solid var(--line); color:var(--ink-2); }
.tag.hi{ color:#ffd0d6; border-color:rgba(251,113,133,.45); background:rgba(251,113,133,.1); }
.tag.mid{ color:#fde6b0; border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.08); }
.tag.lo{ color:var(--muted); }
.tag.ok{ color:#b6f3d8; border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.1); }

/* ---------- リストアイテム ---------- */
.item{ display:flex; align-items:flex-start; gap:11px; padding:12px 13px; border-radius:12px;
  border:1px solid var(--line); background:rgba(10,19,35,.5); margin-bottom:9px;
  transition:border-color .2s, transform .2s; }
.item:hover{ border-color:var(--line-2); transform:translateX(2px); }
.item.done{ opacity:.45; }
.item.done .it-title{ text-decoration:line-through; }
.item.over{ border-color:rgba(251,113,133,.4); background:rgba(251,113,133,.06); }
.it-main{ flex:1; min-width:0; }
.it-title{ font-size:14.5px; color:var(--ink); line-height:1.5; word-break:break-word; }
.it-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px;
  font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.it-note{ margin-top:6px; font-size:12.5px; color:var(--ink-2); line-height:1.6; white-space:pre-wrap; }
.it-act{ display:flex; gap:4px; flex:none; }
.check{ flex:none; width:20px; height:20px; margin-top:2px; border-radius:6px;
  border:1.5px solid var(--line-2); display:grid; place-items:center; cursor:pointer; transition:.2s; }
.check:hover{ background:rgba(34,211,238,.12); }
.check.on{ background:var(--cy); border-color:var(--cy); box-shadow:var(--glow); }
.check.on::after{ content:""; width:5px; height:9px; border:2px solid #041018;
  border-top:0; border-left:0; transform:rotate(42deg) translate(-1px,-1px); }

/* ---------- 対話ログ ---------- */
.talk{ display:flex; flex-direction:column; gap:14px; }
.bubble{ max-width:82%; padding:11px 15px; border-radius:14px; font-size:14px; line-height:1.8;
  white-space:pre-wrap; word-break:break-word; }
.bubble.me{ align-self:flex-end; background:rgba(59,130,246,.16); border:1px solid rgba(59,130,246,.3);
  border-bottom-right-radius:4px; }
.bubble.ai{ align-self:flex-start; background:rgba(12,24,44,.7); border:1px solid var(--line);
  border-bottom-left-radius:4px; }
.bubble .who{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--cy-soft); margin-bottom:4px; }
.bubble.me .who{ color:#9dc0ff; }

/* ---------- 売上 ---------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.kpi{ position:relative; padding:15px 16px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(34,211,238,.08), rgba(10,19,35,.6)); overflow:hidden; }
.kpi::after{ content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px;
  border-radius:50%; background:radial-gradient(circle, rgba(34,211,238,.18), transparent 70%); }
.kpi .figure{ display:block; margin-top:4px; }
.kpi.warn{ border-color:rgba(251,191,36,.35); background:linear-gradient(160deg, rgba(251,191,36,.09), rgba(10,19,35,.6)); }

.bars{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.bar-row{ display:grid; grid-template-columns:110px 1fr auto; gap:10px; align-items:center; font-size:12.5px; }
.bar-row .nm{ color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track{ height:8px; border-radius:8px; background:rgba(94,234,255,.08); overflow:hidden; }
.bar-fill{ height:100%; border-radius:8px; background:linear-gradient(90deg,var(--blue),var(--cy));
  box-shadow:0 0 12px rgba(34,211,238,.5); width:0; transition:width .9s cubic-bezier(.2,.8,.2,1); }
.bar-row .vl{ font-family:var(--mono); color:var(--ink); font-size:12.5px; white-space:nowrap; }

.src{ margin-top:12px; padding:10px 12px; border-radius:10px; font-size:11.5px; line-height:1.7;
  color:var(--muted); border:1px dashed rgba(94,234,255,.2); background:rgba(4,10,20,.4); }

/* ---------- 予定 ---------- */
.ev{ display:grid; grid-template-columns:78px 1fr; gap:12px; padding:11px 0;
  border-bottom:1px dashed rgba(94,234,255,.12); }
.ev:last-child{ border-bottom:0; }
.ev .tm{ font-family:var(--mono); font-size:12.5px; color:var(--cy-soft); padding-top:2px; }
.ev .tm b{ display:block; font-size:14px; color:var(--ink); font-weight:600; }
.ev .ti{ font-size:14px; color:var(--ink); line-height:1.5; }
.ev .pl{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.ev.now{ background:linear-gradient(90deg, rgba(34,211,238,.1), transparent); border-radius:8px;
  padding-left:10px; margin-left:-10px; }
.daygroup{ margin-bottom:18px; }
.daygroup > h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; color:var(--cy);
  margin-bottom:6px; }

/* ---------- 会議 ---------- */
.rec-hero{ display:flex; align-items:center; gap:16px; padding:16px; border-radius:14px;
  border:1px solid var(--line); background:rgba(10,19,35,.5); margin-bottom:16px; }
.rec-dot{ width:14px; height:14px; border-radius:50%; background:var(--muted); flex:none; }
.rec-hero.on .rec-dot{ background:var(--rose); box-shadow:0 0 14px var(--rose);
  animation:pulseDot 1.2s ease-in-out infinite; }
.rec-time{ font-family:var(--mono); font-size:24px; font-variant-numeric:tabular-nums; color:var(--ink); }
.live{ max-height:230px; overflow-y:auto; padding:13px 15px; border-radius:12px;
  border:1px solid var(--line); background:rgba(4,10,20,.55); font-size:13.5px; line-height:1.9;
  white-space:pre-wrap; }
.live .interim{ color:var(--muted); }
.mins h4{ font-size:12px; letter-spacing:.16em; color:var(--cy-soft); margin:16px 0 7px; }
.mins ul{ margin:0; padding-left:20px; }
.mins li{ margin-bottom:5px; font-size:13.5px; line-height:1.7; }

/* ---------- 設定 ---------- */
.set-row{ display:grid; grid-template-columns:1fr; gap:6px; padding:13px 0;
  border-bottom:1px solid var(--line); }
.set-row:last-child{ border-bottom:0; }
.set-row h4{ font-size:13.5px; color:var(--ink); }
.set-row p{ font-size:12px; color:var(--muted); line-height:1.6; }
.switch{ position:relative; width:44px; height:24px; border-radius:999px; flex:none;
  background:rgba(94,234,255,.14); border:1px solid var(--line); transition:.2s; cursor:pointer; }
.switch::after{ content:""; position:absolute; left:2px; top:2px; width:18px; height:18px;
  border-radius:50%; background:var(--ink-2); transition:.2s; }
.switch.on{ background:rgba(34,211,238,.3); border-color:var(--line-2); }
.switch.on::after{ left:22px; background:var(--cy); box-shadow:var(--glow); }

@media (max-width:860px), (pointer:coarse) and (max-width:1200px){
  .bar-row{ grid-template-columns:88px 1fr auto; }
  .bubble{ max-width:92%; }
  .ev{ grid-template-columns:64px 1fr; }
}