/*
  infraone Chat Site UI (chat.css)
  ------------------------------------------------------------
  目的：従来の“クリック前提サイト”ではなく、“質問前提のチャットサイト”を成立させる。
  - 主役：常時表示のチャット
  - 補助：会話を支えるカード/要約パネル
  - KPI：滞在時間ではなく、解決率・対話数・次アクション到達

  NOTE:
  - iOS Safariの入力ズーム対策：input/textareaはfont-size:16px以上
  - 画面はみ出し対策：flex子要素にmin-width:0 / wrap
  - アクセシビリティ：focus-visible / aria-live / reduced-motion
*/

:root{
  /* Typography */
  --io-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", Arial, sans-serif;
  --io-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Layout */
  --io-max-width: 100%;
  --io-gap: 16px;

  /* Brand (infraone) */
  --io-brand-rgb: 255 94 19;  /* #ff5e13 */
  --io-user-rgb: 37 99 235;   /* blue (user bubble) */
  --io-success-rgb: 16 185 129;
  --io-danger-rgb: 239 68 68;

  --io-accent: rgb(var(--io-brand-rgb));
  --io-success: rgb(var(--io-success-rgb));
  --io-danger: rgb(var(--io-danger-rgb));

  /* Light theme */
  --io-bg: #f6f7fb;
  --io-surface: #ffffff;
  --io-surface-2: #f8fafc;
  --io-text: #0b1324;
  --io-muted: #334155;
  --io-muted-2: #64748b;
  --io-border: rgba(2, 6, 23, 0.14);
  --io-border-strong: rgba(2, 6, 23, 0.22);

  /* Radius / shadow */
  --io-radius-sm: 10px;
  --io-radius-md: 14px;
  --io-radius-lg: 18px;
  --io-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.10);
  --io-shadow-md: 0 14px 34px rgba(2, 6, 23, 0.14);

  /* Focus */
  --io-focus-ring: 0 0 0 4px rgb(var(--io-brand-rgb) / 0.22);

  /* Safe-area (iOS notch / home indicator) */
  --io-safe-top: env(safe-area-inset-top, 0px);
  --io-safe-right: env(safe-area-inset-right, 0px);
  --io-safe-bottom: env(safe-area-inset-bottom, 0px);
  --io-safe-left: env(safe-area-inset-left, 0px);

  /* Sizing */
  --io-header-h: 64px; /* sticky header base */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --io-bg: #070b14;
    --io-surface: rgba(255,255,255,0.07);
    --io-surface-2: rgba(255,255,255,0.05);
    --io-text: #e5e7eb;
    --io-muted: #cbd5e1;
    --io-muted-2: #9ca3af;
    --io-border: rgba(255,255,255,0.16);
    --io-border-strong: rgba(255,255,255,0.28);
    --io-shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
    --io-shadow-md: 0 18px 44px rgba(0,0,0,0.55);
    --io-focus-ring: 0 0 0 4px rgb(var(--io-brand-rgb) / 0.30);
  }
}

:root[data-theme="dark"]{
    --io-bg: #070b14;
    --io-surface: rgba(255,255,255,0.07);
    --io-surface-2: rgba(255,255,255,0.05);
    --io-text: #e5e7eb;
    --io-muted: #cbd5e1;
    --io-muted-2: #9ca3af;
    --io-border: rgba(255,255,255,0.16);
    --io-border-strong: rgba(255,255,255,0.28);
    --io-shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
    --io-shadow-md: 0 18px 44px rgba(0,0,0,0.55);
    --io-focus-ring: 0 0 0 4px rgb(var(--io-brand-rgb) / 0.30);
}

/* Base */
html, body{ height: 100%; }
*{ box-sizing: border-box; }

