/* ask-architecture.css — the conversational layer surface. Brand tokens only. */
.ask-arch { background: var(--panel,#15171b); border: 1px solid var(--line,#2a2e36); border-radius: var(--r-lg,14px); padding: var(--sp-5,24px); display: flex; flex-direction: column; gap: var(--sp-3,12px); }
.ask-head { display: flex; justify-content: space-between; align-items: center; }
.ask-title { font-family: var(--display,serif); font-size: 20px; font-weight: 600; color: var(--bone,#f1ece4); }
.ask-scope { display: flex; gap: 4px; background: var(--ground,#0a0608); border-radius: 8px; padding: 3px; }
.ask-scope-btn { background: transparent; border: none; color: var(--muted,#7a7468); font-family: var(--mono,monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all .2s ease; }
.ask-scope-btn.on { background: var(--accent,#E85A2C); color: var(--accent-ink,#140703); }
.ask-scope-btn:disabled { opacity: .35; cursor: not-allowed; }
.ask-sub { color: var(--bone-dim,#b6b0a4); font-size: 12.5px; line-height: 1.5; }
.ask-thread { min-height: 180px; max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 2px; }
.ask-starters { display: flex; flex-direction: column; gap: 8px; }
.ask-starters-label { font-family: var(--mono,monospace); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted,#7a7468); }
.ask-starter { text-align: left; background: var(--panel-2,#1c1f24); border: 1px solid var(--line,#2a2e36); color: var(--bone-dim,#b6b0a4); padding: 11px 14px; border-radius: 9px; font-family: var(--body,sans-serif); font-size: 13px; cursor: pointer; transition: all .2s cubic-bezier(.16,1,.3,1); }
.ask-starter:hover { border-color: color-mix(in srgb, var(--accent,#E85A2C) 40%, transparent); color: var(--bone,#f1ece4); transform: translateY(-1px); }
.ask-msg { padding: 12px 15px; border-radius: 11px; font-size: 13.5px; line-height: 1.6; max-width: 90%; animation: ask-in .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes ask-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ask-op { align-self: flex-end; background: var(--accent,#E85A2C); color: var(--accent-ink,#140703); font-weight: 500; }
.ask-sys { align-self: flex-start; background: var(--panel-2,#1c1f24); border: 1px solid var(--line,#2a2e36); color: var(--bone,#f1ece4); }
.ask-thinking { color: var(--muted,#7a7468); font-family: var(--mono,monospace); font-size: 11px; letter-spacing: .08em; }
.ask-dots::after { content: ""; animation: ask-dots 1.4s steps(4,end) infinite; }
@keyframes ask-dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }
.ask-dormant { color: var(--warn,#e6b450); font-style: italic; }
.ask-input-row { display: flex; gap: 8px; }
.ask-input { flex: 1; background: var(--ground,#0a0608); border: 1px solid var(--line,#2a2e36); color: var(--bone,#f1ece4); padding: 12px 14px; border-radius: 9px; font-family: var(--body,sans-serif); font-size: 13.5px; transition: border-color .2s ease; }
.ask-input:focus { outline: none; border-color: var(--accent,#E85A2C); }
.ask-send { background: var(--accent,#E85A2C); color: var(--accent-ink,#140703); border: none; padding: 0 20px; border-radius: 9px; font-family: var(--body,sans-serif); font-weight: 600; font-size: 13px; cursor: pointer; transition: transform .15s var(--ease-spring,ease); }
.ask-send:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce){ .ask-msg, .ask-starter, .ask-send { animation: none !important; transition: none !important; } }