/* AI社員 宇宙オフィス：色・シーンのレイヤー（宇宙・室内・キャラクター配置・会議テーブル）・社員の一覧 */
:root {
  --space-deep: #060a24;
  --space-navy: #0b1033;
  --space-purple: #2a1a5e;
  --space-blue: #1d3a8a;
  --glow: #8fb8ff;
  --text: #eef1ff;
  --text-sub: #b9c2ec;
  --line: rgba(143, 184, 255, 0.28);
  --tap: 44px; /* タップできる範囲の最小 */
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background: radial-gradient(ellipse at 30% 20%, var(--space-purple), transparent 60%),
    radial-gradient(ellipse at 80% 70%, var(--space-blue), transparent 55%),
    var(--space-deep);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.office-header h1 { margin: 0 0 4px; font-size: 1.5rem; letter-spacing: 0.04em; }
.version { font-size: 0.9rem; color: var(--text-sub); }
.notice { margin: 0 0 16px; font-size: 0.85rem; color: var(--text-sub); }

/* キャラクターの表示：公式画像があれば縦横比を保って表示、無ければ仮のアイコン */
.avatar { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
/* 画像は枠（.avatar）の中に収め、縦横比を保つ。はみ出さないよう枠いっぱいに重ねて配置する */
.avatar picture { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.avatar img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* 公式画像（胸から上の正方形）：丸く切り抜き、星の光の縁を付ける（画像そのものは加工しない） */
.avatar.has-art img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(207, 224, 255, 0.85), 0 0 14px rgba(150, 140, 255, 0.55);
  background: #0b1033;
}
.placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 80% 72%), hsl(var(--hue) 60% 38%));
  box-shadow: 0 0 12px hsl(var(--hue) 90% 70% / 0.45);
  border: 1px dashed rgba(255, 255, 255, 0.55); /* 仮のアイコンであることが分かるように点線 */
}

/* ---------- シーン：4 つのレイヤーを重ねる ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.scene {
  --wall: #0a0d2e;
  --window-top: 5%;
  --window-side: 5%;
  --window-height: 52%;
  --floor-top: 58%;
  position: relative;
  width: 100%;
  height: clamp(480px, calc(100dvh - 150px), 900px);
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--wall);
  isolation: isolate;
}
.layer { position: absolute; inset: 0; }
/* 宇宙の景色は窓の大きさに合わせる（横向き・縦向きのどちらでも、惑星や衛星が窓の中に入る） */
.layer-space { z-index: 1; inset: auto; top: var(--window-top); left: var(--window-side); right: var(--window-side); height: var(--window-height); }
.layer-room { z-index: 2; pointer-events: none; }
.layer-characters { z-index: 3; pointer-events: none; }
.layer-table { z-index: 4; pointer-events: none; }