body{
  font-family: var(--io-font-sans);
  color: var(--io-text);
  background:
    radial-gradient(1100px 620px at 8% 0%,  rgb(var(--io-brand-rgb) / 0.12), transparent 60%),
    radial-gradient(900px 520px at 98% 10%, rgb(var(--io-user-rgb) / 0.10), transparent 55%),
    var(--io-bg);
}

a{ color: var(--io-accent); text-underline-offset: 3px; }
a:hover{ text-decoration: underline; }

/* Accessible focus ring */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--io-focus-ring);
  border-radius: 10px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Prefer-contrast */
@media (prefers-contrast: more){
  :root{
    --io-border: rgba(2, 6, 23, 0.26);
    --io-border-strong: rgba(2, 6, 23, 0.36);
  }
}

/* Utility */
.io-sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Header (minimal links only) */
.io-chat-header{
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: var(--io-safe-top);
  border-bottom: 1px solid var(--io-border);
  background: rgba(255,255,255,0.90);
}
@media (prefers-color-scheme: dark){
  .io-chat-header{ background: rgba(7, 11, 20, 0.86); }
}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .io-chat-header{ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

.io-chat-header__inner{
  max-width: var(--io-max-width);
  margin: 0 auto;
  padding: 10px calc(16px + var(--io-safe-right)) 10px calc(16px + var(--io-safe-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--io-header-h);
}

.io-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width: 0;
}
.io-brand img{ height: 40px; width: auto; display:block; }

.io-mini-links{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.io-mini-links a{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration:none;
  font-weight: 800;
  color: var(--io-text) !important;
  line-height: 1;
}
.io-mini-links a:hover{
  border-color: var(--io-border);
  background: var(--io-surface);
  text-decoration: none;
}
.io-mini-links .io-mini-links__primary{
  border-color: rgb(var(--io-brand-rgb) / 0.35);
  background: rgb(var(--io-brand-rgb) / 0.10);
  color: var(--io-text);
}


/* Header navigation (site links + dropdowns) */
.io-site-nav{
  display:flex;
  gap: 10px;
  align-items:center;
  /* ヘッダー内で中央寄りに見えないよう、残り幅を取りつつ右寄せにする */
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  justify-content:flex-end;
}
@media (max-width: 992px){
  .io-site-nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .io-site-nav::-webkit-scrollbar{ height: 6px; }
}

.io-nav-link,
.io-nav-drop > summary,
.io-theme-toggle{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration:none;
  font-weight: 800;
  color: var(--io-text) !important;
  line-height: 1;
  background: transparent;
  user-select: none;
}

.io-nav-link[aria-current="page"]{
  border-color: rgb(var(--io-brand-rgb) / 0.35);
  background: rgb(var(--io-brand-rgb) / 0.10);
}

.io-nav-link:hover,
.io-nav-drop > summary:hover,
.io-theme-toggle:hover{
  border-color: var(--io-border);
  background: var(--io-surface);
  text-decoration:none;
}

.io-nav-drop{
  position: relative;
}
.io-nav-drop > summary{
  cursor: pointer;
  list-style: none;
}
.io-nav-drop > summary::-webkit-details-marker{ display:none; }

.io-nav-drop[open] > summary{
  border-color: rgb(var(--io-brand-rgb) / 0.35);
  background: rgb(var(--io-brand-rgb) / 0.10);
}

.io-nav-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--io-surface);
  border: 1px solid var(--io-border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
  z-index: 1001;
}

.io-nav-menu a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--io-text);
  text-decoration:none;
  font-weight: 800;
  white-space: nowrap;
}

.io-nav-menu a:hover{
  background: var(--io-surface-2);
}

/* --------------------------------
   Dark-mode dropdown menu contrast
   - Recruit menu / Tools menu (desktop)
   - Ensure background is solid black and text is white
   - Applies to OS-dark default and manual dark theme
   -------------------------------- */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .io-nav-menu{
    background: #000;
    border-color: rgba(255,255,255,0.18);
  }
  :root:not([data-theme="light"]) .io-nav-drop > summary.io-nav-link{
    background: #000;
    border-color: rgba(255,255,255,0.18);
    color: #fff !important;
  }
  :root:not([data-theme="light"]) .io-nav-menu a{
    color: #fff;
  }
  :root:not([data-theme="light"]) .io-nav-menu a:hover{
    background: rgba(255,255,255,0.08);
  }
}

