/**
 * toE shell — Admin Glass 上書き
 * toe-shell.css のハードコード（#fff / 薄い面）をダークガラスに差し替える
 * as_of: 2026-07-15
 */

/* 外側 + アプリシェル */
html, body {
  color: var(--ink);
  background: var(--chrome);
}
body {
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(255, 77, 141, 0.28) 0%, transparent 55%),
    radial-gradient(780px 480px at 100% 0%, rgba(155, 140, 255, 0.22) 0%, transparent 50%),
    radial-gradient(700px 500px at 70% 110%, rgba(94, 240, 200, 0.14) 0%, transparent 55%),
    linear-gradient(165deg, #06040e 0%, #0c0818 50%, #0a0614 100%);
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
body::before {
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  top: 6%;
  left: -12%;
  background: radial-gradient(circle, rgba(255, 77, 141, 0.55), transparent 68%);
  animation: toeGlassA 18s ease-in-out infinite alternate;
}
body::after {
  width: min(60vw, 460px);
  height: min(60vw, 460px);
  bottom: 4%;
  right: -14%;
  background: radial-gradient(circle, rgba(94, 240, 200, 0.4), transparent 68%);
  animation: toeGlassB 22s ease-in-out infinite alternate;
}
@keyframes toeGlassA {
  to {
    transform: translate(8%, 6%) scale(1.06);
  }
}
@keyframes toeGlassB {
  to {
    transform: translate(-6%, -8%) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

.app {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 1px solid var(--glass-edge-soft);
  box-shadow: var(--shadow-shell);
  backdrop-filter: blur(var(--blur-strong)) saturate(var(--saturate));
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(var(--saturate));
  overflow: hidden;
}
.app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 42%
  );
  opacity: 0.85;
}
/* absolute オーバーレイ（login / drawer / sheet 等）を壊さないこと。
   position:relative を全子に強制するとレイアウトが崩れる */
.app > .topbar,
.app > .thread,
.app > .dock,
.app > .archive-banner {
  position: relative;
  z-index: 1;
}
/* オーバーレイは absolute を再確認（specificity で確実に） */
.app > .login-screen {
  position: absolute !important;
  inset: 0;
  z-index: 100;
}
.app > .drawer-bg {
  position: absolute !important;
  inset: 0;
  z-index: 70;
}
.app > .drawer {
  position: absolute !important;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 71;
}
.app > .sheet-bg {
  position: absolute !important;
  inset: 0;
  z-index: 60;
}
.app > .sheet {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
}
.app > .menu-pop,
.app > .notif-pop,
.app > .mention-pop {
  position: absolute !important;
  z-index: 55;
}
.app > .edge-swipe {
  position: absolute !important;
  z-index: 45;
}
.app > .toast {
  position: absolute !important;
  z-index: 90;
}

/* topbar */
.topbar {
  background: rgba(12, 8, 28, 0.55) !important;
  border-bottom-color: var(--glass-edge-soft) !important;
  box-shadow: var(--glass-inset);
  backdrop-filter: saturate(1.45) blur(var(--blur-bar)) !important;
  -webkit-backdrop-filter: saturate(1.45) blur(var(--blur-bar)) !important;
}
.brand .kick-text,
.topbar-brand,
.login-screen .kick-text {
  color: var(--fg);
  text-shadow: 0 0 24px rgba(94, 240, 200, 0.25);
}
.status-pill,
.channel-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--glass-edge-soft);
  box-shadow: var(--glass-inset);
}
.status-pill.on .dot {
  background: var(--create) !important;
  box-shadow: 0 0 10px rgba(94, 240, 200, 0.55);
}
.status-pill.warn .dot {
  background: var(--cycle) !important;
}
.icon-btn:active,
.account:active,
.account-btn:active {
  background: rgba(255, 255, 255, 0.08) !important;
}
.icon-btn .badge,
.icon-btn .badge.on {
  background: var(--chaos);
  box-shadow: 0 0 0 2px rgba(12, 8, 28, 0.9);
}
.icon-btn .menu-lamp.on {
  background: var(--chaos);
  box-shadow: 0 0 0 2px rgba(12, 8, 28, 0.9), 0 0 12px rgba(255, 77, 141, 0.55);
}

/* login */
.login-screen {
  background: transparent !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    transparent 40%
  ) !important;
}
.login-screen h1 {
  color: var(--fg);
}
.login-screen .sub {
  color: var(--dim);
}

