/* Console — shared styles (same design tokens as slm.css) */
body.console-body { background: var(--background); color: var(--foreground); height: 100vh; display: flex; flex-direction: column; }
.console-wrap { flex: 1; display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 68px); border-top: 1px solid var(--border); }
.console-side { border-right: 1px solid var(--border); background: var(--background-2); display: flex; flex-direction: column; overflow-y: auto; }
.console-side .side-inner { padding: 22px 18px; }
.console-side h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); font-family: var(--font-mono); margin: 0 0 14px; }
.pack-item { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pack-item:hover { border-color: var(--card-hover-border); transform: translateY(-1px); box-shadow: var(--shadow); }
.pack-item.active { border-color: var(--mint); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint) 30%, transparent); }
.pack-item .pn { font-weight: 650; font-size: 15px; }
.pack-item .pd { font-size: 12.5px; color: var(--muted-foreground); margin-top: 3px; }
.pack-item .pl { font-size: 11px; font-family: var(--font-mono); color: var(--mint); margin-top: 8px; }

.prompt-set { margin-top: 4px; }
.prompt-set button { display: block; width: 100%; text-align: left; background: var(--muted); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 8px; font-family: var(--font-sans); font-size: 12.5px; color: var(--muted-foreground); cursor: pointer; transition: all .15s; }
.prompt-set button:hover { color: var(--foreground); border-color: var(--mint); }

.console-main { display: flex; flex-direction: column; position: relative; }
.console-head { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--background) 82%, transparent); backdrop-filter: blur(10px); }
.console-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.console-head h1 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.console-head .sub { font-size: 13px; color: var(--muted-foreground); }

.console-msgs { flex: 1; overflow-y: auto; padding: 28px 28px 12px; scroll-behavior: smooth; }
.msg { display: flex; gap: 14px; margin-bottom: 22px; max-width: 860px; }
.msg .avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.msg.user .avatar { background: var(--muted); color: var(--foreground); }
.msg.bot .avatar { background: linear-gradient(135deg, var(--product), var(--ring)); color: #fff; box-shadow: 0 0 14px var(--glow); }
.msg .bubble { background: var(--card); border: 1px solid var(--border); border-radius: 0 14px 14px 14px; padding: 14px 18px; font-size: 15px; line-height: 1.7; }
.msg.user .bubble { background: color-mix(in srgb, var(--mint) 8%, var(--card)); border-radius: 14px 14px 0 14px; }
.msg .cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg .cite { font-family: var(--font-mono); font-size: 11.5px; background: color-mix(in srgb, var(--mint) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent); color: var(--mint); border-radius: 8px; padding: 3px 9px; }
.msg .dropped { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); }
.msg .hint { margin-top: 8px; font-size: 12px; color: var(--muted-foreground); font-style: italic; }
.welcome { max-width: 860px; margin: 0 auto 30px; padding: 30px; text-align: center; }
.welcome h3 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 8px; }
.welcome p { color: var(--muted-foreground); font-size: 15px; }

.console-input-wrap { border-top: 1px solid var(--border); padding: 16px 24px; background: var(--background); }
.console-input { display: flex; gap: 12px; max-width: 860px; margin: 0 auto; }
.console-input input { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px;
  font: inherit; font-size: 15px; color: var(--foreground); outline: none; transition: border-color .15s, box-shadow .15s; }
.console-input input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 22%, transparent); }
.console-input input::placeholder { color: var(--muted-foreground); }
.console-input button { padding: 14px 26px; border-radius: 12px; border: 0; background: var(--primary); color: var(--primary-foreground); font: inherit; font-weight: 650; cursor: pointer; transition: transform .12s, box-shadow .12s; }
[data-theme="quantum"] .console-input button { background: linear-gradient(135deg,#d69bff,#9a59f7); color:#0a0512; }
.console-input button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.console-input button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.typing span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-foreground); margin: 0 2px; animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay: .2s } .typing span:nth-child(3){ animation-delay: .4s }
@keyframes blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

@media (max-width: 820px) {
  .console-wrap { grid-template-columns: 1fr; height: auto; }
  .console-side { border-right: 0; border-bottom: 1px solid var(--border); }
  .console-side .side-inner { display: grid; grid-template-columns: 1fr; gap: 0; padding: 16px 20px; }
  .console-main-body { height: 60vh; }
  .console-body { height: auto; min-height: 100vh; }
}