:root[data-theme="dark"] .io-nav-menu{
  background: #000;
  border-color: rgba(255,255,255,0.18);
}
:root[data-theme="dark"] .io-nav-drop > summary.io-nav-link{
  background: #000;
  border-color: rgba(255,255,255,0.18);
  color: #fff !important;
}
:root[data-theme="dark"] .io-nav-menu a{
  color: #fff;
}
:root[data-theme="dark"] .io-nav-menu a:hover{
  background: rgba(255,255,255,0.08);
}

/* Theme toggle button */
.io-theme-toggle{
  border-color: rgb(var(--io-brand-rgb) / 0.35);
  background: rgb(var(--io-brand-rgb) / 0.10);
}

@media (max-width: 520px){
  .io-nav-menu{
    right: auto;
    left: 0;
  }
}

/* Layout */
.io-chat-layout{
  max-width: var(--io-max-width);
  margin: 0 auto;
  padding: 16px calc(16px + var(--io-safe-right)) 24px calc(16px + var(--io-safe-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--io-gap);
}
@media (max-width: 992px){
  .io-chat-layout{
    grid-template-columns: 1fr;
  }
}

/* Chat card */
.io-chat{
  border: 1px solid var(--io-border);
  border-radius: var(--io-radius-lg);
  background: var(--io-surface);
  box-shadow: var(--io-shadow-md);
  padding: 14px;
  display:flex;
  flex-direction: column;
  min-height: calc(100vh - 110px);
  min-height: calc(100svh - 110px);
  overflow: hidden; /* keep rounded corners clean */
}

.io-chat__top{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.io-chat__lead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.io-chat__title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}
.io-chat__sub{
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--io-muted);
}

/* History */
.io-chat__history{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--io-radius-md);
  background: var(--io-surface-2);
  border: 1px solid var(--io-border);
  scroll-behavior: smooth;
}

/* Message */
.io-msg{
  display:flex;
  gap: 10px;
  margin: 12px 0;
  align-items:flex-start;
}

/* user message → right aligned */
.io-msg--user{ flex-direction: row-reverse; }

.io-msg__role{
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--io-border);
  background: var(--io-surface);
  line-height: 1;
  box-shadow: var(--io-shadow-sm);
  color: var(--io-muted);
}

.io-msg__bubble{
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--io-border);
  border-radius: var(--io-radius-md);
  padding: 12px 12px;
  line-height: 1.75;
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--io-shadow-sm);
  background: var(--io-surface);
}

.io-msg--ai .io-msg__role{
  color: rgb(var(--io-brand-rgb));
  border-color: rgb(var(--io-brand-rgb) / 0.28);
  background: rgb(var(--io-brand-rgb) / 0.10);
}
.io-msg--ai .io-msg__bubble{
  border-color: rgb(var(--io-brand-rgb) / 0.22);
  background: rgb(var(--io-brand-rgb) / 0.06);
}

.io-msg--user .io-msg__role{
  color: rgb(var(--io-user-rgb));
  border-color: rgb(var(--io-user-rgb) / 0.26);
  background: rgb(var(--io-user-rgb) / 0.10);
}
.io-msg--user .io-msg__bubble{
  border-color: rgb(var(--io-user-rgb) / 0.22);
  background: rgb(var(--io-user-rgb) / 0.06);
}

/* Chips (quick questions) */
.io-chat__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.io-chip{
  appearance: none;
  border: 1px solid var(--io-border);
  background: var(--io-surface);
  color: var(--io-text);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--io-shadow-sm);
  white-space: nowrap;
}
.io-chip:hover{
  border-color: rgb(var(--io-brand-rgb) / 0.35);
  background: rgb(var(--io-brand-rgb) / 0.08);
}