/* drawer / pops */
.drawer-bg {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.drawer {
  background: linear-gradient(
    175deg,
    rgba(22, 14, 42, 0.92) 0%,
    rgba(12, 8, 28, 0.88) 100%
  ) !important;
  border-right: 1px solid var(--glass-edge-soft);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.45), var(--glass-inset) !important;
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
}
.drawer-hd {
  border-bottom-color: var(--glass-edge-soft) !important;
}
.ch-item:active,
.ch-item.on,
.month-tog:active {
  background: rgba(255, 255, 255, 0.08) !important;
}
.ch-item .av {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--fg) !important;
  border: 1px solid var(--glass-edge-soft);
}
.ch-item .av.ai {
  background: linear-gradient(135deg, var(--force-link), rgba(94, 240, 200, 0.5)) !important;
  color: #0a0614 !important;
  border: none;
}
.ch-item .av.grp {
  background: rgba(155, 140, 255, 0.2) !important;
  color: var(--force-link) !important;
}
.ch-item .count-badge {
  box-shadow: 0 0 0 2px rgba(12, 8, 28, 0.95) !important;
}
.menu-pop,
.notif-pop,
.archive-pop,
.mention-pop {
  background: rgba(22, 14, 42, 0.92) !important;
  border-color: var(--glass-edge) !important;
  box-shadow: var(--shadow-float) !important;
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}
.menu-pop button:active,
.notif-item:active,
.archive-item:active,
.mention-pop button:active {
  background: rgba(255, 255, 255, 0.08) !important;
}
.menu-pop .sep,
.notif-pop-hd,
.archive-pop-hd,
.mention-pop button {
  border-color: var(--glass-edge-soft) !important;
}
.notif-item.unread,
.archive-item.is-today {
  background: rgba(255, 255, 255, 0.06) !important;
}
.archive-item .ai-date {
  background: rgba(255, 255, 255, 0.08) !important;
}
.archive-banner {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: var(--glass-edge-soft) !important;
}
.archive-banner .ab-back {
  background: var(--fg) !important;
  color: var(--on-accent) !important;
}

/* thread */
.sys {
  color: var(--faint);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-edge-soft);
  border-radius: 999px;
  padding: 6px 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.welcome,
.card-in-chat,
.info-card,
.greet-card,
.card {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--glass-edge-soft) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(var(--blur-card)) saturate(var(--saturate));
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(var(--saturate));
}
.welcome .now,
.info-card .ic-rows,
.card-in-chat .rows,
.msg.peer.handover-card .ho-rows {
  background: rgba(0, 0, 0, 0.22) !important;
  border-color: transparent;
}
.welcome .now-row {
  border-bottom-color: var(--glass-edge-soft) !important;
}
.welcome .now-row.is-next {
  background: rgba(94, 240, 200, 0.08) !important;
}
/* 日報アシスト: ghost ボタンが暗背景で消えないように */
.ra-actions button {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1a1228 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.ra-actions button.ghost {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--fg, #f4f0ff) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}
.ra-actions button.ghost:active {
  background: rgba(255, 255, 255, 0.18) !important;
}
.ai-label {
  background: var(--ai-label-bg) !important;
  color: var(--ai-label-ink) !important;
  border: 1px solid var(--ai-border);
  box-shadow: 0 0 16px rgba(155, 140, 255, 0.12);
}
.msg.user {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid var(--glass-edge-soft);
  box-shadow: var(--shadow-card);
}
.msg.bot,
.msg.peer {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--glass-edge-soft) !important;
  box-shadow: var(--shadow-card) !important;
}
.msg.peer.handover-card {
  border-color: rgba(155, 140, 255, 0.3) !important;
  background: rgba(155, 140, 255, 0.08) !important;
}
.msg.peer.handover-card .ho-tag {
  background: rgba(155, 140, 255, 0.2) !important;
  color: var(--ai-ink) !important;
}
.info-card .ic-item {
  background: rgba(0, 0, 0, 0.18) !important;
  border-color: var(--glass-edge-soft) !important;
}
.info-card .ic-item .idetail {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--glass-edge-soft) !important;
}
.info-card .ic-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--dim) !important;
}

/* slide */
.slide-track {
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
}
.slide-track.in-mode {
  background: #1a122e !important;
}
.slide-track.done {
  background: #0f6b4a !important;
  box-shadow: 0 0 20px rgba(94, 240, 200, 0.25);
}
.slide-knob {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0a0614 !important;
}

/* buttons */
.btn-primary {
  background: rgba(247, 245, 242, 0.94) !important;
  color: var(--on-accent) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-primary:hover,
.btn-primary:active {
  background: var(--create) !important;
  color: var(--on-accent) !important;
  box-shadow: 0 0 24px rgba(94, 240, 200, 0.35);
}
.btn-secondary,
.rec-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--fg) !important;
  border-color: var(--glass-edge-soft) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.rec-btn.primary {
  background: rgba(247, 245, 242, 0.92) !important;
  color: var(--on-accent) !important;
  border-color: transparent !important;
}
.rec-btn.warn {
  background: var(--warn-bg) !important;
  color: var(--warn-ink) !important;
  border-color: rgba(255, 180, 84, 0.25) !important;
}
.btn-ghost {
  background: transparent !important;
  color: var(--dim) !important;
  border-color: var(--glass-edge-soft) !important;
}
.btn-danger {
  background: var(--danger-soft) !important;
  color: var(--danger-ink) !important;
}

