/* 基本画面:MyAI2.0.0の色合いに合わせた黒背景と下部バー */
:root {
  color-scheme: dark;
  --bg: #030609;
  --bar-bg: #080e13f5;
  --bar-line: #1a3039;
  --ink: #c6e9f0;
  --bar: 78px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.65 system-ui, -apple-system, "Hiragino Sans", "Segoe UI", sans-serif;
  overflow: hidden;
}
#bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--bar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bar-bg);
  border-top: 1px solid var(--bar-line);
  display: flex;
  align-items: center;
}
.bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--bar);
  padding: 0 12px;
  max-width: 100%;
  overflow-x: auto;
}
.bar-actions button {
  flex-shrink: 0;
  height: 36px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
  border: 1px solid #203b45;
  border-radius: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bar-actions button:hover,
.bar-actions button:focus-visible,
.bar-actions button:active { border-color: #75ddf0; background: #10242d; }
.bar-actions button:focus-visible { outline: 2px solid #75ddf0; outline-offset: 3px; }
@media (max-width: 700px) {
  :root { --bar: 76px; }
}