.io-chip:active{ transform: translateY(1px); }

/* Status line */
.io-chat__status{
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--io-muted-2);
  min-height: 16px;
}
.io-chat__status strong{ color: var(--io-text); }

/* Composer */
.io-chat__composer{
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: calc(12px + var(--io-safe-bottom));
  border-top: 1px solid var(--io-border);
  background: var(--io-surface);
}

/* Form (overflow safe) */
.io-chat__form{
  display:flex;
  gap: 10px;
  align-items:flex-end;
  flex-wrap: wrap; /* <= overflow prevention */
}

.io-chat__input{
  flex: 1 1 auto;
  min-width: 0;         /* <= overflow prevention */
  width: auto;
  min-height: 48px;
  max-height: 160px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--io-border-strong);
  background: var(--io-surface-2);
  color: var(--io-text);
  font-size: 16px;      /* iOS zoom防止 */
  line-height: 1.4;
  resize: none;
  outline: none;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}

.io-chat__input::placeholder{ color: var(--io-muted-2); }

.io-chat__send{
  flex: 0 0 auto;
  border-radius: 14px;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgb(var(--io-brand-rgb) / 0.38);
  background: rgb(var(--io-brand-rgb) / 0.12);
  color: var(--io-text);
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}
.io-chat__send:hover{
  background: rgb(var(--io-brand-rgb) / 0.22);
  border-color: rgb(var(--io-brand-rgb) / 0.45);
}
.io-chat__send:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

