/* style.css */
html, body{
  height: 100%;
  overflow: hidden; /* ★ ページ自体をスクロールさせない */
  margin: 0; font-family: system-ui, sans-serif;
}


.appBadge {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;

  color: rgba(0, 0, 0, 0.45);       /* light mode */
  background: rgba(0, 0, 0, 0.05);

  padding: 2px 6px;
  border-radius: 999px;

  user-select: none;
  pointer-events: none;
}

/* Dark mode 対応（あるなら） */
body.dark .appBadge {
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

.row { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }

.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; }
input[type="text"], input[type="number"] { width: 100%; padding: 8px; box-sizing: border-box; }
input[type="file"] { width: 100%; }
select { width: 100%; padding: 8px; }
button { padding: 8px 10px; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }
.item { border: 1px solid #e5e5e5; border-radius: 10px; padding: 10px; margin-top: 10px; }

.item.inline-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}
.item.inline-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.muted { color:#666; font-size: 12px; }
label { font-size: 12px; color:#333; display:block; margin-bottom: 4px; }
h2 { margin: 0 0 10px 0; }
h3 { margin: 10px 0 6px 0; }
pre { white-space: pre-wrap; word-break: break-word; background:#f7f7f7; padding:10px; border-radius:8px; margin: 8px 0 0 0; }
.pill { font-size: 12px; padding: 3px 8px; border: 1px solid #ddd; border-radius: 999px; }

#canvasStack { position: relative; width: 100%;
  height: 100%;     /* ★ 重要 */;
}
#canvasStack canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* panel を左、canvas を右に（PC） */
.layout{
  position: fixed;
  display: flex;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  height: auto; /* calc をやめる */
  flex-direction: row-reverse; /* ★追加 */
}

#cv{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
  touch-action: none;
}

/* .panel{
  width:25%;
  height:100%;
  overflow:auto;
  background:#fff;
  position:relative;
  z-index:10;
  border-left:2px solid var(--border-color);

  transition: width 180ms ease, flex-basis 180ms ease, padding 180ms ease, margin 180ms ease;
} */

.panel {
  position: relative;
  height: 100%;     /* ★ calc をここに書かない。layout に任せる */
}

/* 左側パネルの内側(右端)にリサイズハンドル */
.panel-resizer{
  left: auto;
  right: 0;
  cursor: ew-resize;
}

/* 見た目を分かりやすくしたい場合 */
.panel-resizer:hover {
  background: rgba(0,0,0,0.05);
}

/* always-visible tab button */
.panelTab{
  position: fixed;
  top: calc(12px + var(--header-h));
  left: 0;                 /* ★画面左端に寄せる */
  z-index: 4000;

  width: 42px;
  height: 42px;
  border-radius: 0 12px 12px 0; /* タブ形状 */
  border: 1px solid #ddd;
  border-left: none;

  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

/* panel が開いているときはタブを panel の横に押し出す（PC） */
.panelTab.is-open{
  left: 12px; /* ここは後で JS で panel 幅に合わせて動的にしてもよい */
}

/* panelがflex列でない場合に備えて */
#sidePanel{
  display: flex;
  flex-direction: column;
  width: 30%;
  border-right: 1px solid #000000;

}

.panel.is-hidden{
  width: 0 !important;
  flex-basis: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
}

/* 2D/3D + View/Figure を縦に積んで右寄せ */
.viewLayoutStack{
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* ★ 右寄せ */
  gap: 6px;                /* 縦の間隔 */
  margin-top: 5px;
}

/* 念のため：中身の幅を内容に合わせる */
.viewLayoutStack > *{
  width: fit-content;
}


.panelSection{
  margin-top: 8px;
}

.sectionHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sectionTitle{
  font-size: 12px;
  font-weight: 700;
  color: #333;
}

.panelTabs{
  display: inline-flex;
  gap: 6px;
  padding: 3px;
  border-radius: 12px;
  background: #f4f4f4;
  border: 1px solid #e5e5e5;
}

.panelTabs .tabBtn{
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.65;
  transition: background 120ms ease, opacity 120ms ease, transform 120ms ease;
}

.panelTabs .tabBtn:hover{ opacity: 0.85; }
.panelTabs .tabBtn:active{ transform: translateY(1px); }

.panelTabs .tabBtn.is-active{
  opacity: 1;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
}

.panelTabs .tabBtn:focus-visible{
  outline: 2px solid rgba(22,146,230,0.35);
  outline-offset: 2px;
}


/* 2D/3D切り替え */
/* 2D/3D segmented control */
.viewToggle{
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 4px;
  background: #fafafa;
  user-select: none;
}

/* buttons inside segmented */
.viewToggle .segBtn{
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background 120ms ease, opacity 120ms ease, transform 120ms ease;
  opacity: 0.55; /* 非選択は薄く */
}

/* hover */
.viewToggle .segBtn:hover{
  opacity: 0.8;
}

/* active pressed */
.viewToggle .segBtn:active{
  transform: translateY(1px);
}

/* selected state */
.viewToggle .segBtn.is-active{
  opacity: 1;
  background: rgba(22,146,230,0.12); /* 薄い色付き */
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}

/* keyboard focus */
.viewToggle .segBtn:focus-visible{
  outline: 2px solid rgba(22,146,230,0.35);
  outline-offset: 2px;
}

/* Layout segmented control */
.layoutToggle{
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 4px;
  background: #fafafa;
  user-select: none;
}

/* 共通ボタン（2D/3D と共用可） */
.layoutToggle .segBtn{
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background 120ms ease, opacity 120ms ease, transform 120ms ease;
  opacity: 0.55;          /* 非選択 */
}

/* hover */
.layoutToggle .segBtn:hover{
  opacity: 0.8;
}

/* active press */
.layoutToggle .segBtn:active{
  transform: translateY(1px);
}

/* selected */
.layoutToggle .segBtn.is-active{
  opacity: 1;
  background: rgba(22,146,230,0.12);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}

/* keyboard focus */
.layoutToggle .segBtn:focus-visible{
  outline: 2px solid rgba(22,146,230,0.35);
  outline-offset: 2px;
}


/* ===== Mobile: panel below canvas (no overlay) ===== */
@media (max-width: 900px){
  .layout{
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh;            /* ★基準を明示 */
  }

  #cv, canvas{
    touch-action: none;
    width: 100%;
    height: 30%;             /* ★キャンバスを少し小さく */
    flex: 0 0 auto;
    display: block;
  }

  .panel{
    position: relative !important;
    width: 100% !important;

    height: 100% !important;  /* ★パネルを大きく */
    max-height: none !important;

    overflow-y: auto;
    transform: none !important;
    transition: none !important;

    border-top: 1px solid rgba(0,0,0,0.12);
  }

  .panelHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 0 12px; */
    /* height: 20%; */
    border-bottom: 1px solid rgba(0,0,0,0.12);
  }

  #sidePanel{
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
  }

  /* 隠す方法：一番確実なのは display:none */
  .panel.is-hidden{
    display: none !important;
  }
}