/* ① 宇宙の景色 */
.space-svg { display: block; width: 100%; height: 100%; }
.star { fill: #ffffff; }
.twinkle-a { animation: twinkle 4.8s ease-in-out infinite; }
.twinkle-b { animation: twinkle 6.4s ease-in-out infinite 1.2s; }
.twinkle-c { animation: twinkle 8.2s ease-in-out infinite 2.6s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* 星雲はぼかし（SVG のフィルター）を使うので動かさない（iPad での負荷を抑える） */
.satellite { animation: satellite-drift 70s linear infinite; }
@keyframes satellite-drift { from { transform: translateX(-160px); } to { transform: translateX(520px); } }
.satellite-light { animation: blink 2.4s steps(2, jump-none) infinite; }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.2; } }
.planet-large-group { animation: planet-float 40s ease-in-out infinite; }
@keyframes planet-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ② 室内：窓の形にくり抜いた壁（大きな影で窓の外側を塗る）・窓枠・照明・床 */
.window {
  position: absolute;
  top: var(--window-top);
  left: var(--window-side);
  right: var(--window-side);
  height: var(--window-height);
  border-radius: 28px 28px 18px 18px;
  box-shadow: 0 0 0 200vmax var(--wall), inset 0 0 0 3px rgba(143, 184, 255, 0.55), inset 0 0 40px rgba(122, 92, 255, 0.35);
}
.window-mullions {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent calc(33.3% - 3px), rgba(150, 170, 255, 0.55) calc(33.3% - 3px), rgba(150, 170, 255, 0.55) calc(33.3% + 3px), transparent calc(33.3% + 3px)),
    linear-gradient(90deg, transparent calc(66.6% - 3px), rgba(150, 170, 255, 0.55) calc(66.6% - 3px), rgba(150, 170, 255, 0.55) calc(66.6% + 3px), transparent calc(66.6% + 3px));
}
.window-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, transparent 28%, transparent 62%, rgba(180, 160, 255, 0.07) 80%, transparent 100%);
}
.ceiling-light {
  position: absolute;
  top: -6%;
  width: 46%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(140, 120, 255, 0.35), transparent);
}
.ceiling-light-left { left: -8%; }
.ceiling-light-right { right: -8%; background: radial-gradient(closest-side, rgba(90, 160, 255, 0.32), transparent); }
.floor {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--floor-top);
  bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #151a4d 0%, #0b0e30 55%, #070920 100%);
  border-top: 2px solid rgba(143, 184, 255, 0.45);
  box-shadow: 0 -12px 40px rgba(110, 120, 255, 0.25);
}
.floor-grid {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 0;
  height: 200%;
  transform-origin: top center;
  transform: perspective(500px) rotateX(62deg);
  background:
    repeating-linear-gradient(90deg, rgba(120, 150, 255, 0.18) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(120, 150, 255, 0.14) 0 1px, transparent 1px 80px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2));
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2));
}
.ambient-glow {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 52%;
  height: 40%;
  background: radial-gradient(closest-side, rgba(120, 140, 255, 0.22), transparent);
}

/* ③ キャラクター配置領域
   ・配置（.actor）：立ち位置（足元）に transform で置く。--x・--y はシーンの割合（%）。cqw・cqh はこのレイヤーの大きさ
   ・表示（.sprite）：見た目。浮く・光るのアニメーションは transform と opacity だけ */
.layer-characters { container-type: size; }
.actor {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(calc(var(--x, 50) * 1cqw), calc(var(--y, 80) * 1cqh));
}
/* 社員 1 人が 1 つのボタン。キャラクター配置領域はタップを受け取らず、ボタンだけが受け取る（会議テーブルの操作を妨げない） */
.sprite {
  --size: 80px;
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  justify-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 4px 6px 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translate(-50%, -100%) scale(var(--depth, 1));
  transform-origin: 50% 100%;
}
.sprite:focus-visible { outline: 3px solid #cfe6ff; outline-offset: 2px; }
.sprite:active .avatar { transform: scale(0.96); }
/* 横向きは床が浅いので、少し小さく */
@media (orientation: landscape) {
  .sprite { --size: 68px; }
}
.sprite-float {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-bottom: 10px;
  animation: float var(--float-seconds, 6s) ease-in-out infinite var(--float-delay, 0s);
  will-change: transform;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sprite .avatar { width: var(--size); height: var(--size); }
.sprite-glow {
  position: absolute;
  top: calc(var(--size) * -0.25);
  left: 50%;
  width: calc(var(--size) * 1.5);
  height: calc(var(--size) * 1.5);
  margin-left: calc(var(--size) * -0.75);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(170, 180, 255, 0.45), transparent);
  opacity: 0.35;
  animation: breathe var(--glow-seconds, 5s) ease-in-out infinite var(--glow-delay, 0s);
}
@keyframes breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } }
.sprite-name {
  position: relative;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--text);
  background: rgba(8, 11, 40, 0.72);
  border: 1px solid var(--line);
}
.sprite-shadow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: calc(var(--size) * 0.9);
  height: calc(var(--size) * 0.22);
  margin-left: calc(var(--size) * -0.45);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 140, 255, 0.35), transparent);
}