.io-chat__notice{
  margin: 10px 0 0;
  color: var(--io-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* Suggestions (next questions) */
.io-suggestions{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.io-suggestion{
  appearance: none;
  border: 1px solid var(--io-border);
  background: var(--io-surface);
  color: var(--io-text);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  line-height: 1;
}
.io-suggestion:hover{
  border-color: rgb(var(--io-user-rgb) / 0.35);
  background: rgb(var(--io-user-rgb) / 0.08);
}

/* Side panel (support) */
.io-side{
  border: 1px solid var(--io-border);
  border-radius: var(--io-radius-lg);
  background: var(--io-surface);
  box-shadow: var(--io-shadow-md);
  padding: 14px;
  height: calc(100vh - 110px);
  height: calc(100svh - 110px);
  position: sticky;
  top: calc(var(--io-header-h) + var(--io-safe-top) + 8px);
  overflow: auto;
}
@media (max-width: 992px){
  .io-side{ position: static; height: auto; }
}

.io-side__block{ margin-bottom: 18px; }
.io-side__title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .03em;
}

.io-summary{
  font-family: var(--io-font-mono);
  font-size: 12px;
  line-height: 1.65;
  background: var(--io-surface-2);
  border: 1px solid var(--io-border);
  border-radius: var(--io-radius-md);
  padding: 10px 10px;
  white-space: pre-wrap;
}

.io-cards .card{
  border-radius: 14px;
  border-color: var(--io-border);
  box-shadow: var(--io-shadow-sm);
}

/* Mobile refinements */
@media (max-width: 540px){
  .io-chat-layout{ padding: 12px calc(12px + var(--io-safe-right)) 18px calc(12px + var(--io-safe-left)); }
  .io-chat{ padding: 12px; }
  .io-chat__history{ padding: 10px; }
  .io-msg__bubble{ font-size: 15px; }

  /* Make send button full-width to avoid horizontal overflow */
  .io-chat__send{ width: 100%; }
}

/* Small mobile: chips become horizontally scrollable (less vertical) */
@media (max-width: 420px){
  .io-chat__chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .io-chip{ flex: 0 0 auto; }
}

/* NoScript alert (bootstrap compatible) */
noscript .alert{ margin-top: 14px; }


/* ==============================
   Card readability (dark/light)
   ============================== */
.io-cards .card{
  background: var(--io-surface-2);
  color: var(--io-text);
}
.io-cards .card .card-title,
.io-cards .card .card-subtitle,
.io-cards .card .card-text,
.io-cards .card .text-muted,
.io-cards .card .card-body{
  color: var(--io-text);
}
.io-cards .card .text-muted{ opacity: .78; }
.io-cards .card a{ color: var(--io-accent); text-decoration: none; }
.io-cards .card ul{ margin-bottom: 0; padding-left: 1.15rem; }

/* =======================================================================
   Patch: readability / cards contrast / loading indicator (2026-01)
   - Support panel cards were too white and hard to read.
   - While waiting for AI, show clear progress (not just "…").
   ======================================================================= */

:root{
  /* Support panel cards (light) */
  --io-card-bg: rgba(255, 94, 19, 0.09);
  --io-card-border: rgba(255, 94, 19, 0.28);
  --io-card-shadow: 0 14px 34px rgba(2, 6, 23, 0.10);
  --io-card-link-bg: rgba(255, 94, 19, 0.16);
  --io-card-link-border: rgba(255, 94, 19, 0.46);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* Support panel cards (dark) */
    --io-card-bg: rgba(255, 94, 19, 0.18);
    --io-card-border: rgba(255, 94, 19, 0.38);
    --io-card-shadow: 0 18px 46px rgba(0, 0, 0, 0.58);
    --io-card-link-bg: rgba(255, 94, 19, 0.24);
    --io-card-link-border: rgba(255, 94, 19, 0.54);
  }
}

:root[data-theme="dark"]{
    /* Support panel cards (dark) */
    --io-card-bg: rgba(255, 94, 19, 0.18);
    --io-card-border: rgba(255, 94, 19, 0.38);
    --io-card-shadow: 0 18px 46px rgba(0, 0, 0, 0.58);
    --io-card-link-bg: rgba(255, 94, 19, 0.24);
    --io-card-link-border: rgba(255, 94, 19, 0.54);
}

/* Headline / underline (explicit contrast) */
.io-chat__headline{
  margin: 0;
  font-weight: 900;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--io-text);
}
.io-chat__sub{
  margin: 6px 0 0;
  color: var(--io-muted);
  font-size: 14px;
  line-height: 1.6;
}
.io-underline{
  color: var(--io-text);
  padding: 0 2px;
  border-radius: 4px;
  background: linear-gradient(transparent 70%, rgba(255, 94, 19, 0.30) 70%);
}

/* First-run: make it obvious where to type */
.io-input-guide{
  margin: 10px 0 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 94, 19, 0.10);
  border: 1px solid rgba(255, 94, 19, 0.26);
  color: var(--io-text);
  font-weight: 800;
}
.io-input-guide__arrow{ font-size: 18px; margin-right: 6px; }

.io-first-run .io-chat__input{
  border-color: rgba(255, 94, 19, 0.72) !important;
  box-shadow: 0 0 0 5px rgba(255, 94, 19, 0.18);
}
@media (prefers-reduced-motion: no-preference){
  .io-first-run .io-chat__input{ animation: ioPulseGlow 1.8s ease-in-out infinite; }
  @keyframes ioPulseGlow{
    0%,100%{ box-shadow: 0 0 0 5px rgba(255, 94, 19, 0.16); }
    50%{ box-shadow: 0 0 0 7px rgba(255, 94, 19, 0.22); }
  }
}
@media (prefers-reduced-motion: reduce){
  .io-first-run .io-chat__input{ animation: none; }
}

