.assistant-header-flex {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5em 1.2em;
margin-bottom: 0.1em;
}
.assistant-title-bar {
display: flex;
align-items: center;
gap: 0.7em;
}
.accent-bar {
display: inline-block;
width: 5px;
height: 1.7em;
background: var(--accent-amber);
border-radius: 3px;
margin-right: 0.5em;
}
.assistant-header-flex h2 {
margin: 0;
font-size: 1.45em;
font-weight: 700;
letter-spacing: -0.5px;
}
.assistant-badge {
display: inline-block;
background: rgba(192,168,255,0.13);
color: #c7bfff;
border-radius: 999px;
padding: 0.18em 0.8em;
font-size: 0.82em;
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
border: 1px solid var(--border-lavender);
margin-top: 0.18em;
margin-left: 0.7em;
white-space: nowrap;
}
.assistant-subtitle {
color: var(--muted);
font-size: 1.01em;
margin-top: 0.1em;
margin-bottom: 0.2em;
margin-left: 0.2em;
}
.quick-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.3em 0 0.7em 0.2em;
}
.chip {
border: 1px solid rgba(45, 212, 191, 0.34);
background: rgba(45, 212, 191, 0.1);
color: #9df7e7;
border-radius: 999px;
padding: 0.28rem 0.6rem;
font-size: 0.78rem;
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
margin-bottom: 0.1em;
}
.assistant-chat {
margin-top: 0.2em;
}
.chat-message.assistant.welcome {
align-items: flex-start;
margin-bottom: 0.2em;
}
.chat-message.assistant.welcome .chat-bubble {
max-width: 70%;
min-width: 180px;
text-align: left;
margin-left: 0;
margin-right: auto;
font-size: 1em;
background: linear-gradient(160deg, rgba(12, 23, 42, 0.96), rgba(10, 18, 35, 0.88));
border-radius: 12px 16px 14px 18px;
box-shadow: 0 8px 22px rgba(2, 8, 20, 0.18);
}
.chat-meta {
color: var(--muted);
font-size: 0.78em;
margin-bottom: 0.1em;
margin-left: 0.1em;
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.try-asking-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4em;
margin: 1.1em 0 0.5em 0.1em;
}
.try-label {
color: var(--muted);
font-size: 0.88em;
margin-right: 0.5em;
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.suggest-btn {
cursor: pointer;
border: 1px solid var(--border-lavender);
background: rgba(192,168,255,0.09);
color: #e8e0ff;
transition: background 0.18s, border-color 0.18s, color 0.18s;
font-size: 0.81em;
margin-bottom: 0.1em;
}
.suggest-btn:hover {
background: rgba(192,168,255,0.22);
border-color: var(--accent-violet);
color: #fff;
}
.assistant-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.45rem;
align-items: center;
margin-top: 0.15rem;
}
.assistant-input {
width: 100%;
border: 1px solid rgba(96, 165, 250, 0.3);
background: rgba(8, 15, 29, 0.84);
color: var(--text);
border-radius: 8px;
padding: 0.58rem 0.7rem;
font-size: 0.88rem;
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
transition: border-color 140ms ease, box-shadow 170ms ease;
min-height: 2.1rem;
}
.assistant-send {
background: linear-gradient(90deg, var(--accent-violet), var(--accent-cyan));
color: #fff;
font-weight: 600;
border-radius: 8px;
border: none;
box-shadow: 0 2px 12px 0 var(--glow-lavender);
transition: background 0.18s, box-shadow 0.18s;
font-size: 0.98em;
padding: 0.58em 1.1em;
min-width: 70px;
}
.assistant-send:hover:not(:disabled) {
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));
box-shadow: 0 4px 18px 0 var(--glow-lavender);
}
.assistant-note {
color: var(--muted);
font-size: 0.82em;
margin-top: 1.1em;
margin-left: 0.2em;
font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (max-width: 700px) {
.assistant-header-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em 0;
}
.assistant-title-bar {
    gap: 0.4em;
}
.assistant-badge {
    margin-left: 0;
    margin-top: 0.4em;
}
.quick-tags {
    margin-left: 0;
}
.chat-message.assistant.welcome .chat-bubble {
    max-width: 98vw;
}
.try-asking-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
}
.assistant-form {
    grid-template-columns: 1fr;
}
.assistant-send {
    width: 100%;
    min-width: 0;
    margin-top: 0.3em;
}
}