* { box-sizing: border-box; }
body {
    font-family: -apple-system, system-ui, sans-serif;
    margin: 0; background: #f6f7fb; color: #222;
}
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    background: #4a5cf0; color: white; padding: 12px 20px;
}
.topbar h1 { margin: 0; font-size: 20px; }
.link-btn { background: none; border: none; color: white; cursor: pointer; }
.signout-btn { color: white; text-decoration: none; font-size: 14px; }
.signout-btn:hover { color: white; }

/* Login */
.login-container { max-width: 480px; margin: 80px auto; padding: 30px;
    background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.login-container h1 { text-align: center; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.profile-buttons { display: flex; gap: 12px; }
.profile-card {
    flex: 1; padding: 20px; border: 2px solid #e3e6f0; border-radius: 12px;
    text-align: center; cursor: pointer; display: flex; flex-direction: column;
}
.profile-card input { display: none; }
.profile-card:has(input:checked) { border-color: #4a5cf0; background: #f0f3ff; }
.profile-name { font-weight: 600; font-size: 18px; }
.profile-age { color: #666; font-size: 14px; }
.login-form input[type=password], .login-form button {
    padding: 12px; font-size: 16px; border-radius: 8px; border: 1px solid #ccd;
}
.login-form button { background: #4a5cf0; color: white; border: none; cursor: pointer; }

/* Chat */
.chat { padding: 20px; max-width: 760px; margin: 0 auto;
    height: calc(100vh - 140px); overflow-y: auto; }
.bubble { padding: 14px 18px; border-radius: 16px; margin: 10px 0; max-width: 80%;
    line-height: 1.5; white-space: pre-wrap; }
.bubble.user { background: #4a5cf0; color: white; margin-left: auto; }
.bubble.assistant { background: white; border: 1px solid #e3e6f0; }
.bubble.thinking { opacity: 0.6; font-style: italic; }
.sources { margin-top: 12px; }
.sources-label { font-size: 13px; color: #666; margin-bottom: 6px; }
.source-card { display: block; padding: 10px 12px; margin: 6px 0;
    background: #f0f3ff; border-radius: 10px; text-decoration: none; color: #222; }
.source-card strong { display: block; color: #4a5cf0; }
.source-card span { font-size: 13px; color: #555; }
.chat-form { display: flex; gap: 8px; padding: 12px 16px; max-width: 760px; margin: 0 auto;
    background: white; border-top: 1px solid #e3e6f0; align-items: center; }
.chat-form input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid #ccd;
    border-radius: 24px; font-size: 16px; }
.chat-form button[type="submit"] { flex-shrink: 0; padding: 12px 20px; background: #4a5cf0;
    color: white; border: none; border-radius: 24px; cursor: pointer; font-weight: 600; }

/* [web] inline pill — mirrors the .web-toggle button style */
.web-tag {
    display: inline-block;
    background: white;
    color: #4a5cf0;
    border: 2px solid #4a5cf0;
    font-size: 0.82em;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    vertical-align: middle;
    white-space: nowrap;
}

/* Dashboard */
.dashboard { max-width: 960px; margin: 20px auto; padding: 20px; }
.dashboard section { background: white; border-radius: 12px; padding: 20px;
    margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.alert-card, .url-card { border-left: 4px solid #ddd; padding: 12px 16px; margin: 12px 0;
    background: #fafbff; border-radius: 4px; }
.alert-card { border-color: #e8602b; }
.url-card.verdict-safe { border-color: #2bbb6b; }
.url-card.verdict-borderline { border-color: #f0a500; }
.url-card.verdict-unsafe { border-color: #d63333; }
.url-head { display: flex; justify-content: space-between; align-items: center; }
.verdict { font-size: 12px; padding: 2px 8px; border-radius: 10px;
    background: #eee; text-transform: uppercase; }
.why { color: #555; font-size: 14px; margin: 4px 0; }
.actions { margin-top: 8px; display: flex; gap: 8px; }
.actions button { padding: 8px 14px; border: none; border-radius: 6px;
    background: #4a5cf0; color: white; cursor: pointer; }
.actions button.reject { background: #d63333; }
.empty { color: #888; font-style: italic; }
.domain-list { columns: 3; font-size: 13px; }

/* Improved source cards */
.bubble.welcome { background: #fffbe6; border-color: #f0d878; }
.bubble-text { white-space: pre-wrap; }
.source-card {
    display: block;
    background: #ecfdf3;
    border: 2px solid #2bbb6b;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 8px 0;
    text-decoration: none;
    color: #222;
    transition: transform 0.1s;
}
.source-card:hover, .source-card:active {
    transform: scale(1.02);
    background: #d4f5e0;
}
.source-badge {
    display: inline-block;
    background: #2bbb6b;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.source-title {
    font-size: 16px;
    font-weight: 600;
    color: #115e3d;
    margin-bottom: 2px;
}
.source-why { font-size: 13px; color: #444; margin-bottom: 6px; }
.source-host { font-size: 12px; color: #2bbb6b; font-weight: 600; }
.video-embed {
    margin: 8px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    border: 2px solid #2bbb6b;
}
.video-embed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}
.video-caption {
    padding: 8px 12px;
    font-size: 13px;
    color: #115e3d;
    background: #ecfdf3;
}
.queued-note {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fff4e0;
    border-left: 3px solid #f0a500;
    border-radius: 6px;
    font-size: 13px;
    color: #6b4a00;
}

/* Web toggle button — pill style matching .web-tag inline span */
.web-toggle {
    flex-shrink: 0;
    padding: 10px 14px;
    background: white;
    color: #4a5cf0;
    border: 2px solid #4a5cf0;
    border-radius: 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.web-toggle:hover { background: #f0f3ff; }
.web-toggle.active {
    background: #4a5cf0;
    color: white;
    border-color: #4a5cf0;
}

/* Kid portal: Netflix picker */
.picker-page { min-height: 100vh; background: #f6f7fb; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.picker-page h1 { font-size: 28px; margin-bottom: 32px; text-align: center; color: #222; }
.picker-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; max-width: 720px; }
.picker-card { display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; padding: 20px; border-radius: 16px; transition: transform 0.15s, background 0.15s; }
.picker-card:hover { transform: scale(1.07); background: rgba(0,0,0,.04); }
.picker-avatar { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: white; }
.picker-name { font-size: 17px; font-weight: 600; color: #222; }
.picker-inactive { text-align: center; max-width: 400px; padding: 32px; background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.picker-inactive h2 { margin-bottom: 12px; font-size: 22px; }
.picker-inactive p { color: #555; line-height: 1.6; }

/* Kid portal: PIN entry */
.pin-page { min-height: 100vh; background: #f6f7fb; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.pin-card { background: white; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,.08); padding: 40px 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 320px; width: 100%; }
.pin-avatar { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: white; }
.pin-name { font-size: 22px; font-weight: 700; color: #222; }
.pin-form { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.pin-input { width: 100%; text-align: center; font-size: 28px; letter-spacing: 12px; padding: 14px 16px; border: 2px solid #e3e6f0; border-radius: 12px; outline: none; }
.pin-input:focus { border-color: #4a5cf0; }
.pin-submit { width: 100%; padding: 14px; background: #4a5cf0; color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
.pin-submit:hover { background: #3a4ce0; }
.pin-error { color: #d63333; font-size: 14px; }
.pin-back { font-size: 14px; color: #666; text-decoration: none; }
.pin-back:hover { color: #4a5cf0; }

/* Meter card styles live in app/templates/parent.html <style> block */

@media (max-width: 480px) {
    .chat-form { gap: 6px; padding: 8px; }
    .chat-form button[type="submit"] { padding: 10px 14px; font-size: 14px; }
    .web-toggle { padding: 10px 10px; font-size: 13px; }
}