/* Side hint (avoid inherited low-contrast grays from theme css) */
.io-side__hint{
  margin: 6px 0 10px;
  color: var(--io-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* Cards: stronger contrast and visible action button */
.io-cards .card{
  background: var(--io-card-bg) !important;
  border: 1px solid var(--io-card-border) !important;
  border-radius: 16px;
  box-shadow: var(--io-card-shadow);
}
.io-cards .card-body{
  padding: 12px 12px 10px;
  color: var(--io-text);
}
.io-cards .card .font-weight-bold{
  font-weight: 900;
  color: var(--io-text);
  margin-bottom: 6px;
}

/* The base theme removes list bullets globally — restore inside cards */
.io-cards ul{ padding-left: 1.15rem !important; margin: 0 0 10px !important; }
.io-cards li{
  list-style: disc !important;
  display: list-item;
  margin: 0 0 4px;
  color: var(--io-text);
}

.io-card-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--io-card-link-bg);
  border: 1px solid var(--io-card-link-border);
  color: var(--io-accent);
  font-weight: 900;
  text-decoration: none;
}
.io-card-link:hover{ text-decoration: none; filter: brightness(0.98); }

.io-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.io-card-action {
  appearance: none;
  border: 1px solid var(--io-border);
  background: var(--io-surface-2);
  color: var(--io-text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.io-card-action:hover {
  background: var(--io-surface);
}
.io-card-link:active{ transform: translateY(1px); }
.io-card-link:focus-visible{ outline: none; box-shadow: 0 0 0 5px var(--io-focus); }

/* Loading state (clear progress, not just "…") */
.io-msg--loading .io-msg__role{ color: var(--io-muted); }
.io-msg--loading .io-msg__bubble{
  color: var(--io-muted);
  background: rgba(2, 6, 23, 0.02);
}
@media (prefers-color-scheme: dark){
  .io-msg--loading .io-msg__bubble{ background: rgba(255, 255, 255, 0.04); }
}
.io-msg--loading .io-msg__bubble::after{
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border: 2px solid rgba(255, 94, 19, 0.30);
  border-top-color: rgba(255, 94, 19, 0.95);
  border-radius: 50%;
  animation: ioSpin 0.9s linear infinite;
  vertical-align: -2px;
}
@keyframes ioSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .io-msg--loading .io-msg__bubble::after{ animation: none; }
}

/* =======================================================================
   Theme add-on: Dark scheme contrast (ONLY when dark is active)
   - Keeps light mode clean (no dark panels)
   - Preserves dark mode readability for side panel / cards / AI bubble
   ======================================================================= */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --io-support-panel-bg: rgba(3, 7, 18, 0.92);
    --io-support-surface-bg: rgba(11, 19, 36, 0.92);
    --io-support-border: rgb(var(--io-brand-rgb) / 0.55);
    --io-support-text: rgba(255,255,255,0.96);
    --io-support-muted: rgba(255,255,255,0.78);

    --io-card-link-bg: rgb(var(--io-brand-rgb) / 0.22);
    --io-card-link-border: rgb(var(--io-brand-rgb) / 0.55);
    --io-card-link-text: rgba(255,255,255,0.96);
  }

  :root:not([data-theme="light"]) .io-side{
    background: var(--io-support-panel-bg);
    border-color: var(--io-support-border);
  }
  :root:not([data-theme="light"]) .io-side__title,
  :root:not([data-theme="light"]) .io-summary{
    color: var(--io-support-text);
  }
  :root:not([data-theme="light"]) .io-summary{
    background: var(--io-support-surface-bg);
    border-color: var(--io-support-border);
  }

  :root:not([data-theme="light"]) .io-cards .card{
    background: var(--io-support-surface-bg);
    border-color: var(--io-support-border);
  }
  :root:not([data-theme="light"]) .io-cards .card .card-body{
    color: var(--io-support-text);
  }

  :root:not([data-theme="light"]) .io-msg--ai .io-msg__bubble{
    background: var(--io-support-surface-bg);
    border-color: var(--io-support-border);
    color: var(--io-support-text);
  }

  :root:not([data-theme="light"]) .io-msg--ai .io-msg__role{
    color: rgba(255,255,255,0.96);
    background: var(--io-card-link-bg);
    border-color: var(--io-card-link-border);
  }
}

