:root {
    --bg: #fbfafc;
    --surface: #ffffff;
    --surface-soft: #f8f5f8;
    --text: #211c22;
    --muted: #766d77;
    --muted-2: #9a929b;
    --line: #ebe6eb;
    --line-strong: #ddd4dc;
    --accent: #8a4b7c;
    --accent-deep: #713b66;
    --accent-soft: #f4eaf2;
    --accent-faint: #faf5f9;
    --success: #2f8b68;
    --danger: #b35454;
    --shadow: 0 18px 55px rgba(50, 35, 48, .09);
    --shadow-soft: 0 7px 25px rgba(48, 32, 46, .06);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 7%, rgba(138,75,124,.055), transparent 27rem),
        var(--bg);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, textarea, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 74px;
    padding: 11px clamp(16px, 3vw, 34px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(235,230,235,.9);
    backdrop-filter: blur(18px) saturate(1.2);
}
.brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
.brand-logo { display: block; width: min(315px, 44vw); height: 50px; object-fit: contain; object-position: left center; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.ghost-button {
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: #514a52;
    cursor: pointer;
    transition: .16s ease;
}
.ghost-button:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.ghost-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}
.status-dot { width: 8px; height: 8px; border-radius: 999px; background: #bbb4bb; }
.status.online .status-dot { background: var(--success); box-shadow: 0 0 0 4px rgba(47,139,104,.11); }
.status.offline .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(179,84,84,.08); }