#panelFit{
  max-height:100%;
  overflow: auto;
}
/* Fit panel drag highlight */
#panelFit.is-dragover {
  outline: 1px dashed #999;
  outline-offset: -3px;
  background: rgba(0,0,0,0.03);
}

/* overlay toggle button (top-left) */
.overlay-toggle{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2500;
  padding: 8px 10px;
}

/* overlay panel (on top of canvas) */
.overlay{
  position: fixed;
  top: calc(52px + var(--header-h));
  left: 12px;
  width: min(520px, calc(100vw - 24px));
  max-height: min(75vh, calc(100vh - var(--header-h)));
  overflow: hidden;

  background: rgba(255,255,255,0.96);
  border: 1px solid #000000;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  padding: 10px;

  z-index: 240;
  display: block;
  flex-direction: column;
}

.overlay-hidden{
  display:none;
}

.overlay-head{
  display:flex;
  flex: 0 0 auto;
  position: relative;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.overlay-title{
  font-weight: 700;
  font-size: 14px;
}

.overlay-actions{
  display:flex;
  gap: 6px;
  align-items:center;
  flex-wrap: wrap;
}

#btnTableClose{
  line-height: 1;
  padding: 6px 8px;
}

/* table styles */
.tableWrap{
  position: relative;
  max-height: max(100px, 10vh);
  min-height: 0;
  border: 5px solid #000000;
  border-radius: 10px;
}