:root[data-theme="dark"]{
  --io-support-panel-bg: rgba(3, 7, 18, 0.92);
  --io-support-surface-bg: rgba(11, 19, 36, 0.92);
  --io-support-border: rgb(var(--io-brand-rgb) / 0.55);
  --io-support-text: rgba(255,255,255,0.96);
  --io-support-muted: rgba(255,255,255,0.78);

  --io-card-link-bg: rgb(var(--io-brand-rgb) / 0.22);
  --io-card-link-border: rgb(var(--io-brand-rgb) / 0.55);
  --io-card-link-text: rgba(255,255,255,0.96);
}

:root[data-theme="dark"] .io-side{
  background: var(--io-support-panel-bg);
  border-color: var(--io-support-border);
}
:root[data-theme="dark"] .io-side__title,
:root[data-theme="dark"] .io-summary{
  color: var(--io-support-text);
}
:root[data-theme="dark"] .io-summary{
  background: var(--io-support-surface-bg);
  border-color: var(--io-support-border);
}

:root[data-theme="dark"] .io-cards .card{
  background: var(--io-support-surface-bg);
  border-color: var(--io-support-border);
}
:root[data-theme="dark"] .io-cards .card .card-body{
  color: var(--io-support-text);
}

:root[data-theme="dark"] .io-msg--ai .io-msg__bubble{
  background: var(--io-support-surface-bg);
  border-color: var(--io-support-border);
  color: var(--io-support-text);
}

:root[data-theme="dark"] .io-msg--ai .io-msg__role{
  color: rgba(255,255,255,0.96);
  background: var(--io-card-link-bg);
  border-color: var(--io-card-link-border);
}

/* --------------------------------
   Mobile hamburger menu (index.html)
   -------------------------------- */

.io-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.io-hamburger {
  display: none; /* shown on small screens */
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgb(var(--io-brand-rgb) / 0.35);
  background: rgb(var(--io-brand-rgb) / 0.18);
  color: var(--io-text);
  cursor: pointer;
}

.io-hamburger:focus {
  outline: 2px solid rgb(var(--io-brand-rgb) / 0.40);
  outline-offset: 2px;
}

.io-hamburger__lines {
  position: relative;
  display: block;
  width: 20px;
  height: 3px;
  background: currentColor;
}

.io-hamburger__lines::before,
.io-hamburger__lines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: currentColor;
}

.io-hamburger__lines::before {
  top: -7px;
}

.io-hamburger__lines::after {
  top: 7px;
}

.io-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1090;
}

@media (max-width: 992px) {
  header.io-chat-header nav.io-site-nav {
    display: none;
  }

  .io-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .io-menu-open header.io-chat-header nav.io-site-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    background: var(--io-surface);
    border: 1px solid var(--io-border);
    border-radius: 16px;
    padding: 12px;
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px));
    overflow: auto;
    z-index: 1100;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.20);
  }

  .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-link,
  .io-menu-open header.io-chat-header nav.io-site-nav .io-theme-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-drop {
    width: 100%;
  }

  .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-drop > summary {
    width: 100%;
    justify-content: space-between;
  }

  .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-menu {
    position: static;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border: 1px solid var(--io-border);
    margin-top: 8px;
  }
}


