:root { --bg:#ffffff; --fg:#17181c; --mut:#5d6270; --line:#e3e5ea; --soft:#f4f5f8; --acc:#4f46e5; --acc2:#eef0ff; --bad:#b42318; --ok:#067647; --code:#0f1117; --codefg:#e6e8ee; }
@media (prefers-color-scheme: dark) { :root { --bg:#16171b; --fg:#ebecf0; --mut:#a3a7b3; --line:#2b2d34; --soft:#1f2026; --acc:#8b85ff; --acc2:#25244a; --bad:#ff8a80; --ok:#6ee7a8; --code:#0b0c0f; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif; }
.ais-app { height: 100%; display: flex; flex-direction: column; min-width: 300px; }
.ais-top { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ais-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ais-row.right { flex-wrap: nowrap; }
.ais-model, .ais-field { font: inherit; color: var(--fg); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; max-width: 100%; }
.ais-model { max-width: 190px; }
.ais-field { flex: 1; min-width: 120px; }
.ais-icon { border: 0; background: transparent; color: var(--fg); font-size: 17px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.ais-icon:hover, .ais-mini:hover { background: var(--soft); }
.ais-mini { border: 1px solid var(--line); background: transparent; color: var(--mut); border-radius: 999px; padding: 2px 9px; font: 12px/1.6 inherit; cursor: pointer; }
.ais-mini.on { background: var(--acc2); color: var(--acc); border-color: var(--acc); }
.ais-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ais-view[hidden] { display: none; }
.ais-view[data-v=history], .ais-view[data-v=settings] { overflow: auto; padding: 10px 12px 24px; gap: 8px; }
.ais-vhead { display: flex; justify-content: space-between; align-items: center; }
.ais-log { flex: 1; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.ais-hello { margin: auto 0; color: var(--mut); text-align: center; padding: 20px; }
.ais-msg { border-radius: 12px; padding: 8px 10px; max-width: 100%; overflow-wrap: anywhere; }
.ais-msg.user { background: var(--acc2); align-self: flex-end; max-width: 92%; white-space: pre-wrap; }
.ais-msg.bot { background: var(--soft); border: 1px solid var(--line); }
.ais-msg.err { border-color: var(--bad); }
.ais-msg.streaming .ais-body::after { content: "▍"; animation: blink 1s steps(2) infinite; color: var(--acc); }
@keyframes blink { 50% { opacity: 0; } }
.ais-head { display: flex; gap: 8px; justify-content: space-between; font-size: 11.5px; color: var(--mut); margin-bottom: 2px; }
.ais-body p { margin: .35em 0; } .ais-body ul, .ais-body ol { margin: .3em 0; padding-left: 1.3em; }
.ais-body h3, .ais-body h4, .ais-body h5 { margin: .6em 0 .2em; font-size: 1em; }
.ais-body pre { background: var(--code); color: var(--codefg); padding: 8px 10px; border-radius: 8px; overflow: auto; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ais-body code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(127,127,127,.15); padding: 0 3px; border-radius: 4px; }
.ais-body pre code { background: none; padding: 0; }
.ais-body table { border-collapse: collapse; margin: .4em 0; font-size: 13px; display: block; overflow: auto; }
.ais-body th, .ais-body td { border: 1px solid var(--line); padding: 3px 6px; text-align: left; vertical-align: top; }
.ais-body blockquote { margin: .4em 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--mut); }
.ais-body a { color: var(--acc); }
.ais-tools { display: flex; gap: 6px; margin-top: 4px; }
.ais-msg.user .ais-tools:empty { display: none; }
.ais-errcard p { margin: 0 0 6px; }
.ais-dock { border-top: 1px solid var(--line); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.ais-ctx { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.ais-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px 2px 6px; cursor: pointer; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mut); }
.ais-chip.on { border-color: var(--acc); color: var(--fg); background: var(--acc2); }
.ais-ctx-title { overflow: hidden; text-overflow: ellipsis; }
.ais-paste { width: 100%; font: inherit; color: var(--fg); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; resize: vertical; }
.ais-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.ais-act { border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 999px; padding: 3px 10px; font: 12.5px/1.5 inherit; cursor: pointer; }
.ais-act:hover { border-color: var(--acc); color: var(--acc); }
.ais-act:disabled { opacity: .5; cursor: default; }
.ais-compose { display: flex; gap: 6px; align-items: flex-end; }
.ais-input { flex: 1; font: inherit; color: var(--fg); background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; resize: none; min-height: 58px; max-height: 40vh; }
.ais-input:focus, .ais-field:focus, .ais-model:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.ais-send, .ais-btn { border: 1px solid var(--acc); background: var(--acc); color: #fff; border-radius: 10px; padding: 7px 14px; font: 600 13px/1.4 inherit; cursor: pointer; text-decoration: none; display: inline-block; }
.ais-send.stop { background: var(--bad); border-color: var(--bad); }
.ais-btn { background: transparent; color: var(--acc); padding: 5px 11px; font-weight: 500; }
.ais-btn.primary { background: var(--acc); color: #fff; }
.ais-btn.danger { color: var(--bad); border-color: var(--bad); align-self: flex-start; }
.ais-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--mut); flex-wrap: wrap; }
.ais-quota.low { color: var(--bad); font-weight: 600; }
.ais-hand { display: flex; gap: 6px; flex-wrap: wrap; }
.ais-small { font-size: 12px; color: var(--mut); }
.ais-small.ok, .lic-msg.ok { color: var(--ok); } .ais-small.bad, .lic-msg.bad { color: var(--bad); }
section h3 { font-size: 13px; margin: 14px 0 6px; }
.ais-plans p { margin: 4px 0; font-size: 13px; }
.ais-key { border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.ais-check { display: flex; gap: 6px; align-items: center; font-size: 13px; padding: 2px 0; }
.ais-hlist { display: flex; flex-direction: column; gap: 4px; }
.ais-hitem { display: flex; gap: 6px; align-items: center; }
.ais-hopen { flex: 1; text-align: left; border: 1px solid var(--line); background: var(--soft); color: var(--fg); border-radius: 8px; padding: 6px 8px; cursor: pointer; font: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.privacy { margin-top: 16px; }
.ais-toast { position: fixed; left: 10px; right: 10px; bottom: 10px; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ais-toast.show { opacity: 1; }