/* /Pages/Home.razor.rz.scp.css */
/* Scoped styles for Home.razor — terminal-style chat UI.
   NOTE: styles targeting MarkupString-injected markdown elements
         (headings, lists, code, etc.) live in app.css because
         Blazor scoped CSS cannot match them (no scope attribute). */

/* ── Splash / Accept gate ───────────────────────────────────────────────── */
.splash[b-zn2cr7gwpa] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 1.5rem;
    background: var(--bg);
}

/* Explicit Latin monospace stack so the ASCII-art backslashes don't render as
   ￥ in a Japanese font environment (see app.css .boot-logo). */
.splash-logo[b-zn2cr7gwpa] {
    font-family: "Cascadia Code", "Fira Code", "Consolas", "Courier New", monospace;
    color: var(--green);
    font-size: 13px;
    line-height: 1.3;
    white-space: pre;
}

.splash-desc[b-zn2cr7gwpa] {
    color: var(--fg-dim);
    font-size: 12px;
    margin-left: 15px;
    margin-right: 15px;
}

.splash-accept[b-zn2cr7gwpa] {
    font-family: var(--font);
    font-size: 14px;
    color: var(--green);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .5rem 2.5rem;
    cursor: pointer;
}

.splash-accept:hover[b-zn2cr7gwpa] {
    background: var(--bg3);
    border-color: var(--green);
}

/* ── Footer (Terms link + copyright) ────────────────────────────────────── */
.app-footer[b-zn2cr7gwpa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 12px;
    color: var(--fg-dim);
}

.app-footer .copyright[b-zn2cr7gwpa] { color: var(--fg-dim); }

/* Splash footer: pinned to the bottom of the centered splash. */
.splash-footer[b-zn2cr7gwpa] {
    position: absolute;
    bottom: 1.25rem;
    left: 0;
    right: 0;
}

/* Terminal footer: sits below the input row at the bottom of the page. */
.terminal-footer[b-zn2cr7gwpa] {
    flex-shrink: 0;
    padding: .4rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg2);
}

.terminal[b-zn2cr7gwpa] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 14px;
    padding: 0;
    overflow: hidden;
}

.output[b-zn2cr7gwpa] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    line-height: 1.65;
    word-break: break-word;
}

/* ── Base line types ────────────────────────────────────────────────────── */
.line[b-zn2cr7gwpa]           { white-space: pre-wrap; padding: 1px 0; }
.line.title[b-zn2cr7gwpa]     { color: var(--green);  font-weight: bold; font-size: 15px; }
.line.dim[b-zn2cr7gwpa]       { color: var(--fg-dim); }
.line.info[b-zn2cr7gwpa]      { color: var(--blue); }
.line.ok[b-zn2cr7gwpa]        { color: var(--green); }
.line.warn[b-zn2cr7gwpa]      { color: var(--orange); }
.line.error[b-zn2cr7gwpa]     { color: var(--red); }
.line.status[b-zn2cr7gwpa]    { color: var(--fg-dim); font-style: italic; }
.line.debug[b-zn2cr7gwpa]     { color: var(--fg-dim); font-size: 0.85em; opacity: 0.75; }
.line.debug-hr[b-zn2cr7gwpa]  { padding: 0; }
.line.debug-hr hr[b-zn2cr7gwpa] { border: none; border-top: 1px solid var(--fg-dim); opacity: 0.3; margin: 4px 0; }
.line.heading[b-zn2cr7gwpa]   { color: var(--purple); margin-top: 4px; }
.line.user-input[b-zn2cr7gwpa]{ color: var(--blue); font-weight: bold; }
.line.result[b-zn2cr7gwpa], .line.result-url[b-zn2cr7gwpa], .line.snippet[b-zn2cr7gwpa], .line.source[b-zn2cr7gwpa] { color: var(--fg); }
.line.blank[b-zn2cr7gwpa]     { height: .5rem; }

/* ── AI response container ──────────────────────────────────────────────── */
/* white-space: normal overrides pre-wrap so markdown block elements lay out.
   Child element styles (.ai p, .ai ul, etc.) are in app.css.              */
.line.ai[b-zn2cr7gwpa],
.line.ai-stream[b-zn2cr7gwpa] {
    white-space: normal;
    color: var(--fg);
    padding: 2px 0;
    line-height: 1.75;
}
.line.ai-stream[b-zn2cr7gwpa] { opacity: 0.9; }

/* ── "thinking" / processing indicator ──────────────────────────────────── */
.line.thinking[b-zn2cr7gwpa] {
    color: var(--green);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: .5rem;
    opacity: .85;
    animation: thinking-pulse-b-zn2cr7gwpa 1.4s ease-in-out infinite;
}

.line.thinking .spinner[b-zn2cr7gwpa] {
    width: 11px;
    height: 11px;
    border: 2px solid var(--border);
    border-top-color: var(--green);
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-zn2cr7gwpa .8s linear infinite;
}

@keyframes spin-b-zn2cr7gwpa       { to { transform: rotate(360deg); } }
@keyframes thinking-pulse-b-zn2cr7gwpa { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ── Input row ──────────────────────────────────────────────────────────── */
.input-row[b-zn2cr7gwpa] {
    display: flex;
    align-items: center;
    padding: .5rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg2);
    gap: .5rem;
    flex-shrink: 0;
}

.prompt-symbol[b-zn2cr7gwpa] {
    color: var(--green);
    font-size: 14px;
    user-select: none;
}

.chat-input[b-zn2cr7gwpa] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--fg);
    font-family: var(--font);
    font-size: 14px;
    caret-color: var(--green);
}

.chat-input[b-zn2cr7gwpa]::placeholder { color: var(--fg-dim); }
.chat-input:disabled[b-zn2cr7gwpa]     { opacity: .5; cursor: wait; }

/* iOS Safari zooms in on focus when font-size < 16px. Fix for touch devices only. */
@media (pointer: coarse) {
    .chat-input[b-zn2cr7gwpa] { font-size: 16px; }
}

/* ── Emergency stop button (shown while a turn is running) ───────────────── */
.stop-btn[b-zn2cr7gwpa] {
    flex-shrink: 0;
    font-family: var(--font);
    font-size: 13px;
    color: var(--red);
    background: var(--bg3);
    border: 1px solid var(--red);
    border-radius: 6px;
    padding: .25rem 1rem;
    cursor: pointer;
    white-space: nowrap;
}

.stop-btn:hover[b-zn2cr7gwpa] { background: var(--red); color: var(--bg); }