/* Mobile menu visibility / contrast tweaks */
@media (max-width: 992px) {
  /* Thicker hamburger lines for better visibility */
  .io-hamburger::before,
  .io-hamburger::after,
  .io-hamburger span {
    height: 3px;
    opacity: 0.95;
  }

  /* Stronger, readable background for the slide-down menu */
  .io-menu-open header.io-chat-header nav.io-site-nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Forced dark (manual): keep background solid black, text white */
  :root[data-theme="dark"] .io-menu-open header.io-chat-header nav.io-site-nav {
    background: #000 !important;
    border-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Mobile menu: keep items opaque (no translucent hover/active) */
  :root[data-theme="dark"] .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-link:hover {
    background: #111 !important;
  }
  :root[data-theme="dark"] .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-link[aria-current="page"] {
    background: #111 !important;
  }


  :root[data-theme="dark"] .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-link,
  :root[data-theme="dark"] .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-submenu a,
  :root[data-theme="dark"] .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-drop > summary {
    color: #ffffff !important;
  }
  :root[data-theme="dark"] .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-menu {
    background: #000;
    border-color: rgba(255,255,255,0.18);
  }

  /* Forced light: keep readable white panel */
  :root[data-theme="light"] .io-menu-open header.io-chat-header nav.io-site-nav {
    background: rgba(255, 255, 255, 0.98);
  }

  /* Ensure link text stays readable even if other global CSS kicks in */
  .io-nav-link { color: var(--io-text) !important; }
  .io-nav-submenu a { color: var(--io-text) !important; }
}

/* OS dark default (no explicit data-theme), but allow forced light to win */
@media (max-width: 992px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .io-menu-open header.io-chat-header nav.io-site-nav {
      background: #000 !important;
      border-color: rgba(255,255,255,0.16);
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    :root:not([data-theme="light"]) .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-link:hover {
      background: #111 !important;
    }
    :root:not([data-theme="light"]) .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-link[aria-current="page"] {
      background: #111 !important;
    }

  :root:not([data-theme="light"]) .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-link,
  :root:not([data-theme="light"]) .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-submenu a,
  :root:not([data-theme="light"]) .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-drop > summary {
    color: #ffffff !important;
  }
  :root:not([data-theme="light"]) .io-menu-open header.io-chat-header nav.io-site-nav .io-nav-menu {
    background: #000;
    border-color: rgba(255,255,255,0.18);
  }
}


:root[data-theme="dark"] .io-hamburger{
  background: rgb(var(--io-brand-rgb) / 0.40);
  border-color: rgb(var(--io-brand-rgb) / 0.85);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}


/* ===============================
   Theme toggle overrides
   - Ensure manual theme (data-theme) also updates header/nav (Edge/Windowsでの不一致対策)
   =============================== */
:root[data-theme="dark"] .io-chat-header{
  background: rgba(7, 11, 20, 0.86);
  border-bottom-color: rgba(255,255,255,0.08);
}
:root[data-theme="light"] .io-chat-header{
  background: rgba(255,255,255,0.90);
  border-bottom-color: rgba(0,0,0,.08);
}

:root[data-theme="dark"] .io-hamburger{
  background: rgb(var(--io-brand-rgb) / 0.22);
  border-color: rgb(var(--io-brand-rgb) / 0.90);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
:root[data-theme="light"] .io-hamburger{
  background: rgb(var(--io-brand-rgb) / 0.14);
  border-color: rgb(var(--io-brand-rgb) / 0.50);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

:root[data-theme="dark"] .io-mnav-backdrop{ background: rgba(0,0,0,0.55); }
:root[data-theme="light"] .io-mnav-backdrop{ background: rgba(0,0,0,0.30); }

:root[data-theme="dark"] .io-mnav-panel{
  background: rgba(15,23,42,0.98);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 20px 60px rgba(0,0,0,0.60);
}
:root[data-theme="light"] .io-mnav-panel{
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 18px 52px rgba(0,0,0,0.18);
}

@media (forced-colors: active){
  .io-chat-header{ background: Canvas; border-bottom: 1px solid CanvasText; }
  .io-mini-links a{ color: LinkText !important; opacity: 1 !important; }
  .io-hamburger{ background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .io-mnav-panel{ background: Canvas; border: 1px solid CanvasText; }
  .io-mnav-item{ color: CanvasText !important; }
}