#dataTableWrap{
  position: relative;
  max-height: 600px;
  overflow: auto;
}

#dataTableInfo{
  position: relative;
}

/* Table ボタンを右上に固定 */
#btnTableToggle{
  left: auto !important;
  right: 12px;
  top: calc(12px + var(--header-h));
  z-index: 2500;
}

#dataTable{
  width: 100%;
  max-height: 20px;
  border-spacing: 0;
  overflow: auto;
}

#dataTable thead th{
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 2;
}

#dataTable tbody{
  max-height: 100px;
  overflow: auto;
  font-size: 32px;
}

.dataTable td input{
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #00000054;
  border-radius: 6px;
  background: transparent;
  outline: none;
  font-size: 18px;
}

.dataTable td input:focus{
  border-color: #999;
  background: #fff;
}

.dataTable tr.is-selected{
  background: rgba(0,0,0,0.06);
}

/* Data Table overlay を右寄せに */
#tableOverlay{
  left: auto;
  right: 12px;
}

:root{
  --header-h: 64px;
  --border-color: #00000054;
}

/* ===== Header ===== */
.appHeader{
  position: fixed; /* sticky -> fixed */
  left: 0;
  top: 0;
  right: 0;
  z-index: 3000;

  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 0 12px;
  background: #ececec;
  border-bottom: 2px solid var(--border-color);
}

.appTitle{
  font-family: "Funnel Sans", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  /* display: flex; */
  align-items: center;
  gap: 8px; /* タイトルとバッジの間隔 */
}

.appSubTitle{
  font-size: 12px;
  line-height: 1;
  margin-top: 4px;
}

.appHeader__left {
  flex-grow: 1;
  text-align: center;
  padding-left: 40px;
}

.appHeader__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.btnLogin{
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

/* ===== Layout: subtract header height ===== */


/* panel should also fit under header */


#panelPlot{
  height:100%;
  width: 100%;
  overflow: auto;
}
#panelFit{
  height:100%;
  width: 100%;
  overflow: auto;
}

/* overlay buttons should not hide under header */
.panel-toggle{ top: calc(12px + var(--header-h)); }
.overlay-toggle{ top: calc(12px + var(--header-h)); }
.overlay{ top: calc(52px + var(--header-h)); }

/* Mobile: drawer still needs to start below header */
@media (max-width: 900px){
  .panel{
    height: calc(100dvh - var(--header-h));
    top: var(--header-h);
  }
}

/* マウスに追従するコンテナ */
#cursor-container {
  position: fixed;
  pointer-events: none;
  display: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  justify-content: center;
  align-items: center;
}

.inner-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgba(128, 128, 128, 0.6);
  border-radius: 50%;
}

.outer-ring {
  position: absolute;
  width: 25px;
  height: 25px;
  border: 1.5px solid rgba(128, 128, 128, 0.3);
  border-radius: 50%;
}

.item {
  position: relative;
}