.chat-layout { width: min(880px, calc(100% - 36px)); margin: 0 auto; flex: 1; padding-bottom: 182px; }
.hero { text-align: center; padding: clamp(70px, 11vh, 128px) 20px 34px; }
.hero.hidden { display: none; }
.ai-orb {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    background: linear-gradient(145deg, #9c5c8e, #734066);
    box-shadow: 0 18px 42px rgba(124,61,108,.24), inset 0 0 0 1px rgba(255,255,255,.23);
    color: #fff;
}
.ai-orb span { font-family: Georgia, "Times New Roman", serif; font-size: 31px; line-height: 1; transform: translateY(-1px); }
.hero-kicker { color: var(--accent); font-size: 12px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { margin: 8px 0 10px; font-size: clamp(36px, 6vw, 55px); font-weight: 650; line-height: 1.06; letter-spacing: -.045em; }
.hero p { margin: 0 auto; max-width: 620px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.suggestions {
    max-width: 720px;
    margin: 34px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.suggestion {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 17px;
    padding: 13px 15px;
    background: rgba(255,255,255,.84);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(50,35,48,.02);
    transition: border-color .16s, transform .16s, box-shadow .16s, background .16s;
}
.suggestion:hover { transform: translateY(-2px); background: #fff; border-color: #dcd0da; box-shadow: var(--shadow-soft); }
.suggestion-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-weight: 760;
}
.suggestion > span:last-child { min-width: 0; display: grid; gap: 4px; }
.suggestion b { font-size: 13.5px; font-weight: 690; }
.suggestion small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.messages { padding: 38px 0 22px; }
.message-row { display: flex; margin-bottom: 34px; }
.user-row { justify-content: flex-end; }
.message { overflow-wrap: anywhere; }
.user-message {
    max-width: min(76%, 650px);
    padding: 11px 15px 12px;
    border-radius: 20px 20px 6px 20px;
    background: #eee8ed;
    color: #322b32;
    font-size: 14.5px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.assistant-row { align-items: flex-start; gap: 13px; }
.assistant-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, #9b5b8d, #754169);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(124,61,108,.15);
}
.assistant-block { min-width: 0; flex: 1; padding-top: 1px; }
.assistant-label { margin: 0 0 7px; font-size: 12px; font-weight: 720; color: #514850; }
.assistant-message { max-width: 790px; font-size: 15px; line-height: 1.66; color: #2a252a; }
.assistant-message p { margin: 0 0 10px; }
.assistant-message p:last-child { margin-bottom: 0; }
.assistant-message ul, .assistant-message ol { margin: 6px 0 12px; padding-left: 24px; }
.assistant-message li { margin: 4px 0; padding-left: 2px; }
.assistant-message strong { font-weight: 700; }
.assistant-message code { padding: 2px 5px; border-radius: 5px; background: #f2edf1; font-size: .92em; }
.answer-gap { height: 3px; }
.citation {
    display: inline;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-weight: 720;
    cursor: pointer;
}
.citation:hover { text-decoration: underline; }
.message-meta { margin-top: 11px; color: var(--muted-2); font-size: 10.5px; }

.sources { margin-top: 17px; max-width: 790px; }
.sources-summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 5px 10px 5px 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #625961;
    font-size: 12px;
    cursor: pointer;
    transition: .15s ease;
}
.sources-summary:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.sources-summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .16s; }
.sources.expanded .sources-summary svg { transform: rotate(90deg); }
.sources-stack { display: flex; padding-left: 2px; }
.sources-stack i {
    width: 25px;
    height: 25px;
    margin-left: -4px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-style: normal;
    font-size: 10px;
    font-weight: 720;
}
.sources-list { display: none; margin-top: 9px; gap: 7px; }
.sources.expanded .sources-list { display: grid; }
.source-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.source-head {
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.source-head:hover { background: #fcfafc; }
.source-number {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 11px;
    font-weight: 760;
}
.source-info { min-width: 0; flex: 1; display: grid; gap: 3px; }
.source-title { font-size: 12.5px; line-height: 1.4; font-weight: 680; }
.source-section { color: var(--muted); font-size: 11px; line-height: 1.35; }
.source-chevron { width: 16px; height: 16px; margin-top: 5px; fill: none; stroke: #8d858d; stroke-width: 1.8; transition: transform .16s; }
.source-card.open .source-chevron { transform: rotate(90deg); }
.source-snippet { display: none; padding: 11px 14px 13px 49px; border-top: 1px solid var(--line); background: #fcfafc; color: #5d555d; font-size: 12px; line-height: 1.55; }
.source-card.open .source-snippet { display: block; }

.typing { height: 28px; display: flex; align-items: center; gap: 4px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: #9a8395; animation: typing 1.15s infinite; }
.typing span:nth-child(2) { animation-delay: .14s; }
.typing span:nth-child(3) { animation-delay: .28s; }
@keyframes typing { 0%, 75%, 100% { opacity: .25; transform: translateY(0); } 36% { opacity: 1; transform: translateY(-2px); } }

.composer-wrap {
    position: fixed;
    z-index: 15;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25px 16px 13px;
    background: linear-gradient(to top, var(--bg) 74%, rgba(251,250,252,0));
}
.composer {
    width: min(850px, 100%);
    min-height: 58px;
    margin: 0 auto;
    padding: 9px 9px 9px 17px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    border: 1px solid #ded6dd;
    border-radius: 20px;
    background: rgba(255,255,255,.97);
    box-shadow: var(--shadow);
    transition: border-color .16s, box-shadow .16s;
}
.composer:focus-within { border-color: #cdbbca; box-shadow: 0 20px 62px rgba(50,35,48,.11), 0 0 0 3px rgba(138,75,124,.045); }
textarea {
    flex: 1;
    min-height: 39px;
    max-height: 190px;
    padding: 9px 0 7px;
    resize: none;
    overflow-y: auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    line-height: 1.5;
}
textarea::placeholder { color: #9a929a; }
#sendButton {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 13px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: transform .15s, background .15s, opacity .15s;
}
#sendButton:hover { transform: translateY(-1px); background: var(--accent-deep); }
#sendButton:disabled { opacity: .38; cursor: default; transform: none; }
#sendButton svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.composer-note { max-width: 850px; margin: 8px auto 0; text-align: center; color: #968e96; font-size: 10.5px; }
.error-box { padding: 11px 13px; border: 1px solid #eed5d5; border-radius: 11px; background: #fff8f8; color: #824747; font-size: 13px; }

.not-configured { padding: 16vh 20px; text-align: center; }
.not-configured h1 { margin: 18px 0 8px; font-size: 30px; }
.not-configured p { margin: 0 auto; max-width: 560px; color: var(--muted); line-height: 1.6; }

/* one-time setup */
.setup-page { display: grid; place-items: center; padding: 34px 18px; }
.setup-shell { width: min(620px, 100%); }
.setup-logo { display: block; width: min(410px, 80vw); max-height: 82px; object-fit: contain; object-position: left center; margin: 0 auto 24px; }
.setup-card { padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.setup-kicker { color: var(--accent); font-size: 11px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.setup-card h1 { margin: 7px 0 9px; font-size: 30px; letter-spacing: -.03em; }
.setup-lead { margin: 0 0 25px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.setup-form { display: grid; gap: 16px; }
.setup-form label { display: grid; gap: 7px; }
.setup-form label > span { font-size: 12px; font-weight: 680; color: #554d55; }
.setup-form input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 12px; outline: 0; background: #fff; color: var(--text); }
.setup-form input:focus { border-color: #b99ab2; box-shadow: 0 0 0 3px rgba(138,75,124,.07); }
.setup-submit, .primary-link { min-height: 48px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 670; text-decoration: none; cursor: pointer; }
.setup-submit:hover, .primary-link:hover { background: var(--accent-deep); }
.setup-error, .setup-success { margin: 0 0 18px; padding: 12px 13px; border-radius: 11px; font-size: 13px; line-height: 1.5; }
.setup-error { border: 1px solid #edcccc; background: #fff7f7; color: #884848; }
.setup-success { border: 1px solid #cce6da; background: #f5fbf8; color: #2b7157; }
.setup-note { margin: 16px auto 0; text-align: center; color: var(--muted-2); font-size: 10.5px; }

@media (max-width: 760px) {
    .topbar { min-height: 64px; padding: 9px 13px; }
    .brand-logo { width: min(230px, 54vw); height: 43px; }
    .ghost-button span { display: none; }
    .ghost-button { width: 38px; padding: 0; justify-content: center; }
    .status { padding: 0 2px; }
    .status span:last-child { display: none; }
    .chat-layout { width: min(100% - 24px, 880px); padding-bottom: 168px; }
    .hero { padding: 9vh 2px 24px; }
    .hero h1 { font-size: 38px; }
    .hero p { font-size: 14px; }
    .suggestions { grid-template-columns: 1fr; margin-top: 25px; }
    .suggestion { min-height: 68px; }
    .messages { padding-top: 24px; }
    .user-message { max-width: 88%; }
    .assistant-row { gap: 9px; }
    .assistant-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 16px; }
    .assistant-message { font-size: 14.5px; }
    .source-snippet { padding-left: 13px; }
    .composer-wrap { padding: 22px 9px 10px; }
    .composer { min-height: 55px; border-radius: 18px; }
    .composer-note { font-size: 9.5px; }
    .setup-card { padding: 24px 18px; border-radius: 19px; }
}

/* ANaMed Browser Agent v4 MVP */
.mode-tabs{display:flex;gap:4px;background:#f2f4f7;padding:4px;border-radius:12px;margin-right:8px}.mode-tab{border:0;background:transparent;padding:8px 13px;border-radius:9px;font-weight:650;cursor:pointer;color:#667085}.mode-tab.active{background:#fff;color:#101828;box-shadow:0 1px 3px rgba(16,24,40,.12)}
.browser-workspace{width:min(1180px,calc(100% - 36px));margin:34px auto 140px}.browser-workspace.hidden{display:none}.browser-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}.browser-head h1{font-size:34px;margin:6px 0 8px}.browser-head p{max-width:780px;color:#667085;line-height:1.6;margin:0}.bridge-download{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;border:1px solid #d0d5dd;color:#344054;padding:10px 14px;border-radius:10px;background:#fff;font-weight:650}.browser-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.browser-card{background:#fff;border:1px solid #e4e7ec;border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(16,24,40,.04);margin-bottom:16px}.browser-card h2{font-size:17px;margin:0 0 15px}.browser-card label{display:block;font-size:12px;color:#667085;margin:8px 0 6px;font-weight:600}.inline-form{display:flex;gap:8px}.inline-form input,.browser-task-card textarea{width:100%;border:1px solid #d0d5dd;border-radius:10px;padding:11px 12px;font:inherit;outline:none}.inline-form input:focus,.browser-task-card textarea:focus{border-color:#84adff;box-shadow:0 0 0 3px #eff4ff}.browser-card button{border:1px solid #d0d5dd;background:#fff;color:#344054;border-radius:10px;padding:10px 13px;font-weight:650;cursor:pointer}.browser-card button:hover:not(:disabled){background:#f9fafb}.browser-card button:disabled{opacity:.45;cursor:not-allowed}.browser-card button#browserCreate,.browser-card button#browserRunTask,.browser-card button#confirmYes{background:#155eef;color:white;border-color:#155eef}.browser-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.pair-box{margin-top:14px;padding:12px;background:#f8fafc;border:1px dashed #98a2b3;border-radius:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pair-box.hidden,.confirmation-box.hidden{display:none}.pair-box code{font-size:13px;word-break:break-all;flex:1;color:#101828}.browser-status{margin-top:13px;font-size:13px;color:#667085}.browser-status.connected{color:#067647}.browser-current{margin-top:13px;padding-top:13px;border-top:1px solid #eaecf0;display:flex;flex-direction:column;gap:3px}.browser-current small{color:#667085;word-break:break-all}.file-picker{border:1px dashed #d0d5dd;border-radius:10px;padding:12px!important;cursor:pointer;text-align:center;background:#fcfcfd}.file-picker input{display:none}.attached-files{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.file-chip{font-size:12px;background:#f2f4f7;border-radius:20px;padding:6px 9px}.browser-task-card textarea{resize:vertical;min-height:110px}.confirmation-box{margin-top:14px;background:#fffaeb;border:1px solid #fedf89;border-radius:12px;padding:14px}.confirmation-box p{color:#7a2e0e}.confirmation-box .secondary{margin-left:6px}.agent-log{max-height:420px;overflow:auto;border:1px solid #eaecf0;border-radius:12px;background:#fcfcfd}.log-entry{padding:10px 12px;border-bottom:1px solid #eaecf0;font-size:13px;line-height:1.45}.log-entry:last-child{border-bottom:0}.log-entry b{display:block;font-size:11px;color:#667085;text-transform:uppercase;margin-bottom:3px}.log-entry.error{background:#fef3f2;color:#b42318}.log-entry.confirmation{background:#fffaeb}.log-empty{padding:18px;color:#98a2b3;text-align:center}.browser-active .chat-layout>.hero,.browser-active .chat-layout>.messages,.browser-active .composer-wrap{display:none!important}.browser-active .browser-workspace{display:block!important}
@media(max-width:800px){.browser-grid{grid-template-columns:1fr}.browser-head{flex-direction:column}.mode-tabs{order:2;width:100%;margin:8px 0 0}.top-actions{flex-wrap:wrap}.bridge-download{width:100%;justify-content:center}}