/* ④ 会議テーブル：中央下寄りのボタン。ゆっくり光る */
.meeting-table {
  position: absolute;
  left: calc(var(--table-x, 50) * 1%);
  top: calc(var(--table-y, 74) * 1%);
  width: calc(var(--table-half-width, 16) * 2%);
  min-width: 200px;
  max-width: 460px;
  min-height: var(--tap);
  aspect-ratio: 400 / 220;
  transform: translate(-50%, -55%);
  padding: 0;
  border: 0;
  border-radius: 40%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.meeting-table:focus-visible { outline: 3px solid #cfe6ff; outline-offset: 4px; }
.meeting-table:active .table-svg { transform: scale(0.98); }
/* 中身が動くので filter（drop-shadow）はかけない（毎フレームの再計算を避ける）。周りの光は SVG の静止した楕円 */
.table-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.holo-glow { animation: holo-pulse 5s ease-in-out infinite; }
@keyframes holo-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.holo-beam { animation: holo-pulse 5s ease-in-out infinite 0.4s; }
.holo-core { animation: holo-pulse 3.6s ease-in-out infinite; }
.holo-dash { animation: holo-pulse 6s ease-in-out infinite 1.5s; }


/* ---------- プロフィール・社員一覧（<dialog>） ---------- */
.panel {
  width: min(92vw, 440px);
  max-height: 86dvh;
  padding: 20px;
  border: 1px solid rgba(143, 184, 255, 0.5);
  border-radius: 24px;
  color: var(--text);
  background: linear-gradient(160deg, rgba(30, 26, 92, 0.97), rgba(8, 12, 44, 0.97));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(120, 130, 255, 0.25);
  overflow: auto;
}
.panel::backdrop { background: rgba(3, 5, 20, 0.62); }
.panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.panel-avatar .avatar { width: 96px; height: 96px; }
.panel-avatar .avatar.has-art img { border-radius: 24px; }
.panel-names { display: grid; gap: 2px; }
.panel-number { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--glow); }
.panel-title { margin: 0; font-size: 1.4rem; letter-spacing: 0.04em; }
.panel-name-en { font-size: 0.9rem; font-style: italic; color: #d6b8ff; }
.profile-section { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 11, 40, 0.45); }
.section-title { margin: 0 0 8px; font-size: 0.85rem; color: var(--text-sub); letter-spacing: 0.06em; }
.profile-section .panel-note { margin: 6px 0 0; }
.work-status { margin: 0; font-size: 0.95rem; color: var(--text-sub); }
.profile-facts { margin: 0 0 12px; display: grid; gap: 10px; }
.profile-facts > div { display: grid; grid-template-columns: 6em 1fr; gap: 8px; align-items: baseline; }
.profile-facts dt { font-size: 0.85rem; color: var(--text-sub); }
.profile-facts dd { margin: 0; font-size: 1rem; }
.demo-status { color: var(--glow); }
.panel-note { margin: 0 0 14px; font-size: 0.8rem; color: var(--text-sub); }
.panel-actions { display: flex; justify-content: flex-end; gap: 10px; }
.panel-button {
  min-width: 96px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid rgba(143, 184, 255, 0.55);
  border-radius: 999px;
  color: var(--text);
  background: rgba(20, 26, 82, 0.8);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.panel-button.primary { background: linear-gradient(135deg, #5b4ad6, #3563d6); border-color: transparent; }
.panel-button:focus-visible, .staff-row:focus-visible { outline: 3px solid #cfe6ff; outline-offset: 2px; }
.staff-rows { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.staff-row {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: rgba(11, 16, 51, 0.72);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.staff-row .avatar { width: 44px; height: 44px; }
.staff-row-text { display: grid; gap: 2px; }
.staff-row-name { font-weight: 700; }
.staff-row-roles { font-size: 0.82rem; color: var(--text-sub); }
.staff-row-status { font-size: 0.8rem; color: var(--glow); white-space: nowrap; }

/* ---------- 市場調査の依頼（ルミナ） ---------- */
.panel-wide { width: min(94vw, 640px); }
.panel-avatar.small .avatar { width: 64px; height: 64px; }
.work-button { margin-top: 10px; }
.connection { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; font-size: 0.9rem; border: 1px solid var(--line); }
.connection[data-connected="false"] { color: #ffd2e6; border-color: rgba(255, 150, 200, 0.55); background: rgba(80, 20, 60, 0.35); }
.connection[data-connected="true"] { color: #cfe6ff; border-color: rgba(143, 184, 255, 0.6); background: rgba(20, 40, 100, 0.35); }
.connection[data-connected="checking"] { color: var(--text-sub); }
/* ログインの入口（未接続のときだけ出す。/api/login → Access のログイン画面 → オフィスの画面へ戻る） */
.login-row { margin: -4px 0 8px; }
.login-row:has(> .login-link[hidden]) { display: none; }
.login-link { display: inline-block; min-height: 44px; padding: 11px 0; box-sizing: border-box; color: #cfe6ff; font-size: 0.9rem; line-height: 22px; text-decoration: underline; text-underline-offset: 3px; }
.login-link[hidden] { display: none; }
.research-form { display: grid; gap: 6px; margin-bottom: 12px; }
.field-label { font-size: 0.85rem; color: var(--text-sub); }
.field-input {
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid rgba(143, 184, 255, 0.55);
  border-radius: 12px;
  color: var(--text);
  background: rgba(6, 10, 36, 0.85);
  font: inherit;
  font-size: 1rem; /* iPad の Safari が入力時に拡大しない大きさ */
}
.field-input:disabled, .panel-button:disabled { opacity: 0.5; cursor: not-allowed; }
.field-input:focus-visible { outline: 3px solid #cfe6ff; outline-offset: 2px; }
.field-hint { margin: 0; font-size: 0.78rem; color: var(--text-sub); }
.field-error { margin: 0; min-height: 1.2em; font-size: 0.85rem; color: #ffb3d1; }
.research-progress { margin: 0 0 12px; color: var(--glow); }
.research-report { margin: 0 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 11, 40, 0.55); }
.report-warning { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; font-size: 0.85rem; color: #ffe2a8; background: rgba(90, 60, 10, 0.35); }
.report-theme { margin: 0 0 8px; font-weight: 700; }
.report-section h5 { margin: 8px 0 4px; font-size: 0.88rem; color: #d6b8ff; }
.report-group { margin: 10px 0 0; padding: 6px 10px 8px; border-radius: 10px; border: 1px solid rgba(214, 184, 255, 0.25); }
.report-group-title { margin: 0; font-size: 0.92rem; }
.report-facts .report-group-title { color: #b8f0d0; }
.report-outlook { border-style: dashed; }
.report-outlook .report-group-title { color: #ffd59a; }
.report-excluded { margin: 10px 0 0; font-size: 0.8rem; color: var(--text-sub); }
.report-section p, .report-list { margin: 0; }
.report-list { padding-left: 1.2em; display: grid; gap: 4px; }
.report-cite, .report-source-meta, .report-meta { font-size: 0.78rem; color: var(--text-sub); }
.report-sources { margin: 0; padding-left: 1.6em; display: grid; gap: 4px; }
.report-sources a { color: #9fd0ff; overflow-wrap: anywhere; }
.report-comparison { display: block; }
.report-meta { margin: 10px 0 0; }
.report-credit { margin: 10px 0 0; font-size: 0.75rem; color: var(--text-sub); }
.history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.history-item { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.history-theme { font-weight: 700; }
.history-meta { font-size: 0.78rem; color: var(--text-sub); }

/* 縦向き：窓を高く、床を広く */
@media (orientation: portrait) {
  .scene {
    --window-top: 4%;
    --window-side: 6%;
    --window-height: 44%;
    --floor-top: 50%;
    height: clamp(560px, calc(100dvh - 170px), 1200px);
  }
  .window-mullions {
    background: linear-gradient(90deg, transparent calc(50% - 3px), rgba(150, 170, 255, 0.55) calc(50% - 3px), rgba(150, 170, 255, 0.55) calc(50% + 3px), transparent calc(50% + 3px));
  }
}

/* 動きを減らす設定：アニメーションをすべて止める（光り方は止まった状態で表示） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}