/* Delete button (top-right) */
.btn-delete {
  position: absolute;
  top: -2px;
  right: 10px;

  width: 32px;
  height: 32px;

  border: none;
  background: transparent;
  cursor: pointer;

  font-size: 30px;
  line-height: 1;

  opacity: 0.6;
  color: var(--fg, #666);
}

.item:hover{
  border-color: #bbb;
  background-color: #00d9ff15;
}

.item:hover .btn-delete {
  opacity: 1.0;
}

.btn-delete:hover {
  color: #c0392b;
  transform: scale(1.1);
}

/* =========================================================
   REPL UI styles (engine_repl embedded into #list)
   ========================================================= */

#list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* one cell */
.cell {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.cellTop {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cell .prompt {
  width: 28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: #666;
  text-align: right;
  user-select: none;
}

.cell .handle {
  width: 22px;
  text-align: center;
  user-select: none;
  cursor: grab;
  color: #666;
}

.cell.dragging .handle {
  cursor: grabbing;
}

.cell input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 8px 10px;
}

.cell .btns {
  display: flex;
  gap: 6px;
}

.btnSmall {
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
}

.out {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  border: 1px solid #eee;
  background: #fafafa;
}

.out.muted { color:#666; }
.out.ok { border-color: rgba(22,146,230,0.35); background: rgba(22,146,230,0.06); }
.out.ng { border-color: rgba(192,57,43,0.35); background: rgba(192,57,43,0.06); }

.cell.is-executed {
  background: rgba(0, 255, 200, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

.cell.is-error {
  background: rgba(255, 0, 0, 0.03);
  border-color: rgba(192,57,43,0.35);
}

/* drag insertion hints */
.cell.drop-top {
  box-shadow: 0 3px 0 rgba(22,146,230,0.6) inset;
}
.cell.drop-bottom {
  box-shadow: 0 -3px 0 rgba(22,146,230,0.6) inset;
}

/* Parameters list layout */
#paramListEl {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#paramListEl .paramRow {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
}

#paramListEl .paramTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#paramListEl .paramName code {
  font-size: 14px;
}

#paramListEl .paramAuto {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;            /* 画面が狭いとき折り返す */
  justify-content: flex-end;
}

#paramListEl .paramAutoChk {
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  white-space: nowrap;
}

#paramListEl input[data-kind="spd"] {
  width: 140px;
}

#paramListEl input[data-kind="spdnum"] {
  width: 90px;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.25);
}

#paramListEl .paramBottom {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: center;
}

#paramListEl .paramBottom input[data-kind="num"] {
  width: 160px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.25);
}

#paramListEl .paramBottom input[data-kind="rng"] {
  width: 100%;
  min-width: 240px;  /* 必要なら削除可 */
}


/* param panel rows */
.paramRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  margin-top: 8px;
}

.paramName {
  min-width: 52px;
}

.paramInput {
  width: 120px !important;
}

/* code style inside outputs */
.out code, .paramRow code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

/* REPL add button container */
.replAddWrap{
  display: flex;
  justify-content: center;
  margin: 8px 0 4px;
}

/* Floating + button */
.addFab{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;

  font-size: 26px;
  line-height: 1;
  font-weight: 500;

  background: rgba(22,146,230,0.9);
  color: white;

  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);

  transition: transform 120ms ease,
              box-shadow 120ms ease,
              background 120ms ease;
}

.addFab:hover{
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}

.addFab:active{
  transform: scale(0.96);
}

.addFab:focus-visible{
  outline: 2px solid rgba(22,146,230,0.4);
  outline-offset: 3px;
}

/* 補助操作アイコン */
.replActions{
  align-items: center;
}

/* 共通アイコンボタン */
.iconBtn{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;

  font-size: 18px;
  line-height: 1;
  color: #444;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  opacity: 0.75;

  transition:
    background 120ms ease,
    opacity 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease;
}

.iconBtn:hover{
  opacity: 1;
  background: #f5f5f5;
}

.iconBtn:active{
  transform: translateY(1px);
}

.iconBtn:focus-visible{
  outline: 2px solid rgba(22,146,230,0.35);
  outline-offset: 2px;
}

/* Undo は少し注意喚起色でもよい */
#btnUndo{
  color: #666;
}

.replControls{
  display: flex;
  align-items: center;
  margin-top: 8px;
}

/* 3カラム構成 */
.replLeft,
.replCenter,
.replRight{
  flex: 1 1 0;
}

/* 中央に Add */
.replCenter{
  display: flex;
  justify-content: center;
}

/* 右寄せ */
.replRight{
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}