:root {
  --bg:#0f172a; --card:#111827; --text:#e5e7eb; --muted:#fff; --accent:#22d3ee;
}

* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0;
  background:linear-gradient(180deg,#0b1022,#0f172a 40%,#0b1022);
background-image: url("/static/bk/backtestimg.png");
background-size: cover;
opacity: 1; /* 50%透明 */
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

/* Header */
header {
  padding:14px 16px;
  display:flex; gap:12px; align-items:center;
  border-bottom:1px solid #1f2937;
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(6px);
  background:#0f172ab3;
}
header h1 { font-size:18px; margin:0; font-weight:700; letter-spacing:.3px; }
header .status { font-size:12px; color:var(--muted); margin-left:auto; }
.badge { font-size:11px; color:#0b1224; background:var(--accent); padding:4px 8px; border-radius:999px; font-weight:700; letter-spacing:.3px; }

/* Layout */
main {
  max-width:1100px; margin:12px auto 16px; padding:0 16px;
  display:grid; grid-template-columns: 360px 1fr; gap:16px;
}
.avatarCard {
  background:var(--card); border:1px solid #1f2937; border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; min-height:0;opacity: 0.5;

}
.avatarCard .imgWrap {
  aspect-ratio: 4/5; background:#0b1022; display:flex; align-items:center; justify-content:center;
}
.avatarCard img { max-width:100%; max-height:100%; display:block; }
.avatarCard .meta {
  padding:10px 12px; border-top:1px solid #1f2937; font-size:12px; color:var(--muted);
  display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;
}

.chat { display:flex; flex-direction:column; gap:10px; min-height:0; 
  background:linear-gradient(180deg,#0b1022,#0f172a 40%,#0b1022);}
.chatLog {
  background:var(--card); border:1px solid #1f2937; border-radius:14px;
  padding:14px; height:52vh; min-height:320px; overflow:auto; line-height:1.6; scroll-behavior:smooth;
}
.msg { display:flex; gap:10px; margin:6px 0; align-items:flex-start; }
.msg .who { flex:0 0 52px; text-align:right; color:var(--muted); font-size:12px; padding-top:6px; }
.msg .bubble { background:#0b1224; border:1px solid #1f2937; padding:10px 12px; border-radius:12px; max-width:100%; word-break:break-word; }
.msg.you .bubble { background:#0f1b36; border-color:#223556; }
.msg.bot .bubble { background:#0d1a29; }

/* Toolbar
   - 1段目：入力行（幅いっぱい）
   - 2段目：ボタン群（折り返しで2段目以降へ）
*/
.toolbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.inputRow {
  display:flex; gap:8px; align-items:center;
  flex: 1 1 100%;       /* ← 1段目として全幅を確保 */
  min-width: 260px;
}
.inputRow input[type="text"] {
  flex:1; padding:12px 14px; border-radius:12px;
  border:1px solid #243244; background:#0b1224; color:var(--text); outline:none;
}
.inputRow input[type="text"]::placeholder{ color:#5b708e; }

.btn {
  padding:10px 14px; border-radius:12px;
  border:1px solid #1f2937; background:linear-gradient(180deg,#111b2c,#101828);
  color:var(--text); cursor:pointer;
  flex: 0 1 auto;      /* ← 入力行の下に並び、はみ出したら折り返し */
}
.btn:disabled { opacity:.6; cursor:not-allowed; }

.hint { font-size:12px; color:var(--muted); margin-top:6px; }
.counter { font-size:12px; color:var(--muted); margin-left:8px; }

/* Search recommendations list */
.recoList {
  margin:8px 0 0 62px;
  display:grid; gap:8px;
}
.recoItem {
  background:#0b1224; border:1px solid #223556; border-radius:10px; padding:10px;
}
.recoItem a { color:#22d3ee; text-decoration:none; word-break:break-all; }
.recoItem small { color:#94a3b8; display:block; margin-top:4px; }

/* Language selector */
.lang { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
select { background:#0b1224; border:1px solid #243244; color:var(--text); padding:6px 8px; border-radius:8px; }

/* ---251107--- */
/* Modal */
.modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.modal[open] { display: block; }
.modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(92vw, 720px); max-height: 80vh; overflow:auto;
  background: var(--card); border: 1px solid #1f2937; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.modal__hdr { display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; border-bottom: 1px solid #1f2937; }
.modal__x { background: none; border: none; font-size: 20px; color: var(--text); cursor: pointer; }
.recoList { margin: 10px; display: grid; gap: 8px; }
.recoItem { background:#0b1224; border:1px solid #223556; border-radius:10px; padding:10px; }
.recoItem a { color:#22d3ee; text-decoration:none; word-break:break-all; }
.recoItem small { color:#94a3b8; display:block; margin-top:4px; font-size:12px; }



:root { --layer-alpha: .0; } /* ここを .35 や .6 に変更 */
/* avatarCard の不透明化をやめて、背景だけ半透明に */
.avatarCard{
  opacity: 1 !important; /* ← 中身まで薄くなるのを解除 */
  background: rgba(17,24,39,.var(--layer-alpha)) !important; /* ほんのり透過 */
  border-color: rgba(31,41,55,.var(--layer-alpha)) !important;
  backdrop-filter: blur(2px) saturate(120%);
}
/* 画像ラッパのベタ塗りをやめる */
.avatarCard .imgWrap{ background: transparent !important; }

/* chat セクションのグラデ塗りつぶしを無効化して透過に */
section.chat{
 background: transparent !important; 
border-color: rgba(31,41,55,.var(--layer-alpha)) !important;
}

/* チャットログの箱だけ半透明に（テキストはそのままクッキリ） */
.chatLog{
  background: rgba(17,24,39,var(--layer-alpha)) !important;
  border-color: rgba(31,41,55,var(--layer-alpha)) !important;
  backdrop-filter: blur(2px) saturate(120%);
}

#clockLabel{
  margin-left: auto;
  white-space: nowrap;
  opacity: .9;
  font-variant-numeric: tabular-nums;
}


/* --- Responsive --- */
@media (max-width: 1024px){
  /* ボタンに最小幅を持たせて、2段に気持ちよく折り返す */
  .btn { min-width: 110px; }
}

@media (max-width: 840px){
:root { --header-h: 56px; } /* 初期値（JSで実寸に上書き） */
  body { padding-top: var(--header-h); } /* 固定ヘッダーの分だけ下げる */

  header.autoHide{
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0; right: 0;
    height: auto;
    z-index: 20;
    transform: translateY(0);
    transition: transform .28s ease;
    /* 透明度を少し下げて背景と馴染ませる場合は以下を有効化 */
    /* backdrop-filter:saturate(180%) blur(6px); */
  }
  header.autoHide.hide{
    transform: translateY(calc(-100% - 6px)); /* 画面外へ */
  }
  main {
    max-width:100%; margin:0;
    padding:0 0 env(safe-area-inset-bottom);
    height: calc(100vh - 56px);
    display:grid; grid-template-columns: 1fr; grid-template-rows: 48% 52%;
    gap:8px;
  }
  .avatarCard { border-radius:0; border-left:none; border-right:none; }
  .avatarCard .imgWrap { aspect-ratio:auto; height:100%; }
  .chat { padding:0 12px; }
  .chatLog { height:100%; min-height:auto; }
  .msg .who { flex:0 0 44px; font-size:11px; }

  /* スマホ時：ボタンは “3列グリッド風” に並ぶ */
  .toolbar { gap:8px; }
  .inputRow { flex:1 1 100%; }
  .btn {
    flex: 1 1 calc(33.333% - 8px);
    text-align:center;
  }

  /* 検索カードの左マージンを詰める（who欄が狭くなるため） */
  .recoList { margin-left: 0; }
}

@supports (padding: max(0px)) {
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}



/* ===== Enhanced Transparency, Buttons Layout, and Responsive Chat (2025-11-09) ===== */

/* alpha colors */
:root{
  --alpha-card: rgba(17,24,39,.42);
  --alpha-bubble-bot: rgba(13,26,41,.68);
  --alpha-bubble-you: rgba(15,27,54,.68);
  --alpha-border: rgba(31,41,55,.7);
}

/* avoid global opacity on containers; use background alpha instead */
.avatarCard{
  opacity: 1 !important;
  background: var(--alpha-card) !important;
  border-color: var(--alpha-border) !important;
  backdrop-filter: blur(2px) saturate(120%);
}
.avatarCard .imgWrap img{ opacity: .88; }

.chatLog{
  background: var(--alpha-card) !important;
  border-color: var(--alpha-border) !important;
  backdrop-filter: blur(2px) saturate(120%);
}

.msg .bubble{
  background: var(--alpha-bubble-bot) !important;
  border-color: var(--alpha-border) !important;
}
.msg.you .bubble{
  background: var(--alpha-bubble-you) !important;
  border-color: rgba(34,53,86,.7) !important;
}

header{ background: #0f172acc !important; }

/* --- Toolbar: grid layout, tidy buttons --- */
.toolbar{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(110px,1fr)) !important;
  grid-auto-rows: auto;
  gap: 8px;
}
.inputRow{ grid-column: 1 / -1 !important; }
.toolbar > .btn{ min-width: 0; }

/* 時計設定 */
.clock{
    position: fixed; top: 80px; right: 12px;
    padding: .4rem .6rem; border-radius: .75rem;
    background: rgba(17,24,39,.42); color: #fff;
    font-size: .9rem; z-index: 1000; backdrop-filter: blur(4px);
  }
  @media (max-width: 640px){ .clock{ font-size: .8rem; top: 8px; right: 8px; } }

/* --- Responsive tweaks --- */
@media (max-width: 840px){
  main{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    row-gap: 12px !important;
  }
  /* shrink avatar image area so chat has more room */
  .avatarCard .imgWrap{ max-height: 36vh; }
  .chatLog{ height: 62vh !important; }

  /* buttons: 3 columns on phones */
  .toolbar{ grid-template-columns: repeat(3, 1fr) !important; }
  .toolbar > .btn{ width: 100%; }
  .chatLog{ line-height: 1.5; }
}

/* tablets */
@media (min-width: 841px) and (max-width: 1024px){
  .toolbar{ grid-template-columns: repeat(4, minmax(120px,1fr)) !important; }
}