.ai-chat {
  --ai-bg: var(--bg, var(--platform-bg, var(--bg-primary, #050608)));
  --ai-surface: var(--surface, var(--platform-surface, #0b0f15));
  --ai-surface-2: var(--surface-2, var(--bg-secondary, #111720));
  --ai-surface-3: var(--surface-3, #18212d);
  --ai-text: var(--text, var(--text-primary, #f5f7fa));
  --ai-muted: var(--text-muted, var(--text-tertiary, #9aa5b3));
  --ai-line: var(--line, var(--platform-border, rgba(255,255,255,.14)));
  --ai-line-subtle: var(--line-subtle, rgba(255,255,255,.08));
  --ai-line-strong: var(--line-strong, rgba(255,255,255,.22));
  --ai-focus: var(--focus, #8ed0ff);
  --ai-hover: var(--hover-metal, rgba(200,220,238,.72));
  --ai-metal: var(--astera-metal-100, #d9e2ea);
  --ai-metal-hover: var(--astera-metal-85, #bdc9d4);
  --ai-void: var(--astera-void, #050608);
  position: fixed;
  top: calc(env(safe-area-inset-top) + 64px);
  right: 12px;
  z-index: 10000;
  width: min(1100px, calc(100vw - 24px));
  height: min(610px, calc(100dvh - 92px));
  min-height: 360px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 12px;
  border: 1px solid var(--ai-line-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ai-bg) 96%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  color: var(--ai-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  overflow: hidden;
  transition: height .24s ease, min-height .24s ease;
}
.ai-chat * { box-sizing: border-box; }
.ai-chat[hidden] { display: none !important; }
.ai-chat.is-minimized { height: 52px; min-height: 52px; padding: 8px 10px; }

.ai-chat__top-dock,
.ai-chat__composer-dock { position: relative; z-index: 4; }
.ai-chat__top-dock { border-bottom: 1px solid var(--ai-line-subtle); }
.ai-chat__header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 10px; border-bottom:0; }
.ai-chat__title-wrap { display:flex; align-items:center; gap:8px; min-width:0; }
.ai-chat__connection { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#82a7c8; box-shadow:0 0 12px rgba(130,167,200,.45); }
.ai-chat__connection.is-working { background:#9ee7ff; box-shadow:0 0 15px rgba(79,210,255,.78); animation:aiPendingPulse 1.15s ease-in-out infinite; }
.ai-chat h2 { margin:0; color:var(--ai-text); font-size:16px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-chat__window-actions { display:flex; gap:6px; flex:0 0 auto; }
.ai-window-button { width:34px; height:30px; padding:0; border:1px solid var(--ai-line); border-radius:9px; background:var(--ai-surface-2); color:var(--ai-text); font-size:18px; line-height:1; display:grid; place-items:center; position:relative; z-index:2; pointer-events:auto; touch-action:manipulation; cursor:pointer; }
.ai-window-button:hover,
.ai-window-button:focus-visible { border-color:var(--ai-hover); background:var(--ai-surface-3); outline:none; }
.ai-window-button--close { font-size:19px; }

.ai-routing { padding:8px 2px 9px; border-bottom:0; }
.ai-routing__current { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--ai-muted); font-size:11px; line-height:1.3; }
.ai-mode-select-wrap { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; min-width:0; }
.ai-mode-select-label { color:var(--ai-muted); font-size:11px; white-space:nowrap; }
.ai-mode-select-shell { position:relative; min-width:0; }
.ai-mode-select { width:100%; min-height:40px; margin:0; padding:8px 34px 8px 11px; border:1px solid var(--ai-line); border-radius:10px; appearance:none; -webkit-appearance:none; background:color-mix(in srgb,var(--ai-surface-2) 58%,transparent); color:var(--ai-text); font:inherit; font-size:12px; outline:none; touch-action:manipulation; }
.ai-mode-select:hover,
.ai-mode-select:focus-visible { border-color:var(--ai-hover); }
.ai-mode-select:focus-visible { outline:2px solid var(--ai-focus); outline-offset:1px; }
.ai-mode-select-arrow { position:absolute; top:50%; right:11px; transform:translateY(-52%); color:var(--ai-muted); pointer-events:none; }
.ai-routing__actions { display:flex; gap:5px; flex:0 0 auto; }
.ai-routing__actions button { min-height:40px; padding:7px 10px; border:1px solid var(--ai-line); border-radius:8px; background:var(--ai-surface-2); color:var(--ai-text); font:inherit; font-size:10px; position:relative; z-index:2; pointer-events:auto; touch-action:manipulation; cursor:pointer; }
.ai-routing__actions button:hover,
.ai-routing__actions button:focus-visible { border-color:var(--ai-hover); outline:none; }

.ai-timeline { min-height:0; padding:12px 4px 10px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scroll-behavior:smooth; }
.ai-chat__empty { min-height:100%; display:grid; place-items:center; padding:20px 18px; color:var(--ai-muted); font-size:12px; line-height:1.6; text-align:center; }
.ai-chat__empty[hidden] { display:none; }
.ai-message { display:grid; gap:4px; margin:0 0 10px; }
.ai-message:last-child { margin-bottom:0; }
.ai-message--user { justify-items:end; }
.ai-message--assistant,
.ai-message--error,
.ai-message--pending { justify-items:start; }
.ai-message__label { font-size:10px; line-height:1.2; letter-spacing:.06em; color:var(--ai-muted); font-weight:700; }
.ai-message__body { max-width:86%; margin:0; padding:9px 11px; border:1px solid var(--ai-line); border-radius:14px; color:var(--ai-text); background:var(--ai-surface-2); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; font-size:13px; }
.ai-message--user .ai-message__body { border-bottom-right-radius:5px; background:color-mix(in srgb,var(--ai-metal) 13%,var(--ai-surface-2)); }
.ai-message--assistant .ai-message__body,
.ai-message--pending .ai-message__body { border-bottom-left-radius:5px; background:color-mix(in srgb,var(--ai-surface-2) 90%,#163250 10%); }
.ai-message--pending .ai-message__body { color:var(--ai-muted); animation:aiPendingPulse 1.15s ease-in-out infinite; }
.ai-message--error .ai-message__body { border-bottom-left-radius:5px; border-color:color-mix(in srgb,var(--ai-line-strong) 68%,#a76d6d 32%); background:color-mix(in srgb,var(--ai-surface-2) 92%,#482525 8%); }

.ai-chat__composer-dock { padding-top:9px; border-top:1px solid var(--ai-line-subtle); }
.ai-composer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; padding-top:0; border-top:0; }
.ai-chat textarea { width:100%; min-height:44px; max-height:120px; margin:0; padding:10px 12px; border:1px solid var(--ai-line); border-radius:12px; background:var(--ai-surface); color:var(--ai-text); resize:none; outline:none; line-height:1.45; overflow-y:auto; }
.ai-chat textarea:hover { border-color:var(--ai-hover); }
.ai-chat textarea:focus { border-color:var(--ai-focus); outline:2px solid var(--ai-focus); outline-offset:1px; }
.ai-chat textarea:disabled { opacity:.72; cursor:wait; }
.ai-send[data-icon-send] { width:46px; min-width:46px; height:46px; padding:0; border:1px solid var(--ai-metal); border-radius:50%; display:grid; place-items:center; background:var(--ai-metal); color:var(--ai-void); touch-action:manipulation; cursor:pointer; }
.ai-send:hover { border-color:var(--ai-metal-hover); background:var(--ai-metal-hover); }
.ai-send:focus-visible { outline:2px solid var(--ai-focus); outline-offset:2px; }
.ai-send:disabled { opacity:.6; cursor:wait; }
.ai-send__icon { width:22px; height:22px; display:block; fill:currentColor; }
.ai-status { min-height:16px; margin:6px 2px 0; color:var(--ai-muted); font-size:11px; line-height:1.35; }
.ai-status:empty { min-height:0; margin-top:0; }

.ai-chat.is-minimized .ai-routing,
.ai-chat.is-minimized > .ai-timeline,
.ai-chat.is-minimized > .ai-chat__composer-dock { display:none; }
.ai-chat.is-minimized .ai-chat__top-dock { border-bottom:0; }
.ai-chat.is-minimized .ai-chat__header { height:34px; padding:0; border:0; }

@keyframes aiPendingPulse { 0%,100% { opacity:.62; } 50% { opacity:1; } }

@media (max-width:599px) {
  .ai-chat:not(.is-minimized) { --ai-top-dock-space:118px; --ai-bottom-dock-space:86px; --ai-viewport-top:0px; --ai-viewport-height:100dvh; position:fixed; inset:0; width:100vw; max-width:none; height:100lvh; max-height:none; min-height:100lvh; display:block; padding:0; border:0; border-radius:0; background:var(--ai-bg); overflow:hidden; isolation:isolate; overscroll-behavior:none; }
  .ai-chat:not(.is-minimized) .ai-chat__top-dock { position:absolute; top:var(--ai-viewport-top); right:0; left:0; z-index:5; padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 9px max(10px,env(safe-area-inset-left)); border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,color-mix(in srgb,var(--ai-bg) 66%,transparent),color-mix(in srgb,var(--ai-bg) 42%,transparent)); backdrop-filter:blur(26px) saturate(118%); -webkit-backdrop-filter:blur(26px) saturate(118%); }
  .ai-chat:not(.is-minimized) .ai-chat__header { padding:0 0 8px; }
  .ai-chat:not(.is-minimized) .ai-routing { padding:8px 0 0; }
  .ai-chat:not(.is-minimized) .ai-routing__current { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .ai-chat:not(.is-minimized) .ai-mode-select-wrap { grid-template-columns:auto minmax(0,1fr); gap:7px; }
  .ai-chat:not(.is-minimized) .ai-mode-select { min-height:44px; font-size:12px; }
  .ai-chat:not(.is-minimized) .ai-routing__actions button { min-height:44px; padding-inline:10px; font-size:11px; }
  .ai-chat:not(.is-minimized) .ai-timeline { position:absolute; top:var(--ai-viewport-top); right:0; bottom:auto; left:0; z-index:1; height:var(--ai-viewport-height); min-height:0; padding:calc(var(--ai-top-dock-space) + 12px) max(12px,env(safe-area-inset-right)) calc(var(--ai-bottom-dock-space) + 12px) max(12px,env(safe-area-inset-left)); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:auto; }
  .ai-chat:not(.is-minimized) .ai-chat__empty { min-height:calc(var(--ai-viewport-height) - var(--ai-top-dock-space) - var(--ai-bottom-dock-space) - 24px); }
  .ai-chat:not(.is-minimized) .ai-chat__composer-dock { position:absolute; top:calc(var(--ai-viewport-top) + var(--ai-viewport-height) - var(--ai-bottom-dock-space)); right:0; bottom:auto; left:0; z-index:5; padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(0deg,color-mix(in srgb,var(--ai-bg) 72%,transparent),color-mix(in srgb,var(--ai-bg) 46%,transparent)); backdrop-filter:blur(26px) saturate(118%); -webkit-backdrop-filter:blur(26px) saturate(118%); }
  .ai-chat:not(.is-minimized) .ai-composer { gap:8px; align-items:end; }
  .ai-chat:not(.is-minimized) textarea { min-height:48px; max-height:120px; overflow-y:auto; background:color-mix(in srgb,var(--ai-bg) 54%,transparent); }
  .ai-chat:not(.is-minimized) .ai-send[data-icon-send] { width:48px; min-width:48px; height:48px; }
  .ai-chat:not(.is-minimized) .ai-status { margin:6px 2px 0; }
  .ai-message__body { max-width:92%; font-size:13px; }
  .ai-window-button { width:44px; height:44px; border-radius:11px; }
  .ai-chat.is-minimized { position:fixed; top:calc(env(safe-area-inset-top) + 54px); right:0; bottom:auto; left:0; width:100vw; max-width:none; height:50px; max-height:50px; min-height:50px; display:block; padding:8px 10px; border:1px solid var(--ai-line-strong); border-radius:0; }
  .ai-chat.is-minimized .ai-chat__top-dock { position:static; padding:0; border:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

@media (prefers-reduced-motion:reduce) {
  .ai-chat, .ai-chat * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}