/*
    Shared dark theme for the Octopus AI Assistant web pages.

    The application has no static file route, so this file is inlined into each page
    by the template that includes it rather than being served as a stylesheet.
*/

:root {
    --bg: #1d2630;
    --bg-elevated: #202933;
    --bg-hover: #26313d;
    --bg-inset: #161f28;
    --border: #2c3745;
    --border-soft: #243040;
    --text: #f4f6f8;
    --text-muted: #c3c7cb;
    --text-dim: #7d93a8;
    --accent-blue: #4b9fff;
    --accent-purple: #9964ff;
    --amber: #ffd28a;
    --amber-border: #6f5c42;
    --amber-bg: #2a2620;
    --danger: #ff8a8a;
    --danger-border: #5c2f34;
    --danger-bg: #271d20;
    --success: #7ee2a8;
    --success-border: #2f5c47;
    --success-bg: #17251f;
    --radius: 12px;
    --radius-lg: 14px;
    --gradient: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--bg);
    background-image: radial-gradient(120% 55% at 50% -8%, #23313f 0%, rgba(35, 49, 63, 0) 60%);
    color: var(--text-muted);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent-blue);
    text-decoration: none;
}

a:hover {
    color: #7fbaff;
    text-decoration: underline;
}

/* Layout */

.app {
    max-width: 900px;
    margin: 0 auto;
    padding: 26px 20px 64px;
}

.app--narrow {
    max-width: 660px;
}

.section {
    margin-top: 26px;
}

.section-label {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Header */

.app-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-bottom: 8px;
}

.brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid #3a4463;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #273c55, #383055);
}

.brand-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.brand-title a {
    color: inherit;
}

.brand-title a:hover {
    color: inherit;
    text-decoration: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.header-actions a {
    display: flex;
    color: var(--text-dim);
}

.header-actions a:hover {
    color: var(--text);
}

/* Cards */

.panel {
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
}

.label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.help-text {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-dim);
}

/* Inputs. The gradient sits in a 1px frame around the dark inset field. */

.field-frame {
    padding: 1px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, #2b6d96, #4a5da6 50%, #6b45a6);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.field-frame:focus-within {
    background: linear-gradient(90deg, #4bb0ff, #5b6bff 50%, #a15dff);
    box-shadow: 0 0 0 3px rgba(91, 107, 255, 0.14), 0 10px 30px -14px rgba(120, 90, 255, 0.7);
}

.field-frame__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border-radius: calc(var(--radius-lg) - 1px);
    background: var(--bg-inset);
}

.field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    outline: none;
}

.field::placeholder {
    color: var(--text-dim);
}

.field:disabled {
    color: var(--text-dim);
    cursor: not-allowed;
}

.field--textarea {
    min-height: 104px;
    line-height: 1.5;
    resize: vertical;
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.btn:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-gradient {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 6px 20px -8px rgba(97, 125, 255, 0.85);
}

.btn-gradient:not(:disabled):hover {
    background: linear-gradient(90deg, #62aaff, #a877ff);
}

.btn-sm {
    padding: 7px 14px;
    font-size: 13.5px;
}

.btn-ghost {
    border-color: var(--border);
    color: var(--text-muted);
}

.btn-ghost:not(:disabled):hover {
    border-color: #3a4a5e;
    background: var(--bg-hover);
    color: var(--text);
}

.btn-success {
    border-color: var(--success-border);
    background: var(--success-bg);
    color: var(--success);
}

.btn-success:not(:disabled):hover {
    background: #1d3229;
}

.btn-danger {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

.btn-danger:not(:disabled):hover {
    background: #2f2226;
}

/* The circular gradient send button that sits inside the query field. */
.btn-send {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    margin-right: 4px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 0 22px -4px rgba(120, 110, 255, 0.75);
}

.btn-send:not(:disabled):hover {
    background: linear-gradient(90deg, #62aaff, #a877ff);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* Pills */

.chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-inset);
    font-size: 13px;
    color: var(--text-dim);
}

.chip-amber {
    border-color: var(--amber-border);
    background: var(--amber-bg);
    color: var(--amber);
}

/* Alerts */

.alert {
    margin-top: 14px;
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
}

.alert-danger {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
}

.alert-success {
    border-color: var(--success-border);
    background: var(--success-bg);
    color: var(--success);
}

/* Native constraint validation. The forms are marked "was-validated" by script,
   which is what reveals the per-field messages. */

.invalid-feedback {
    display: none;
    margin-top: 8px;
    font-size: 13px;
    color: var(--danger);
}

/* The message sits after the gradient frame rather than after the field itself. */
.was-validated .field-frame:has(.field:invalid) ~ .invalid-feedback {
    display: block;
}

.was-validated .field-frame:has(.field:invalid) {
    background: linear-gradient(90deg, #7c3742, #a1424f);
}

/* Dim the accent while a field cannot be edited. */
.field-frame:has(.field:disabled),
.field-frame:has(.field:read-only) {
    background: linear-gradient(90deg, #2a3441, #333c4d);
}

.field-frame:has(.field:disabled) .field-frame__inner,
.field-frame:has(.field:read-only) .field-frame__inner {
    background: #131a22;
}

/* Spinner */

.spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-top: 16px;
    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Scrollbars */

* {
    scrollbar-color: #3a4a5e var(--bg);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    border: 2px solid var(--bg);
    border-radius: 999px;
    background: #3a4a5e;
}