/* dock / composer */
.dock {
  background: rgba(12, 8, 28, 0.55) !important;
  border-top-color: var(--glass-edge-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -8px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
}
.composer .field {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--glass-edge-soft) !important;
  box-shadow: var(--glass-inset);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.composer textarea::placeholder {
  color: var(--faint);
}
.send {
  background: rgba(247, 245, 242, 0.92) !important;
  color: var(--on-accent) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.send svg {
  display: block !important;
  margin: 0 !important;
}
.send:disabled {
  opacity: 0.35;
}

/* sheet / forms */
.sheet-bg {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sheet,
.sheet-backdrop + .sheet {
  background: rgba(22, 14, 42, 0.92) !important;
  border: 1px solid var(--glass-edge);
  border-bottom: none;
  box-shadow: var(--shadow-sheet) !important;
  backdrop-filter: blur(28px) saturate(1.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  color: var(--fg);
}
.sheet .handle {
  background: rgba(255, 255, 255, 0.2) !important;
}
.sheet .sheet-actions {
  border-top-color: var(--glass-edge-soft) !important;
}
.frow input,
.frow select,
.frow textarea,
.field input,
.composer .field {
  background: rgba(0, 0, 0, 0.28) !important;
  border-color: var(--glass-edge-soft) !important;
  color: var(--fg) !important;
  -webkit-text-fill-color: var(--fg);
}
/* iOS Safari: M PLUS 等の webfont では password の●が□になる */
input[type="password"],
input[type="password"]:focus {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif !important;
  letter-spacing: 0.14em;
  color: var(--fg) !important;
  -webkit-text-fill-color: var(--fg) !important;
}
.frow input:focus,
.frow select:focus,
.frow textarea:focus {
  border-color: var(--create) !important;
  box-shadow: var(--focus-ring) !important;
}
.entry {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--glass-edge-soft) !important;
}
.entry.from-sched {
  border-color: rgba(155, 140, 255, 0.35) !important;
  background: rgba(155, 140, 255, 0.08) !important;
}
.tot-line,
.ra-box {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--fg);
}
.tot-line.warn {
  background: var(--warn-bg) !important;
  color: var(--warn-ink) !important;
}
.tot-line.ok {
  background: var(--ok-soft) !important;
  color: var(--ok-ink) !important;
}
.ra-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--glass-edge-soft) !important;
  color: var(--fg) !important;
}
.ra-chip.on {
  border-color: var(--create) !important;
  box-shadow: 0 0 0 1px rgba(94, 240, 200, 0.25);
}
.lookup-res {
  background: rgba(22, 14, 42, 0.95) !important;
  border-color: var(--glass-edge) !important;
}
.lookup-res div {
  border-bottom-color: var(--glass-edge-soft) !important;
}
.lookup-res div:active {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* toast */
.toast {
  background: rgba(18, 12, 36, 0.94) !important;
  color: var(--fg) !important;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-float) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.toast.warn {
  background: rgba(80, 50, 10, 0.95) !important;
  color: var(--warn-ink) !important;
}

/* float back / note links */
.float-back {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid var(--glass-edge-soft);
  color: var(--fg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
}
.note-link,
.demo-tag {
  background: rgba(22, 14, 42, 0.75) !important;
  border: 1px solid var(--glass-edge-soft) !important;
  color: var(--dim) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
}
.screen-switch button {
  background: rgba(22, 14, 42, 0.75) !important;
  border-color: var(--glass-edge-soft) !important;
  color: var(--dim) !important;
  backdrop-filter: blur(12px);
}
.screen-switch button.on {
  background: rgba(247, 245, 242, 0.92) !important;
  color: var(--on-accent) !important;
  border-color: transparent !important;
}

/* body scroll areas on catalog */
.body {
  color: var(--fg);
}
.h-kicker {
  color: var(--faint) !important;
}
.badge {
  background: rgba(255, 255, 255, 0.1);
  color: var(--dim);
}
.alert {
  border: 1px solid var(--glass-edge-soft);
  backdrop-filter: blur(12px);
}

/* force bar accent (admin glass kinship) */
.force-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  background: var(--grad-force);
  pointer-events: none;
  box-shadow: 0 0 14px rgba(94, 240, 200, 0.3);
}