/* Arch System — gaya antarmuka (mode gelap bawaan, mode terang opsional) */
:root, [data-theme="dark"] {
  --bg: #212121; --side: #171717; --panel: #1c1c1c; --panel-2: #262626; --input: #303030;
  --border: #3a3a3a; --text: #ececec; --muted: #a3a3a3; --faint: #737373;
  --accent-rgb: 245,247,250; --glow-rgb: 220,232,255; --accent: rgb(var(--accent-rgb)); --accent-2: #dfe3ea; --on-accent: #111214; --accent-soft: rgba(var(--accent-rgb),.14);
  --glow-border: rgba(var(--glow-rgb),.21); --glow: 0 0 0 1px rgba(var(--glow-rgb),.045), 0 0 18px rgba(var(--glow-rgb),.075);
  --glow-strong: 0 0 0 3px rgba(var(--glow-rgb),.09), 0 0 28px rgba(var(--glow-rgb),.165);
  --danger: #ef4444; --warn: #f59e0b; --user-bubble: #303030; --code: #0d0d0d; --shadow: 0 10px 40px rgba(0,0,0,.45);
}
[data-theme="light"] {
  --accent-rgb: 32,33,36; --glow-rgb: 60,70,90; --on-accent: #ffffff;
  --bg: #ffffff; --side: #f9f9f9; --panel: #ffffff; --panel-2: #f4f4f4; --input: #f4f4f4;
  --border: #e5e5e5; --text: #1f1f1f; --muted: #5d5d5d; --faint: #8f8f8f;
  --accent-soft: rgba(var(--accent-rgb),.12); --glow-border: rgba(var(--accent-rgb),.30);
  --glow: 0 0 0 1px rgba(var(--accent-rgb),.08), 0 0 14px rgba(var(--accent-rgb),.10); --glow-strong: 0 0 0 1px rgba(var(--accent-rgb),.35), 0 0 22px rgba(var(--accent-rgb),.18); --user-bubble: #f1f1f1; --code: #f6f6f6; --shadow: 0 10px 40px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }
.hidden { display: none !important; }

/* ---------- tata letak ---------- */
.layout { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar { width: 260px; flex: 0 0 260px; background: var(--side); display: flex; flex-direction: column;
  transition: margin-left .2s ease; border-right: 1px solid transparent; }
.layout.collapsed .sidebar { margin-left: -260px; }
.side-top { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: .2px; }
.logo-mark { width: 26px; height: 26px; border-radius: 8px; background: transparent; display: grid; place-items: center; color: var(--on-accent); font-weight: 800; font-size: 14px; overflow: hidden; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 4px rgba(var(--glow-rgb),.35)); }
[data-theme="light"] .logo-mark img, [data-theme="light"] .logo-img { filter: invert(1) brightness(.25); }
.logo-img { display: block; margin: 0 auto 6px; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(var(--glow-rgb),.25)); width: 120px; height: 120px; }
.logo-mark svg { width: 16px; height: 16px; }
.icon-btn { background: none; border: 0; color: var(--muted); width: 34px; height: 34px; border-radius: 8px;
  display: inline-grid; place-items: center; cursor: pointer; }
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }
.side-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--text); }
.side-btn:hover { background: var(--panel-2); }
.side-btn svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.search { position: relative; }
.search input { width: 100%; padding: 8px 10px 8px 34px; border-radius: 9px; border: 1px solid transparent;
  background: var(--panel-2); outline: none; font-size: 14px; }
.search input:focus { border-color: var(--border); }
.search svg { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; color: var(--faint); }
.side-section { font-size: 12px; color: var(--faint); padding: 12px 12px 4px; }
.conv-list { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.conv { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  font-size: 14px; color: var(--text); }
.conv:hover { background: var(--panel-2); }
.conv.active { background: #2a2a2a; box-shadow: inset 0 0 0 1px var(--glow-border), 0 0 12px rgba(var(--glow-rgb),.075); }
[data-theme="light"] .conv.active { background: #efefef; }
.conv .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conv .ch { font-size: 11px; color: var(--faint); }
.conv .del { opacity: 0; background: none; border: 0; color: var(--faint); cursor: pointer; padding: 0 2px; }
.conv:hover .del { opacity: 1; }
.side-bottom { padding: 10px; border-top: 1px solid var(--border); position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 10px;
  background: none; border: 0; cursor: pointer; text-align: left; }
.user-btn:hover { background: var(--panel-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #5b5bd6; color: #fff; display: grid;
  place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.user-meta { min-width: 0; }
.user-meta .n { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta .r { font-size: 12px; color: var(--faint); }
.menu { position: absolute; bottom: 62px; left: 10px; right: 10px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 40; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: none; border: 0;
  border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; }
.menu button:hover { background: var(--panel-2); }
.menu svg { width: 17px; height: 17px; color: var(--muted); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.topbar { height: 54px; display: flex; align-items: center; gap: 6px; padding: 0 10px; flex: none; }
.model-select { position: relative; }
.model-btn { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; background: none;
  border: 0; cursor: pointer; font-size: 16px; font-weight: 550; color: var(--text); }
.model-btn:hover { background: var(--panel-2); }
.model-btn small { color: var(--faint); font-weight: 400; font-size: 13px; }
.model-btn { white-space: nowrap; max-width: 60vw; } .model-btn span, .model-btn small { overflow: hidden; text-overflow: ellipsis; }
.model-btn svg { width: 14px; height: 14px; flex: none; opacity: .7; }
.model-menu { position: absolute; top: 42px; left: 0; min-width: 280px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 30; }
.model-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 0;
  background: none; cursor: pointer; }
.model-menu button:hover { background: var(--panel-2); }
.model-menu .m { font-size: 12px; color: var(--faint); }
.topbar .spacer { flex: 1; }
.pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.pill.warn { background: rgba(245,158,11,.15); color: var(--warn); }

/* ---------- obrolan ---------- */
.thread { flex: 1; overflow-y: auto; }
.col { max-width: 768px; margin: 0 auto; padding: 0 20px; }
.msgs { padding: 12px 0 30px; }
.msg { margin: 22px 0; }
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .bubble { background: var(--user-bubble); padding: 10px 16px; border-radius: 20px; max-width: 80%;
  white-space: pre-wrap; word-wrap: break-word; border: 1px solid var(--glow-border); box-shadow: var(--glow); }
.msg-actions { display: flex; gap: 2px; margin-top: 8px; opacity: .7; }
.msg-actions .icon-btn { width: 28px; height: 28px; } .msg-actions .icon-btn svg { width: 15px; height: 15px; }
.msg.assistant .body { word-wrap: break-word; }
.body p { margin: 0 0 12px; } .body p:last-child { margin-bottom: 0; }
.body h1, .body h2, .body h3 { margin: 18px 0 8px; line-height: 1.3; } .body h1 { font-size: 1.35em; } .body h2 { font-size: 1.2em; } .body h3 { font-size: 1.05em; }
.body ul, .body ol { margin: 0 0 12px; padding-left: 24px; }
.body code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.body pre { background: var(--code); border: 1px solid var(--border); padding: 12px 14px; border-radius: 10px; overflow-x: auto; }
.body pre code { background: none; padding: 0; }
.body table { border-collapse: collapse; margin: 0 0 12px; display: block; overflow-x: auto; }
.body th, .body td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.body blockquote { border-left: 3px solid var(--border); margin: 0 0 12px; padding-left: 12px; color: var(--muted); }
.tool-line { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; margin: 4px 0; cursor: pointer; user-select: none; }
.tool-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(var(--glow-rgb),.5); }
.tool-line.run .dot { animation: pulse 1s infinite; }
.tool-line.err .dot { background: var(--danger); }
.tool-detail { font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; background: var(--code); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; margin: 2px 0 8px; white-space: pre-wrap; max-height: 240px; overflow: auto; color: var(--muted); }
.notice { font-size: 13px; color: var(--warn); margin: 6px 0; }
.err-text { color: var(--danger); }
.typing span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--muted); animation: pulse 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { 0%,100% { opacity: .3 } 50% { opacity: 1 } }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 30px 20px 10px; text-align: center; }
.empty h1 { font-size: 28px; font-weight: 600; margin: 0 0 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 680px; margin-top: 16px; }
.chip { border: 1px solid var(--glow-border); box-shadow: var(--glow); background: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; color: var(--muted); font-size: 14px; }
.chip:hover { background: var(--panel-2); color: var(--text); box-shadow: var(--glow-strong); }

.composer-wrap { flex: none; padding: 0 0 14px; }
.composer { background: var(--input); border-radius: 26px; padding: 12px 12px 10px 18px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--glow-border); box-shadow: var(--glow); transition: box-shadow .2s, border-color .2s; }
.composer:focus-within { border-color: rgba(var(--glow-rgb),.45); box-shadow: var(--glow-strong); }
.composer textarea { width: 100%; resize: none; border: 0; outline: none; background: none; max-height: 200px; min-height: 28px; padding: 4px 0; line-height: 1.5; font-size: 15.5px; }
.composer .tools { display: flex; align-items: center; gap: 6px; }
.composer .round { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.composer .round:hover, .composer .attach:hover { color: var(--text); background: var(--panel-2); }
.composer .attach { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); padding: 6px 10px; border-radius: 999px; cursor: pointer; font-size: 13.5px; }
.composer .round svg, .composer .attach svg { width: 17px; height: 17px; }
.composer .send-btn { margin-left: auto; }
.composer .icon-btn { width: 36px; height: 36px; border-radius: 50%; }
.send-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); display: grid; place-items: center; cursor: pointer; flex: none; }
.send-btn:disabled { opacity: .35; cursor: default; }
.send-btn svg { width: 18px; height: 18px; }
.disclaimer { text-align: center; font-size: 12px; color: var(--faint); margin-top: 8px; }
.attach-chip { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; background: var(--panel-2); border-radius: 8px; padding: 4px 10px; margin: 0 0 8px 8px; }

/* ---------- formulir & modal ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.card { background: var(--panel); border: 1px solid var(--glow-border); border-radius: 16px; padding: 28px; width: 100%; max-width: 420px; box-shadow: var(--shadow); }
.card.wide { max-width: 560px; }
.card h1 { font-size: 22px; margin: 10px 0 4px; } .card p.sub { color: var(--muted); margin: 0 0 20px; }
label.f { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 5px; }
.inp, select.inp, textarea.inp { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--input); outline: none; }
.inp:focus { border-color: var(--accent); }
textarea.inp { min-height: 90px; resize: vertical; }
.btn { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; font-size: 14px; }
.btn:hover { filter: brightness(1.1); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; margin-top: 18px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > .grow { flex: 1; }
.err { color: var(--danger); font-size: 14px; margin-top: 10px; min-height: 1em; }
.hint { font-size: 12.5px; color: var(--faint); margin-top: 4px; }
.steps { display: flex; gap: 6px; margin: 14px 0 6px; } .steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--border); } .steps i.on { background: var(--accent); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.choice { border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: pointer; font-size: 13.5px; background: none; text-align: left; }
.choice.on { border-color: var(--accent); background: var(--accent-soft); }
.choice small { display: block; color: var(--faint); }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { background: var(--panel); border: 1px solid var(--glow-border); border-radius: 16px; width: 100%; max-width: 980px; height: min(86vh, 760px);
  display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
.modal.small { max-width: 640px; height: auto; max-height: 86vh; }
.modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 17px; margin: 0; flex: 1; }
.modal-body { flex: 1; display: flex; min-height: 0; }
.modal-nav { width: 200px; border-right: 1px solid var(--border); padding: 10px; overflow-y: auto; flex: none; }
.modal-nav button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--muted); }
.modal-nav button:hover { background: var(--panel-2); color: var(--text); }
.modal-nav button.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--glow-border); }
.modal-nav .sep { font-size: 11px; color: var(--faint); padding: 12px 10px 4px; text-transform: uppercase; letter-spacing: .5px; }
.modal-content { flex: 1; overflow-y: auto; padding: 18px 22px 30px; }
.modal-content h3 { margin: 0 0 4px; font-size: 16px; } .modal-content .desc { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.sec { border: 1px solid var(--glow-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--glow); }
.sec h4 { margin: 0 0 8px; font-size: 14px; }
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th { text-align: left; color: var(--faint); font-weight: 500; padding: 8px 6px; border-bottom: 1px solid var(--border); }
table.list td { padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--panel-2); border-radius: 12px; padding: 12px 14px; }
.stat .v { font-size: 22px; font-weight: 600; } .stat .l { font-size: 12px; color: var(--faint); }
.bar { height: 6px; background: var(--border); border-radius: 6px; overflow: hidden; margin-top: 6px; } .bar i { display: block; height: 100%; background: var(--accent); }
.qr { background: #fff; border-radius: 12px; padding: 10px; width: 180px; height: 180px; }
.qr img, .qr svg { width: 100%; height: 100%; }
.url-big { font-size: 20px; font-weight: 600; font-family: ui-monospace, Menlo, Consolas, monospace; }
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--border); border-radius: 22px; cursor: pointer; transition: .2s; }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),.25); } .switch input:checked + span::before { transform: translateX(16px); background: var(--on-accent); }
.tag { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); margin: 0 4px 4px 0; }
.tag.ok { background: var(--accent-soft); color: var(--accent); } .tag.bad { background: rgba(239,68,68,.15); color: var(--danger); }
details.adv summary { cursor: pointer; color: var(--muted); font-size: 14px; margin: 8px 0; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--border);
  padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); z-index: 200; font-size: 14px; max-width: 90vw; }
.code-big { font-size: 34px; letter-spacing: 6px; font-weight: 700; font-family: ui-monospace, Menlo, monospace; }

/* ---------- seluler ---------- */
.scrim { display: none; }
@media (max-width: 800px) {
  .sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; box-shadow: var(--shadow); }
  .layout.collapsed .sidebar { margin-left: -280px; }
  .layout:not(.collapsed) .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 45; }
  .modal { height: 100%; max-height: none; border-radius: 0; }
  .overlay { padding: 0; }
  .modal-body { flex-direction: column; }
  .modal-nav { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 6px; }
  .modal-nav button { white-space: nowrap; width: auto; }
  .modal-nav .sep { display: none; }
  .msg.user .bubble { max-width: 90%; }
  .empty h1 { font-size: 23px; }
  .col { padding: 0 12px; }
}

.artifact-list { margin: 12px 0 24px; display:flex; flex-wrap:wrap; gap:8px; }
.artifact-heading { width:100%; font-size:12px; color:var(--muted); }
.artifact-item { cursor:pointer; border:1px solid var(--border); background:var(--panel-2); color:var(--text); border-radius:10px; padding:9px 12px; text-align:left; }
.artifact-item:hover { border-color:var(--accent); }
[data-accent="blue"] { --accent-rgb:59,130,246; --on-accent:#fff; }
[data-accent="green"] { --accent-rgb:16,185,129; --on-accent:#081b15; }
[data-accent="purple"] { --accent-rgb:168,85,247; --on-accent:#fff; }
[data-accent="amber"] { --accent-rgb:245,158,11; --on-accent:#201500; }

.arch-nav{display:flex;flex-direction:column;padding:4px 12px;gap:4px}.arch-nav button{background:transparent;border:0;color:inherit;display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border-radius:8px;cursor:pointer}.arch-nav button:hover{background:var(--hover,rgba(127,127,127,.13))}.arch-nav svg{width:18px;height:18px;flex-shrink:0}.collapsed .arch-nav button{font-size:0}.collapsed .arch-nav svg{width:20px;height:20px}

/* 2026 UX: quick resources, personal agent switcher, human-only team messenger */
.side-mini{float:right;border:0;background:none;color:var(--accent,#60a5fa);font-size:11px;cursor:pointer}
.side-quick{display:grid;gap:2px;padding:2px 10px 8px;max-height:165px;overflow:auto}
.side-resource{display:block;width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:6px 9px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:12px}
.side-resource:hover,.team-contact:hover{background:var(--surface-hover,rgba(128,128,128,.14))}
.agent-quick{max-width:190px;min-width:100px;background:transparent;border:1px solid var(--border,rgba(128,128,128,.3));border-radius:9px;color:inherit;padding:7px;font-size:12px}
.agent-quick option{color:#111}
.team-shell{display:grid;grid-template-columns:minmax(170px,240px) 1fr;min-height:460px;height:min(70vh,720px);border:1px solid var(--border,rgba(128,128,128,.3));border-radius:12px;overflow:hidden}
.team-contacts{overflow:auto;border-right:1px solid var(--border,rgba(128,128,128,.3));padding:12px}
.team-contact{width:100%;display:flex;align-items:center;gap:9px;padding:10px;border:0;background:transparent;color:inherit;text-align:left;border-radius:9px;cursor:pointer}
.team-contact.selected{background:var(--surface-hover,rgba(128,128,128,.2))}
.team-contact small{display:block;opacity:.7;font-size:11px}
.team-avatar{border-radius:50%;width:32px;height:32px;background:var(--accent,#547dba);color:white;display:grid;place-items:center;flex-shrink:0}
.team-conversation{display:flex;flex-direction:column;min-width:0;min-height:0}
.team-header{padding:14px;border-bottom:1px solid var(--border,rgba(128,128,128,.3));font-weight:600}
.team-history{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px}
.team-bubble{max-width:80%;border-radius:14px;padding:10px 13px;overflow-wrap:anywhere;white-space:pre-wrap;background:var(--surface-hover,rgba(128,128,128,.16));align-self:flex-start}
.team-bubble.mine{align-self:flex-end;background:rgba(34,150,105,.19)}
.team-bubble time{display:block;font-size:10px;opacity:.65;text-align:right;margin-top:5px}
.team-compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border,rgba(128,128,128,.3))}
.team-compose textarea{flex:1;min-width:0;border:1px solid var(--border,rgba(128,128,128,.3));border-radius:9px;background:transparent;color:inherit;padding:10px;resize:none}
@media(max-width:650px){.team-shell{grid-template-columns:120px 1fr}.team-contacts{padding:5px}.team-contact{padding:7px;font-size:11px}.agent-quick{max-width:135px}}

.arch-project-page{position:fixed;inset:0;z-index:2000;background:var(--bg,#10131b);color:var(--text,#f5f5f5);overflow:auto;padding:24px clamp(16px,4vw,60px)}.arch-project-top{display:flex;align-items:center;gap:20px;justify-content:space-between}.arch-project-nav{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.arch-project-nav button{border:1px solid var(--border,#555);border-radius:8px;padding:10px 16px;background:transparent;color:inherit;cursor:pointer}.arch-project-nav button.on{background:var(--accent,#2563eb);color:white}.arch-project-body{max-width:1400px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start}.arch-project-body>.sec{min-width:0;margin:0}.arch-project-body>.sec[hidden]{display:none}.arch-notif-button{position:fixed;right:20px;top:14px;z-index:1000;border-radius:30px;border:1px solid var(--border,#555);background:var(--bg,#151923);color:inherit;padding:9px 13px;cursor:pointer}#arch-notification-count:not(:empty){background:#e53935;color:white;border-radius:20px;padding:2px 6px;font-size:11px}@media(max-width:700px){.arch-project-body{display:block}.arch-project-body>.sec{margin-bottom:16px}.arch-project-top{flex-wrap:wrap}}

.arch-project-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:30px}.arch-project-card{text-align:left;border:1px solid var(--border,#555);border-radius:12px;padding:22px;background:var(--surface,#20232c);color:inherit;cursor:pointer}.arch-project-card:hover{outline:2px solid var(--accent,#2563eb)}

/* ARCH UI refinement — design system and full-page project workspace */
:root,[data-theme="dark"]{--arch-radius:14px;--arch-focus:0 0 0 3px rgba(99,130,255,.23)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #819cff;outline-offset:2px}
.sidebar{border-right:1px solid var(--border);background:var(--side)}
.side-top{padding:16px 12px 10px;gap:8px}.brand{padding:6px 8px 16px}.side-section{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;padding:18px 12px 7px}
.side-btn{border-radius:10px;min-height:40px;transition:background .16s ease,transform .16s ease}.side-btn:hover{transform:translateX(2px)}.side-bottom{padding:14px 12px}
.topbar{border-bottom:1px solid var(--border);min-height:60px;padding-inline:18px}.conv-list{scrollbar-width:thin}.conv{min-height:38px;transition:background .15s ease}
.arch-project-page{position:fixed;inset:0;z-index:2000;background:var(--bg);color:var(--text);padding:0;overflow:auto;font-size:14px}
.arch-workspace-shell{min-height:100vh;display:grid;grid-template-columns:252px minmax(0,1fr)}
.arch-workspace-rail{background:var(--side);border-right:1px solid var(--border);padding:26px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.arch-workspace-brand{display:flex;align-items:center;gap:12px;padding:0 10px 24px;font-size:17px;font-weight:800;letter-spacing:.035em}
.arch-workspace-brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.15em;font-weight:650}
.arch-workspace-monogram{width:36px;height:36px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid var(--glow-border);border-radius:11px}
.arch-rail-caption{font-size:10px;letter-spacing:.14em;color:var(--faint);font-weight:800;margin:20px 12px 8px}
.arch-rail-link,.arch-project-nav button{width:100%;border:0;background:transparent;color:var(--muted);padding:11px 13px;text-align:left;border-radius:10px;font-weight:550;cursor:pointer;transition:background .15s,color .15s}
.arch-rail-link:hover,.arch-project-nav button:hover{background:var(--panel-2);color:var(--text)}
.arch-project-nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:4px;margin:0}
.arch-project-nav button.on{background:var(--accent-soft);color:var(--text);font-weight:750;box-shadow:inset 3px 0 var(--accent)}
.arch-rail-footer{margin-top:auto;padding:24px 12px 4px;color:var(--faint);font-size:11px}
.arch-workspace-main{min-width:0;max-width:1560px;width:100%;margin:0 auto;padding:38px clamp(20px,4vw,64px) 70px}
.arch-project-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--border);margin-bottom:26px}
.arch-project-top h1{font-size:clamp(25px,2.7vw,36px);letter-spacing:-.035em;line-height:1.15;margin:8px 0}
.arch-project-top p{margin:0;color:var(--muted);font-size:14px}.arch-eyebrow{font-size:11px;letter-spacing:.15em;font-weight:750;color:var(--muted)}
.arch-project-body{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.arch-project-body>.sec{min-width:0;margin:0;border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:22px;box-shadow:0 5px 20px rgba(0,0,0,.035)}
.arch-project-body>.sec[hidden]{display:none}.arch-project-body>.sec h3{margin-top:0;letter-spacing:-.02em}
.arch-loading-state{padding:48px 20px;text-align:center;color:var(--muted);grid-column:1/-1}
.arch-project-index-shell{max-width:1300px;margin:auto;padding:42px clamp(20px,5vw,65px) 80px}
.arch-project-index-intro{display:flex;flex-direction:column;gap:4px;padding:22px 24px;background:var(--panel);border:1px solid var(--border);border-radius:16px}.arch-project-index-intro span{color:var(--muted);font-size:13px}
.arch-header-actions{display:flex;gap:10px;flex-wrap:wrap}
.arch-project-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:18px;margin-top:24px}
.arch-project-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;min-height:178px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:transform .15s,border-color .15s,box-shadow .15s}
.arch-project-card h3{font-size:17px;line-height:1.3;margin:0;letter-spacing:-.02em}.arch-project-card p{font-size:13px;color:var(--muted);line-height:1.6;margin:0;flex:1}.arch-project-card small{font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:var(--accent-soft);border-radius:20px;padding:4px 9px}
.arch-project-card:hover{outline:none;border-color:var(--glow-border);transform:translateY(-3px);box-shadow:var(--shadow)}
@media(max-width:900px){.arch-workspace-shell{grid-template-columns:200px minmax(0,1fr)}.arch-workspace-main{padding:28px 20px}.arch-project-body{grid-template-columns:1fr}}
@media(max-width:640px){.arch-workspace-shell{display:block}.arch-workspace-rail{position:relative;padding:12px 16px}.arch-workspace-brand{padding:0 0 8px}.arch-rail-caption,.arch-rail-footer,.arch-rail-link{display:none}.arch-project-nav{display:flex;flex-direction:row;overflow-x:auto;gap:6px;padding:4px 0}.arch-project-nav button{white-space:nowrap;width:auto;padding:8px 12px;font-size:12px}.arch-project-nav button.on{box-shadow:inset 0 -3px var(--accent)}.arch-workspace-main{padding:24px 16px}.arch-project-top{align-items:flex-start;flex-wrap:wrap}.arch-project-index-shell{padding:24px 16px}.arch-project-index{grid-template-columns:1fr}.arch-project-body>.sec{padding:16px}}
@media(prefers-reduced-motion:reduce){.arch-project-card,.side-btn,.arch-rail-link,.arch-project-nav button{transition:none!important;transform:none!important}}

/* Dedicated full-page AI chat view, with permanent navigation. */
#layout .main{min-width:0;min-height:100dvh;}
#layout .main .thread{max-width:100%;}

/* Navigation refinement */
.sidebar { border-right:1px solid var(--border); }
.side-top { padding:16px 12px 8px; gap:10px; }
.brand { padding-bottom:12px; }
.side-section { font-size:10px; font-weight:750; letter-spacing:.10em; padding:16px 14px 6px; }
.arch-nav { display:flex; flex-direction:column; gap:3px; padding:0 9px; }
.arch-nav button { display:flex; align-items:center; gap:12px; width:100%; min-height:40px; padding:9px 12px; border:0; border-radius:10px; background:transparent; color:var(--muted); text-align:left; font-size:13px; font-weight:520; cursor:pointer; }
.arch-nav button svg { width:18px; height:18px; flex:none; }
.arch-nav button:hover,.arch-nav button:focus-visible { background:var(--panel-2); color:var(--text); }
.sidebar-files { margin:12px 10px 0; border-top:1px solid var(--border); }
.sidebar-files summary { cursor:pointer; color:var(--muted); font-size:12px; padding:12px 6px; }
.sidebar-files .side-quick { max-height:180px; overflow:auto; }
.sidebar-files .side-mini { margin:6px; }
.side-btn { background:var(--panel-2); font-weight:600; justify-content:center; }
.topbar { min-height:64px; height:64px; padding:0 22px; border-bottom:1px solid var(--border); }
:where(button,input,textarea,select,a,summary):focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }
@media (max-width:800px) { .topbar { padding:0 12px; } .arch-nav button { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Dedicated, deep-linkable workspace pages */
.arch-dedicated-content{max-width:1260px;margin:26px auto 0;min-width:0}
.arch-dedicated-content>.sec{margin-bottom:18px;border-radius:14px}
.arch-dedicated-content h3{font-size:19px;letter-spacing:-.025em;margin:0 0 8px}
.arch-dedicated-content .desc{color:var(--muted);line-height:1.6}
.arch-dedicated-content .team-shell{height:min(72vh,780px);min-height:480px;border-radius:16px}
.arch-dedicated-content .team-contacts{min-width:0}
.arch-dedicated-content .team-conversation{min-width:0}
.arch-dedicated-page .arch-rail-link.on{background:var(--panel-2);color:var(--text);font-weight:650}
.arch-dedicated-content .inp{max-width:100%}
.arch-dedicated-content .row{gap:12px;flex-wrap:wrap}
@media(max-width:700px){.arch-dedicated-content{margin-top:16px}.arch-dedicated-content .team-shell{grid-template-columns:115px minmax(0,1fr);height:68vh;min-height:420px}.arch-dedicated-content .team-contacts{padding:5px}.arch-dedicated-content .team-contact{padding:8px 4px}}


/* ARCH 2026 — Futuristic Enterprise Design Layer */
:root,[data-theme="dark"]{--bg:#090f1b;--side:#0c1423;--panel:#111e30;--panel-2:#1b2a40;--input:#162439;--border:#293a50;--text:#eef5ff;--muted:#a6b7ce;--faint:#8598b1;--accent-rgb:101,211,235;--glow-rgb:79,172,241;--accent:rgb(var(--accent-rgb));--accent-2:#a7eaf6;--on-accent:#061521;--accent-soft:rgba(var(--accent-rgb),.13);--glow-border:rgba(var(--glow-rgb),.23);--glow:0 5px 24px rgba(0,7,24,.15);--glow-strong:0 16px 48px rgba(0,8,30,.32);--user-bubble:#1c2c42;--code:#080f1b;--shadow:0 20px 65px rgba(0,0,0,.4);color-scheme:dark}
[data-theme="light"]{--bg:#f7f9fd;--side:#eef3fa;--panel:#fff;--panel-2:#e9f0f8;--input:#f1f5fa;--border:#d7e2ed;--text:#17253a;--muted:#4e6179;--faint:#667a91;--accent-rgb:19,108,156;--glow-rgb:30,118,175;--accent:rgb(var(--accent-rgb));--accent-2:#135e89;--on-accent:#fff;--accent-soft:rgba(var(--accent-rgb),.1);--glow-border:rgba(var(--glow-rgb),.2);--glow:0 4px 18px rgba(22,54,96,.07);--glow-strong:0 15px 40px rgba(22,54,96,.12);--user-bubble:#e8f2fb;--code:#f0f5fa;--shadow:0 16px 45px rgba(31,57,88,.13);color-scheme:light}
html,body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.008em}
.sidebar{width:270px;flex-basis:270px;border-right:1px solid var(--border);background:var(--side)}
.layout.collapsed .sidebar{margin-left:-270px}
.side-top{padding:16px 12px 8px;gap:9px}.brand{padding:4px 8px 12px}
.side-section{font-size:10px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;padding:17px 12px 6px;color:var(--faint)}
.side-btn,.conv,.menu button{border-radius:11px;min-height:40px;transition:background-color .15s ease,color .15s ease}
.side-btn:hover,.conv:hover,.menu button:hover{background:var(--panel-2)}
.conv.active,[data-theme="light"] .conv.active{background:var(--accent-soft);box-shadow:inset 3px 0 var(--accent)}
.search input{min-height:40px;background:var(--panel);border:1px solid var(--border)}.search input:focus{border-color:var(--accent)}
.side-bottom{background:var(--side)}.user-btn{min-height:48px}.avatar{background:linear-gradient(135deg,#167b9e,#6a5ee4)}
.topbar{height:66px;min-height:66px;padding:0 24px;border-bottom:1px solid var(--border);background:var(--bg)}
.model-btn{font-size:15px;font-weight:650;min-height:40px}.model-menu,.menu{border-radius:16px;box-shadow:var(--shadow)}
.main{background:var(--bg)}.col{max-width:850px}.msgs{padding-top:20px}.msg{margin:26px 0}
.msg.user .bubble{border:1px solid var(--border);box-shadow:none;border-radius:18px 18px 6px 18px}
.msg.assistant .body{line-height:1.75}.body h1,.body h2,.body h3{letter-spacing:-.025em}
.body pre{border:1px solid var(--border);border-radius:12px}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button{transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
button:active:not(:disabled){transform:translateY(1px)}:where(input,textarea,select){accent-color:var(--accent)}
:where(.card,.panel,.modal,.dialog){border-color:var(--border)}
:where(.arch-page,.workspace-page,.arch-workspace-page){background:var(--bg);color:var(--text)}
:where(.arch-page h1,.workspace-page h1,.arch-workspace-page h1){letter-spacing:-.035em}
::selection{background:rgba(var(--accent-rgb),.28)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--border);border:2px solid var(--bg);border-radius:10px}
@media(max-width:800px){.topbar{padding:0 12px;height:58px;min-height:58px}.side-btn,.conv{min-height:44px}.col{padding-left:14px;padding-right:14px}.model-btn{max-width:55vw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Focus treatment: remove double blue rectangles from text fields. */
input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible,[contenteditable="true"]:focus,[contenteditable="true"]:focus-visible {outline:none!important;box-shadow:none!important;}
.composer:focus-within {border-color:var(--border);box-shadow:none;}
/* Keyboard navigation remains visible on actionable controls. */
button:focus-visible,a:focus-visible,summary:focus-visible,[role="button"]:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}

/* ARCH Deep Black Minimal — v1: monochrome by default, no neon or excessive glow */
:root,[data-theme="dark"] {
 --bg:#050505; --side:#0d0d0d; --panel:#151515; --panel-2:#202020; --input:#1d1d1d;
 --border:#2b2b2b; --text:#f5f5f5; --muted:#b4b4b4; --faint:#898989;
 --accent-rgb:229,229,229; --glow-rgb:150,150,150; --accent:#e5e5e5; --accent-2:#fff;
 --on-accent:#101010; --accent-soft:rgba(255,255,255,.09); --glow-border:#303030;
 --glow:none; --glow-strong:0 12px 34px rgba(0,0,0,.35); --user-bubble:#222;
 --code:#111; --shadow:0 18px 48px rgba(0,0,0,.38); color-scheme:dark;
}
/* Keep optional light mode available for accessibility and existing preferences. */
html,body{background:var(--bg)}
body,.main,.arch-page,.workspace-page,.arch-workspace-page{background:var(--bg);color:var(--text)}
.sidebar,.side-bottom{background:var(--side)}
.sidebar{border-right:1px solid var(--border)}
.side-top{gap:6px}.brand{padding:2px 8px 9px}
.logo-mark img,.logo-img{filter:none}
.side-section{color:var(--faint);font-size:10px;letter-spacing:.12em;padding:15px 12px 5px}
.arch-nav{gap:2px}.arch-nav button{min-height:42px;border-radius:9px}
.arch-nav button:hover,.arch-nav button:focus-visible,.conv:hover{background:var(--panel-2)}
.conv.active{background:#222!important;box-shadow:inset 2px 0 #bbb!important}
[data-theme="light"] .conv.active{background:var(--panel-2)!important;box-shadow:inset 2px 0 var(--accent)!important}
.side-btn{background:var(--panel-2);justify-content:flex-start}
.search input{background:var(--panel);border-color:var(--border)}
.search input:focus{border-color:var(--border)}
.avatar{background:#363636;color:#f5f5f5}
.topbar{background:var(--bg);border-bottom:1px solid var(--border);min-height:60px;height:60px}
.model-btn{font-weight:600}.model-menu,.menu{box-shadow:var(--shadow)}
.msg.user .bubble{background:var(--user-bubble);border-color:var(--border);box-shadow:none}
.msg.assistant .body{line-height:1.75}
:where(.card,.panel,.modal,.dialog){box-shadow:none;border-color:var(--border)}
:where(input,textarea,select,[contenteditable="true"]):focus,
:where(input,textarea,select,[contenteditable="true"]):focus-visible{outline:none!important;box-shadow:none!important}
.composer:focus-within{border-color:var(--border);box-shadow:none!important;outline:none!important}
:where(button,a,summary,[role="button"]):focus-visible{outline:2px solid #a3a3a3;outline-offset:2px}
::selection{background:#525252;color:#fff}
@media(max-width:800px){.topbar{min-height:56px;height:56px;padding:0 12px}.arch-nav button{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ARCH Lime Edition — neutral deep-black with selective neon-lime accents. */
:root,[data-theme="dark"] {
 --bg:#050605; --side:#0b0d0a; --panel:#141713; --panel-2:#1c2119; --input:#1b1f19;
 --border:#293027; --text:#f1f4ee; --muted:#adb8a7; --faint:#82907d;
 --accent-rgb:190,255,58; --glow-rgb:190,255,58; --accent:#beff3a; --accent-2:#d6ff83;
 --on-accent:#10170a; --accent-soft:rgba(190,255,58,.10); --glow-border:rgba(190,255,58,.24);
 --glow:none; --glow-strong:0 14px 40px rgba(0,0,0,.38); --user-bubble:#20251e;
 --code:#10130f; --shadow:0 18px 48px rgba(0,0,0,.40);
}
/* Accent choice is intentionally fixed. Avoid old per-user accent overrides. */
[data-theme="dark"][data-accent],:root[data-accent] {--accent-rgb:190,255,58;--glow-rgb:190,255,58;--accent:#beff3a;--accent-2:#d6ff83;--on-accent:#10170a;--accent-soft:rgba(190,255,58,.10);--glow-border:rgba(190,255,58,.24)}
/* Sidebar: quiet navigation, no white/colored left border on active conversations. */
.sidebar{background:var(--side);border-right:1px solid var(--border)}
.side-top{padding:12px 11px 6px;gap:6px}
.brand{padding:4px 7px 10px}
.side-section{padding:13px 12px 5px;font-size:10px;letter-spacing:.11em;color:var(--faint)}
.arch-nav{padding:0 7px;gap:2px}
.arch-nav button{min-height:39px;padding:8px 11px;gap:11px;border-radius:10px;color:var(--muted)}
.arch-nav button:hover{background:#1a2017;color:var(--text)}
.arch-nav button:focus-visible{background:#1a2017;outline:2px solid var(--accent);outline-offset:1px}
.conv{border:1px solid transparent;border-radius:10px;transition:background-color .16s ease,color .16s ease}
.conv.active,[data-theme="light"] .conv.active{background:rgba(190,255,58,.095)!important;box-shadow:none!important;border:1px solid rgba(190,255,58,.18)!important;color:var(--text)}
.conv.active:hover{background:rgba(190,255,58,.14)!important}
.side-btn{background:#1c2417;border:1px solid #2b3923;color:var(--text);min-height:40px}
.side-btn:hover{background:#26331d;border-color:rgba(190,255,58,.32)}
.sidebar-files{margin:8px 11px 0}
.sidebar-files summary{padding:8px 5px;font-size:11px}
.sidebar-files:not([open]){border-color:transparent}
.avatar{background:#26351d;color:var(--accent);border:1px solid #3d522d}
/* Restrained lime: CTAs, selected controls and focus only. */
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
a:not(.conv):hover{color:var(--accent-2)}
:where(button,a,summary,[role="button"]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:where(input,textarea,select,[contenteditable="true"]):focus,:where(input,textarea,select,[contenteditable="true"]):focus-visible{outline:none!important;box-shadow:none!important}
.composer:focus-within{outline:none!important;box-shadow:none!important;border-color:var(--border)!important}
::selection{background:rgba(190,255,58,.27);color:var(--text)}
@media(max-width:800px){.arch-nav button{min-height:44px}.side-section{padding-top:12px}}

/* Compact, fully scrollable sidebar and clean agent editor */
.sidebar{min-height:0;overflow:hidden}
.sidebar-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3c4932 transparent}
.sidebar-scroll:focus{outline:none}
.sidebar-scroll nav{display:block}
.sidebar-scroll .conv-list{flex:none;overflow:visible;padding-bottom:18px}
.sidebar .side-top{flex:0 0 auto;padding:10px 10px 6px;gap:5px}
.sidebar .brand{padding:3px 6px 8px}
.sidebar .side-section{padding:10px 13px 3px;font-size:10px;line-height:1.4;letter-spacing:.09em}
.sidebar .arch-nav{gap:1px;padding:0 7px}
.sidebar .arch-nav button{min-height:35px;padding:6px 10px;gap:10px;font-size:12.5px;border-radius:8px}
.sidebar .conv{min-height:34px;padding:6px 10px;font-size:12.5px;border-radius:8px}
.sidebar .side-bottom{flex:0 0 auto;padding:8px 10px;background:var(--side);z-index:2}
.agent-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.agent-header h2{margin:0 0 5px;font-size:24px;letter-spacing:-.03em}
.agent-counter,.agent-slot{font-size:12px;color:var(--muted);background:var(--panel-2);border-radius:99px;padding:5px 10px;white-space:nowrap}
.agent-section,.agent-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px}
.agent-section>label,.agent-field>label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.agent-section select,.agent-form .inp{width:100%;box-sizing:border-box}
.agent-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;margin-bottom:16px}
.agent-card{margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.agent-card-heading,.agent-card-actions,.agent-form-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.agent-card p{flex:1;overflow-wrap:anywhere;margin:0}
.agent-card-actions{justify-content:flex-start;margin-top:6px}
.agent-editor-title{margin-bottom:18px}.agent-editor-title h3{margin:0 0 5px;font-size:18px}
.agent-form{display:grid;gap:17px;max-width:760px}.agent-field{min-width:0}.agent-field textarea{resize:vertical;min-height:135px;line-height:1.55}
.agent-field small{display:block;margin-top:7px}.agent-form-actions{justify-content:flex-end;padding-top:6px}
.agent-form .inp:focus-visible{outline:none!important;box-shadow:none!important;border-color:var(--border)!important}
@media(max-width:800px){.sidebar .arch-nav button{min-height:42px}.sidebar .conv{min-height:42px}.agent-section,.agent-card{padding:15px}.agent-header{flex-wrap:wrap}}

/* THEME SYSTEM v2: final cascade, light/dark × five accents. */
html[data-theme="dark"] {--bg:#050605;--side:#0b0d0a;--panel:#141713;--panel-2:#1c2119;--input:#1b1f19;--border:#293027;--text:#f1f4ee;--muted:#adb8a7;--faint:#82907d;--user-bubble:#20251e;--code:#10130f;--shadow:0 18px 48px rgba(0,0,0,.4);color-scheme:dark}
html[data-theme="light"] {--bg:#f7f8f5;--side:#f0f2ed;--panel:#fff;--panel-2:#e9ede6;--input:#f5f7f3;--border:#d7ded1;--text:#192117;--muted:#52614e;--faint:#687665;--user-bubble:#e8ede5;--code:#f0f3ed;--shadow:0 10px 35px rgba(18,35,14,.10);color-scheme:light}
html[data-accent="lime"] {--accent-rgb:157,213,38;--accent:#9dd526;--accent-2:#b7e659;--on-accent:#142000}
html[data-theme="dark"][data-accent="lime"] {--accent-rgb:190,255,58;--accent:#beff3a;--accent-2:#d6ff83;--on-accent:#10170a}
html[data-accent="blue"] {--accent-rgb:54,132,224;--accent:#3684e0;--accent-2:#60a5fa;--on-accent:#fff}
html[data-accent="violet"] {--accent-rgb:154,93,226;--accent:#9a5de2;--accent-2:#b891f5;--on-accent:#fff}
html[data-accent="rose"] {--accent-rgb:225,75,130;--accent:#e14b82;--accent-2:#f080a9;--on-accent:#fff}
html[data-accent="amber"] {--accent-rgb:220,153,30;--accent:#dc991e;--accent-2:#f3b84d;--on-accent:#171000}
html[data-theme="dark"][data-accent="amber"] {--accent-rgb:255,186,54;--accent:#ffba36;--accent-2:#ffd27b;--on-accent:#201400}
html[data-theme][data-accent] {--glow-rgb:var(--accent-rgb);--accent-soft:rgba(var(--accent-rgb),.11);--glow-border:rgba(var(--accent-rgb),.23)}
html[data-theme] body,html[data-theme] .main,html[data-theme] .chat-area,html[data-theme] .arch-page,html[data-theme] .workspace-page {background:var(--bg);color:var(--text)}
html[data-theme] .sidebar,html[data-theme] .side-bottom {background:var(--side);border-color:var(--border)}
html[data-theme] .topbar {background:var(--bg);border-color:var(--border)}
html[data-theme] .arch-nav button:hover,html[data-theme] .arch-nav button:focus-visible {background:var(--panel-2);color:var(--text)}
html[data-theme] .side-btn {background:var(--panel-2);border-color:var(--border);color:var(--text)}
html[data-theme] .side-btn:hover {background:var(--accent-soft);border-color:var(--glow-border)}
html[data-theme] .conv.active {background:var(--accent-soft)!important;border:1px solid var(--glow-border)!important;box-shadow:none!important;color:var(--text)}
html[data-theme] .conv.active:hover {background:rgba(var(--accent-rgb),.17)!important}
html[data-theme] .avatar {background:var(--accent-soft);color:var(--accent);border:1px solid var(--glow-border)}
html[data-theme] .btn.primary {background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
html[data-theme] .composer:focus-within {border-color:var(--border)!important;outline:none!important;box-shadow:none!important}
html[data-theme] ::selection {background:rgba(var(--accent-rgb),.28);color:var(--text)}
.appearance-settings {display:flex;flex-direction:column;gap:5px;padding:9px 10px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.appearance-settings .appearance-label {font-size:11px;color:var(--muted);padding:3px 5px}
.appearance-settings button {width:100%}
.appearance-settings select {background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:9px 10px;width:100%;font:inherit;cursor:pointer}
.appearance-settings select:focus-visible {outline:2px solid var(--accent);outline-offset:2px}

/* ARCH VNext — Warm Light, real accent variables, settings workspace */
html[data-theme="light"] {--bg:#eeeae1;--side:#e6e1d6;--panel:#f7f3eb;--panel-2:#ebe5d9;--input:#f9f5ed;--border:#d5cdbf;--text:#262820;--muted:#5d6258;--faint:#777b70;--user-bubble:#e7e1d4;--code:#eee8dc;--shadow:0 12px 36px rgba(62,53,34,.08);color-scheme:light}
html[data-theme="light"] body,html[data-theme="light"] .main,html[data-theme="light"] .arch-project-page {background:var(--bg)!important;color:var(--text)}
html[data-theme="light"] .sidebar,html[data-theme="light"] .side-bottom {background:var(--side)!important}
html[data-theme="light"] .topbar {background:var(--bg)!important}
html[data-theme="light"] .conv.active {background:var(--accent-soft)!important;border:1px solid rgba(var(--accent-rgb),.20)!important;box-shadow:none!important}
html[data-theme="dark"][data-accent="lime"] {--accent-rgb:190,255,58;--accent:#beff3a;--accent-2:#d6ff83;--on-accent:#10170a}
html[data-theme="light"][data-accent="lime"] {--accent-rgb:112,151,20;--accent:#709714;--accent-2:#5d8011;--on-accent:#fff}
html[data-theme="dark"][data-accent="blue"] {--accent-rgb:96,165,250;--accent:#60a5fa;--accent-2:#93c5fd;--on-accent:#081526}
html[data-theme="light"][data-accent="blue"] {--accent-rgb:38,100,184;--accent:#2664b8;--accent-2:#1d519a;--on-accent:#fff}
html[data-theme="dark"][data-accent="violet"] {--accent-rgb:184,145,245;--accent:#b891f5;--accent-2:#d5b8ff;--on-accent:#1b0b32}
html[data-theme="light"][data-accent="violet"] {--accent-rgb:119,68,179;--accent:#7744b3;--accent-2:#643399;--on-accent:#fff}
html[data-theme="dark"][data-accent="rose"] {--accent-rgb:240,128,169;--accent:#f080a9;--accent-2:#ffc2d9;--on-accent:#30101f}
html[data-theme="light"][data-accent="rose"] {--accent-rgb:179,48,98;--accent:#b33062;--accent-2:#95274f;--on-accent:#fff}
html[data-theme="dark"][data-accent="amber"] {--accent-rgb:255,186,54;--accent:#ffba36;--accent-2:#ffd27b;--on-accent:#271800}
html[data-theme="light"][data-accent="amber"] {--accent-rgb:157,100,16;--accent:#9d6410;--accent-2:#81510c;--on-accent:#fff}
html[data-theme][data-accent] {--accent-soft:rgba(var(--accent-rgb),.11);--glow-border:rgba(var(--accent-rgb),.2)}
:where(.btn.primary,.arch-primary) {background:var(--accent);color:var(--on-accent)}
.arch-settings-page .arch-workspace-rail {overflow-y:auto}
.arch-settings-nav {display:flex;flex-direction:column;gap:3px;padding:8px 12px 20px}
.arch-settings-nav button {border:0;background:transparent;color:var(--muted);padding:10px 14px;border-radius:10px;text-align:left;cursor:pointer;font-size:13px}
.arch-settings-nav button.on,.arch-settings-nav button:hover {background:var(--accent-soft);color:var(--text)}
.arch-settings-nav .sep {font-size:10px;color:var(--faint);letter-spacing:.1em;margin:14px 10px 4px;text-transform:uppercase}
.arch-settings-page #mc {max-width:850px;margin:0 auto;padding:26px 30px}
.arch-settings-form {display:flex;flex-direction:column;gap:12px;max-width:560px}
.arch-settings-form label {font-weight:600;font-size:13px}
.arch-chat-actions {display:flex;gap:8px;align-items:center;margin-left:auto}
.overlay {backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);background:rgba(0,0,0,.55)}
.arch-share-modal {max-width:480px;max-height:80vh}
.arch-share-modal .modal-content {padding:20px;display:flex;flex-direction:column;gap:14px}
@media(max-width:800px) {.arch-chat-actions .btn {font-size:11px;padding:6px 8px}.arch-settings-page #mc {padding:18px 14px}}

/* VNext messenger / notification / drawer: single-layer workspace */
.arch-dedicated-page:has(.team-shell) .arch-workspace-main {display:flex;flex-direction:column;min-height:0;overflow:hidden}
.arch-dedicated-page:has(.team-shell) .arch-dedicated-content {flex:1;min-height:0;margin-top:14px}
.arch-dedicated-page .team-shell {border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;height:100%!important;min-height:400px!important;max-height:none!important;grid-template-columns:minmax(200px,270px) minmax(0,1fr)}
.team-contacts {padding:8px 12px 12px 0;background:transparent}
.team-contacts h3 {font-size:17px;margin:6px 12px 4px}
.team-contacts .desc {font-size:11px;margin:0 12px 14px}
.team-contact {padding:11px 12px;border-radius:12px;gap:12px}
.team-contact.selected {background:var(--accent-soft);color:var(--text)}
.team-conversation {background:transparent;min-height:0}
.team-header {font-size:15px;padding:15px 22px}
.team-history {padding:24px clamp(14px,4vw,50px);gap:13px}
.team-bubble {border-radius:17px 17px 17px 5px;max-width:min(75%,620px);padding:12px 16px;background:var(--panel-2)}
.team-bubble.mine {border-radius:17px 17px 5px 17px;background:var(--accent-soft)}
.team-compose {padding:12px clamp(12px,3vw,32px);align-items:center;border-top:1px solid var(--border)}
.team-compose textarea {border-radius:17px;background:var(--panel);min-height:48px;max-height:130px;padding:13px 16px}
.team-attach-btn {height:42px;width:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:20px;background:var(--panel-2)}
.team-file-link {border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent)}
.arch-notif-button {position:fixed;top:14px;right:18px;z-index:2300;width:40px;height:40px;padding:9px!important;border-radius:12px!important;display:flex;align-items:center;justify-content:center;background:var(--panel)!important;color:var(--text)!important}
#arch-notification-count:not(:empty) {position:absolute;top:-5px;right:-5px;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:700;min-width:18px;height:18px;display:grid;place-items:center;padding:1px 4px;border-radius:99px}
#arch-notification-count[hidden],.arch-unread-dot[hidden],.arch-notif-popover[hidden] {display:none!important}
.arch-unread-dot {display:inline-block;margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.arch-notif-popover {position:fixed;right:18px;top:60px;z-index:2301;width:min(340px,calc(100vw - 36px));padding:18px;border:1px solid var(--border);background:var(--panel);border-radius:16px;box-shadow:var(--shadow);display:grid;gap:12px}
.arch-notif-popover p {font-size:12px;color:var(--muted);margin:0}
.arch-preview-drawer {position:fixed;inset:0 0 0 auto;width:min(570px,100vw);z-index:3000;background:var(--panel);color:var(--text);border-left:1px solid var(--border);box-shadow:-15px 0 45px rgba(0,0,0,.3);display:flex;flex-direction:column}
.arch-preview-drawer header {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 20px;border-bottom:1px solid var(--border)}
.arch-preview-drawer header strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arch-preview-body {flex:1;min-height:0;overflow:auto;padding:18px;display:grid;place-items:center}
#arch-preview-body img {max-width:100%;max-height:100%;object-fit:contain}
#arch-preview-body iframe {width:100%;height:100%;border:0;background:#fff}
#arch-preview-body pre {white-space:pre-wrap;overflow-wrap:anywhere;width:100%;align-self:start}
.arch-preview-drawer footer {padding:14px 20px;border-top:1px solid var(--border)}
.arch-settings-nav {gap:1px!important;padding:4px 8px 16px!important}
.arch-settings-nav button {padding:8px 12px!important;min-height:36px!important;font-size:12px!important}
.arch-settings-nav .sep {margin:10px 8px 3px!important}
@media(max-width:650px){.arch-dedicated-page .team-shell{grid-template-columns:100px minmax(0,1fr)}.team-contacts{padding:4px}.team-contact{padding:8px 4px}.team-contact small{display:none}.team-avatar{width:26px;height:26px}.team-history{padding:12px}.arch-notif-button{right:10px;top:9px}}
.topbar {padding-right:72px!important}
.arch-project-top {padding-right:55px}
@media(max-width:650px){.topbar{padding-right:55px!important}.arch-project-top{padding-right:45px}}

/* Responsive messenger, previews and notification controls */
.arch-notif-toggle{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;color:var(--text);cursor:pointer}
.arch-notif-toggle input{accent-color:var(--accent);width:16px;height:16px}
.arch-document-preview{display:block!important;width:100%;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;align-self:start;line-height:1.65;font:13px/1.65 ui-monospace,monospace}
.team-back{display:none;border:0;background:transparent;color:var(--text);font-size:21px;cursor:pointer}
.team-conversation{min-width:0}
.team-header{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 16px}
.team-history{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.team-bubble{max-width:min(75%,580px);overflow-wrap:anywhere}
.team-compose{display:flex;gap:10px;align-items:center}
.team-compose textarea{min-width:0;flex:1;resize:none}
.arch-preview-drawer{width:min(660px,100vw);max-width:100vw}
@media(max-width:700px){
 .arch-dedicated-page .team-shell,.team-shell{display:block!important;position:relative;height:calc(100dvh - 140px)!important;min-height:350px!important;overflow:hidden}
 .team-contacts,.team-conversation{position:absolute;inset:0;width:100%;height:100%;border:0!important;background:var(--bg);overflow-y:auto}
 .team-conversation{display:none!important}
 .team-shell.has-peer .team-contacts{display:none!important}
 .team-shell.has-peer .team-conversation{display:flex!important}
 .team-back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px}
 .team-contact{min-height:60px;padding:10px 12px!important;font-size:14px!important}
 .team-contact small{display:block!important}
 .team-avatar{width:38px;height:38px}
 .team-compose{padding:10px!important;position:sticky;bottom:0;background:var(--bg)}
 .team-compose .btn{padding:10px!important;min-height:44px}
 .team-history{padding:12px!important}
 .team-bubble{max-width:88%}
 .arch-preview-drawer{width:100vw!important;border-left:0!important}
 .arch-notif-popover{right:8px;top:56px;width:min(350px,calc(100vw - 16px))}
 .arch-dedicated-content{padding:0 10px!important}
}

/* Clickable AI-generated file cards and notification inbox */
.msg.assistant .artifact-chat-link{display:flex;align-items:center;gap:10px;width:fit-content;max-width:min(100%,520px);margin:10px 0;padding:12px 14px;text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.artifact-chat-link small{display:block;margin-left:auto;padding-left:12px;font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}
.arch-notif-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.arch-notification-list{display:flex;flex-direction:column;gap:7px;max-height:min(52vh,420px);overflow:auto}
.arch-notif-item{display:flex;flex-direction:column;gap:4px;width:100%;padding:10px 11px;border:1px solid var(--border);border-radius:10px;text-align:left;color:var(--text);background:var(--panel-2);cursor:pointer}
.arch-notif-item.unread{border-color:var(--accent);background:var(--accent-soft)}
.arch-notif-item-title{font-size:13px;font-weight:700}
.arch-notif-item-body,.arch-notif-item small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.arch-notif-empty{padding:12px;text-align:center;color:var(--muted)}
.arch-notif-settings{border-top:1px solid var(--border);padding-top:10px}
.arch-notif-settings summary{cursor:pointer;font-weight:600;font-size:13px;padding:4px 0 8px}
#arch-preview-body video{display:block;max-width:100%;max-height:100%;object-fit:contain}


/* Preview rendering and mobile navigation repair */
.arch-preview-title-wrap{display:flex;flex-direction:column;min-width:0;gap:3px}
.arch-preview-subtitle{font-size:11px;color:var(--muted);font-weight:500}
#arch-preview-body{display:flex;align-items:center;justify-content:center;min-width:0}
#arch-preview-body>img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
#arch-preview-body>iframe{display:block;flex:1 1 auto;min-width:0;min-height:100%;height:100%;align-self:stretch}
#arch-preview-body>video{width:100%;height:auto;max-height:100%;background:#05070a;border-radius:10px}
.arch-preview-loading{color:var(--muted);font-size:13px;padding:24px;text-align:center}
.arch-preview-fallback{align-self:stretch;width:100%;min-width:0}
.arch-preview-fallback>p{padding:12px;border-radius:10px;background:var(--panel-2);color:var(--muted);font-size:12px;line-height:1.5}
.arch-preview-drawer footer .btn{width:100%;min-height:44px}
.arch-pdf-mobile-fallback{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;min-height:220px;text-align:center}
.arch-pdf-mobile-fallback p{max-width:34rem;margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.arch-pdf-mobile-fallback .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;text-decoration:none}

/* Team Messenger: structured desktop layout, readable contact rail, responsive chat */
.arch-dedicated-page:has(.team-shell) .arch-workspace-main{padding:24px clamp(14px,2vw,30px) 28px}
.arch-dedicated-page:has(.team-shell) .arch-project-top{padding:8px 0 18px;margin-bottom:10px}
.arch-dedicated-page:has(.team-shell) .arch-project-top h1{font-size:clamp(23px,2vw,30px)}
.arch-dedicated-page:has(.team-shell) .arch-dedicated-content{margin:0;max-width:none}
.arch-dedicated-page .team-shell{display:grid!important;grid-template-columns:minmax(235px,300px) minmax(0,1fr);height:calc(100dvh - 150px)!important;min-height:480px!important;border:1px solid var(--border)!important;border-radius:18px!important;overflow:hidden;background:var(--panel)!important;box-shadow:var(--shadow)!important}
.arch-dedicated-page .team-contacts{padding:16px 12px;background:var(--side)!important;border-right:1px solid var(--border)!important;overflow-y:auto}
.arch-dedicated-page .team-contacts h3{margin:4px 10px 5px;font-size:16px}
.arch-dedicated-page .team-contacts .desc{margin:0 10px 16px;font-size:12px}
.arch-dedicated-page .team-contact{width:100%;display:flex;align-items:center;text-align:left;gap:11px;margin:3px 0;padding:11px 12px!important;border:1px solid transparent;border-radius:12px!important;background:transparent;color:var(--text);transition:background .15s,border-color .15s}
.arch-dedicated-page .team-contact:hover{background:var(--panel-2)}
.arch-dedicated-page .team-contact.selected{background:var(--accent-soft)!important;border-color:var(--glow-border)!important}
.arch-dedicated-page .team-contact span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.arch-dedicated-page .team-contact b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arch-dedicated-page .team-contact small{font-size:11px;color:var(--muted)}
.arch-dedicated-page .team-avatar{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--text);font-weight:750}
.arch-dedicated-page .team-conversation{display:flex!important;flex-direction:column;min-width:0;background:var(--bg)!important}
.arch-dedicated-page .team-header{min-height:66px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--panel)!important;font-weight:700}
.arch-dedicated-page .team-history{display:flex;flex-direction:column;gap:12px;padding:24px clamp(14px,3vw,42px);background:var(--bg)}
.arch-dedicated-page .team-bubble{width:fit-content;max-width:min(78%,680px);padding:12px 15px;border:1px solid var(--border);border-radius:16px 16px 16px 5px;background:var(--panel)!important;box-shadow:0 3px 12px rgba(0,0,0,.04);line-height:1.55}
.arch-dedicated-page .team-bubble.mine{align-self:flex-end;border-color:var(--glow-border);border-radius:16px 16px 5px 16px;background:var(--accent-soft)!important}
.arch-dedicated-page .team-bubble time{display:block;margin-top:6px;font-size:10px;color:var(--muted);text-align:right}
.arch-dedicated-page .team-compose{gap:10px;padding:14px 18px;background:var(--panel)!important;border-top:1px solid var(--border)}
.arch-dedicated-page .team-compose textarea{border:1px solid var(--border);border-radius:14px!important;background:var(--input)!important;min-height:46px;padding:12px 14px}
.arch-dedicated-page .team-compose .btn{min-height:44px;border-radius:12px;padding:0 18px}
@media(max-width:700px){
 .arch-dedicated-page .arch-workspace-shell{display:flex;flex-direction:column;min-height:100dvh}
 .arch-dedicated-page .arch-workspace-rail{position:sticky;top:0;z-index:5;display:flex;flex-direction:row;align-items:center;gap:6px;padding:8px 10px;background:var(--side);border-bottom:1px solid var(--border);overflow-x:auto}
 .arch-dedicated-page .arch-workspace-brand{flex:0 0 auto;padding:0 8px 0 0;font-size:12px;gap:7px}
 .arch-dedicated-page .arch-workspace-monogram{width:30px;height:30px}
 .arch-dedicated-page .arch-rail-caption,.arch-dedicated-page .arch-rail-footer{display:none!important}
 .arch-dedicated-page .arch-rail-link{display:flex!important;flex:0 0 auto;width:auto;min-height:38px;padding:8px 10px;font-size:11px;white-space:nowrap}
 .arch-dedicated-page .arch-workspace-main{flex:1;min-height:0;padding:14px 10px 20px;overflow:visible}
 .arch-dedicated-page .arch-project-top{align-items:center;gap:10px;padding:2px 0 12px;margin-bottom:12px}
 .arch-dedicated-page .arch-project-top p{font-size:12px}
 .arch-dedicated-page .team-shell{display:block!important;position:relative;height:calc(100dvh - 180px)!important;min-height:390px!important;border-radius:14px!important}
 .arch-dedicated-page .team-contacts,.arch-dedicated-page .team-conversation{position:absolute;inset:0;width:100%;height:100%;border:0!important;overflow-y:auto}
 .arch-dedicated-page .team-conversation{display:none!important}
 .arch-dedicated-page .team-shell.has-peer .team-contacts{display:none!important}
 .arch-dedicated-page .team-shell.has-peer .team-conversation{display:flex!important}
 .arch-dedicated-page .team-contact{min-height:60px;padding:10px 12px!important}
 .arch-dedicated-page .team-contact small{display:block!important}
 .arch-dedicated-page .team-avatar{width:38px;height:38px}
 .arch-dedicated-page .team-back{display:inline-flex!important;flex:0 0 36px}
 .arch-dedicated-page .team-compose{position:sticky;bottom:0;align-items:flex-end;padding:10px!important}
 .arch-dedicated-page .team-compose .btn{padding:0 12px!important;min-height:44px}
 .arch-dedicated-page .team-bubble{max-width:90%}
 .arch-dedicated-page .arch-project-top>#dedicated-refresh{min-height:38px}
}

/* Mobile settings navigation: keep a persistent, clearly visible route back to AI chat. */
@media(max-width:640px){
 .arch-settings-page .arch-workspace-rail{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px 12px 8px;}
 .arch-settings-page .arch-workspace-brand{padding:0 4px 4px;}
 .arch-settings-page .arch-rail-link#settings-back{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:42px;padding:10px 14px;background:var(--accent-soft);border:1px solid var(--glow-border);color:var(--text);font-size:13px;font-weight:700;white-space:normal;}
 .arch-settings-page .arch-settings-nav{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:4px 0 10px;max-width:100%;}
 .arch-settings-page .arch-settings-nav .sep{display:none;}
 .arch-settings-page .arch-settings-nav button{flex:0 0 auto;white-space:nowrap;min-height:38px;padding:8px 11px;}
 .arch-settings-page .arch-workspace-main{padding:16px 12px 24px;}
 .arch-settings-page .arch-project-top{padding:4px 0 12px;}
 .arch-settings-page #mc{padding:14px 0;}
}


/* ARCH My Files upload and consistent data-table geometry */
.my-files-upload{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.my-files-upload input[type="file"]{flex:1 1 260px;min-width:0;max-width:100%;color:var(--muted)}
.my-files-upload .btn{flex:0 0 auto;min-height:40px}
.arch-dedicated-content .table-wrap,.arch-settings-page .table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--border);border-radius:10px}
table.list{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;border:0;margin:0;font-size:13.5px}
table.list thead th{background:var(--panel-2);white-space:nowrap}
table.list th,table.list td{box-sizing:border-box;padding:11px 12px;border:0;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle;line-height:1.45}
table.list tr:last-child td{border-bottom:0}
table.list th+th,table.list td+td{border-left:1px solid var(--border)}
table.list td .row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
table.list td .btn{white-space:nowrap}
@media(max-width:640px){
 .arch-settings-page .arch-workspace-shell{display:flex;flex-direction:column;min-height:100dvh}
 .arch-settings-page .arch-workspace-rail{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px;background:var(--side);border-right:0;border-bottom:1px solid var(--border);overflow:visible}
 .arch-settings-page .arch-workspace-brand{padding:4px 4px 8px}
 .arch-settings-page .arch-rail-link#settings-back{display:flex!important;align-items:center;justify-content:flex-start;width:100%;min-height:42px;padding:10px 14px;background:var(--accent-soft);border:1px solid var(--glow-border);color:var(--text);font-size:13px;font-weight:700;white-space:normal}
 .arch-settings-page .arch-settings-nav{display:flex;flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:3px;padding:4px 0 8px;max-width:100%;width:100%}
 .arch-settings-page .arch-settings-nav .sep{display:block;margin:10px 8px 3px;padding:0}
 .arch-settings-page .arch-settings-nav button{display:block;flex:0 0 auto;width:100%;text-align:left;white-space:normal;min-height:40px;padding:10px 12px}
 .arch-settings-page .arch-workspace-main{padding:18px 12px 24px;min-width:0}
 .arch-settings-page .arch-project-top{padding:4px 0 12px}
 .arch-settings-page #mc{padding:12px 0;min-width:0}
 .arch-settings-page .sec{padding:12px;min-width:0}
 .arch-dedicated-content .table-wrap,.arch-settings-page .table-wrap{border-radius:8px}
 table.list{min-width:560px}
 .my-files-upload{align-items:stretch;flex-direction:column}
 .my-files-upload input[type="file"]{flex:1 1 auto;width:100%}
 .my-files-upload .btn{width:100%}
}

/* Company logo configuration */
.company-logo-preview{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);margin:10px 0}
.company-logo-preview img{display:block;max-width:180px;max-height:72px;object-fit:contain;background:#fff;border-radius:6px;padding:6px}
.company-logo-preview span{font-size:13px;color:var(--muted)}
@media(max-width:640px){.company-logo-preview{align-items:flex-start;flex-direction:column}.company-logo-preview img{max-width:140px}}
/* v16k: full-viewport workspace and consistent document/agent geometry */
html,body{width:100%;min-height:100%;margin:0}
#app,.arch-settings-page,.arch-dedicated-page{width:100%;min-width:0;max-width:none}
.arch-workspace-shell{width:100%;min-height:100dvh;max-width:none;box-sizing:border-box}
.arch-workspace-main,.arch-dedicated-content,#mc{min-width:0;max-width:100%;box-sizing:border-box}
.arch-workspace-main{flex:1 1 auto}
.agent-avatar{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;flex:0 0 38px;border-radius:12px;background:var(--panel-2);overflow:hidden}
.agent-avatar img{width:100%;height:100%;object-fit:cover}
.agent-card-heading{display:flex;align-items:center;gap:10px}
.agent-card-heading .agent-slot{margin-left:auto}
.table-wrap table.list th,.table-wrap table.list td{vertical-align:middle;border-bottom:1px solid var(--border)}
.table-wrap table.list tr>th:last-child,.table-wrap table.list tr>td:last-child{min-width:170px}
@media(max-width:640px){.arch-workspace-shell{min-height:100dvh}.arch-workspace-main{width:100%;min-width:0}.arch-settings-page .arch-settings-nav{display:flex;flex-direction:column;overflow:visible}}


/* My Files multi-select deletion controls */
.my-files-selection-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.my-files-selection-toolbar .check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}
.my-files-selection-toolbar input[type="checkbox"],
.my-files-select {
  width: 17px;
  height: 17px;
  accent-color: var(--accent, #7cdb45);
  cursor: pointer;
}
.my-files-selection-toolbar #my-files-selected-count { margin-right: auto; }
.file-check-col { width: 66px; text-align: center; }
.my-files-select { display: block; margin: 0 auto; }
.my-files-selection-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
  .my-files-selection-toolbar { align-items: flex-start; }
  .my-files-selection-toolbar #my-files-selected-count { flex: 1 1 100%; order: 3; }
  .my-files-selection-toolbar #my-files-delete-selected { margin-left: auto; }
}

/* Computer Access only: inherit the active ARCH theme without changing global theme tokens. */
#computer-access-approval-overlay .ca-approval-dialog { width:min(560px,100%); max-height:85vh; overflow:auto; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:var(--shadow); }
#computer-access-approval-overlay .ca-approval-head { display:flex; gap:12px; align-items:center; }
#computer-access-approval-overlay .ca-approval-icon { width:42px; height:42px; display:grid; place-items:center; flex:none; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); }
#computer-access-approval-overlay h2 { margin:0 0 4px; font-size:20px; font-weight:650; letter-spacing:-.02em; }
#computer-access-approval-overlay .ca-approval-subtitle, #computer-access-approval-overlay .ca-approval-meta { color:var(--muted); font-size:12px; }
#computer-access-approval-overlay .ca-approval-action { margin:18px 0 8px; font-weight:650; }
#computer-access-approval-overlay .ca-approval-args { white-space:pre-wrap; overflow-wrap:anywhere; max-height:220px; overflow:auto; margin:0; padding:12px; border-radius:10px; border:1px solid var(--border); background:var(--code); color:var(--text); font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
#computer-access-approval-overlay .ca-approval-meta { margin:10px 0 18px; }
#computer-access-approval-overlay .ca-approval-buttons { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
#computer-access-approval-overlay .ca-approval-buttons .btn { min-height:40px; }
#computer-access-approval-overlay .ca-approval-buttons .btn.primary { background:var(--text); color:var(--bg); border-color:var(--text); }
#computer-access-approval-overlay .ca-approval-buttons .btn.danger { border-color:var(--danger); color:var(--danger); background:transparent; }
@media(max-width:520px) { #computer-access-approval-overlay .ca-approval-dialog { padding:16px; } #computer-access-approval-overlay .ca-approval-buttons { display:grid; grid-template-columns:1fr; } }

/* Chat attachments: persistent visual cards and private image previews. */
.chat-attachment { display:flex; align-items:center; gap:10px; margin:0 0 10px; max-width:min(100%,420px); border:1px solid var(--border); border-radius:12px; overflow:hidden; text-align:left; }
.image-attachment { display:block; background:var(--panel-2); }
.image-attachment img { display:block; max-width:100%; max-height:280px; width:auto; height:auto; object-fit:contain; border-radius:10px 10px 0 0; }
.chat-attachment-name { font-size:12px; color:var(--muted); padding:5px 9px; overflow-wrap:anywhere; }
.document-attachment { width:100%; padding:10px; background:var(--panel-2); color:var(--text); cursor:pointer; }
.chat-attachment-icon,.attach-file-icon { display:grid; place-items:center; flex:none; width:38px; height:42px; border-radius:8px; background:var(--panel); color:var(--muted); }
.chat-attachment-icon svg,.attach-file-icon svg { width:22px; height:22px; }
.chat-attachment-meta,.attach-preview-meta { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.chat-attachment-meta strong,.attach-preview-meta strong { overflow-wrap:anywhere; font-size:13px; }
.chat-attachment-meta small,.attach-preview-meta small { color:var(--muted); font-size:11px; }
.chat-attachment-open { font-size:12px; color:var(--muted); }
.attach-preview-card { display:flex; align-items:center; gap:10px; max-width:100%; margin:0 0 8px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }
.attach-thumb { width:58px; height:58px; flex:none; object-fit:cover; border-radius:8px; }
.attach-file-icon { width:48px; height:48px; }


/* ARCH v17 contextual follow-up actions: compact, responsive, optional. */
.arch-followups{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;align-items:center}
.arch-followups-title{width:100%;font-size:12px;color:var(--muted);margin-bottom:1px}
.arch-followup{border:1px solid var(--border);border-radius:999px;padding:8px 12px;background:var(--panel);color:var(--text);font:inherit;font-size:12px;line-height:1.35;cursor:pointer;max-width:100%;white-space:normal;text-align:left}
.arch-followup:hover{background:var(--panel-2);border-color:var(--muted)}
@media(max-width:600px){.arch-followups{gap:6px}.arch-followup{min-height:38px;border-radius:12px;padding:9px 11px}}

/* v19.2 AI-generated follow-up questions */
.arch-ai-question{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:8px;display:flex;flex-direction:column;gap:9px;min-width:0}
.arch-ai-question-title{font-size:13px;font-weight:600;line-height:1.5}
.arch-ai-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:7px}
.arch-ai-option{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--border);border-radius:9px;padding:9px;cursor:pointer;font-size:12px;line-height:1.45}
.arch-ai-option:has(input:checked){border-color:var(--accent);background:var(--panel-2)}
.arch-ai-option input{margin-top:2px;accent-color:var(--accent)}
.arch-ai-custom{width:100%;box-sizing:border-box}
.arch-version{font-size:10px;color:var(--muted);font-weight:500;margin-left:5px}


/* v19.2.5: settings navigation hierarchy and flat icon alignment */
.arch-settings-nav button {display:flex;align-items:center;gap:11px;min-height:40px;padding:9px 12px!important;border-radius:9px;font-size:12.5px!important;line-height:1.35;}
.arch-settings-nav button .settings-nav-icon {flex:0 0 18px;opacity:.82;}
.arch-settings-nav button.on .settings-nav-icon,.arch-settings-nav button:hover .settings-nav-icon {opacity:1;color:var(--accent);}
.arch-settings-nav .sep {font-size:10px;font-weight:700;letter-spacing:.09em;margin:15px 10px 5px!important;padding-top:3px;color:var(--faint);}
.arch-settings-nav button span {min-width:0;}
@media(max-width:760px){.arch-settings-nav button{gap:8px;min-height:38px;}}

/* v19.2.26: sidebar expand/collapse controls remain visually unboxed. */
#btn-collapse, #btn-expand { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#btn-collapse:hover, #btn-expand:hover, #btn-collapse:active, #btn-expand:active { background: transparent !important; box-shadow: none !important; }
#btn-collapse:focus-visible, #btn-expand:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }


/* ARCH v19.2.37 — Dokumen Cepat layout C: compact category cards */
#workspace .od-section {
  position: relative;
  border: 1px solid var(--border, rgba(130,150,170,.28));
  border-radius: 14px;
  padding: clamp(14px, 2vw, 22px);
  margin: 0 0 16px;
  background: var(--panel, rgba(255,255,255,.025));
  box-shadow: 0 2px 10px rgba(0,0,0,.035);
  min-width: 0;
}
#workspace .od-section > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 7px;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
}
#workspace .od-section > h3::before {
  content: '';
  display: inline-flex;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent, #a3e635) 17%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #a3e635) 40%, transparent);
}
#workspace .od-section:nth-of-type(2) > h3::before { content: '1'; }
#workspace .od-section:nth-of-type(3) > h3::before { content: '2'; }
#workspace .od-section:nth-of-type(4) > h3::before { content: '3'; }
#workspace .od-section:nth-of-type(5) > h3::before { content: '4'; }
#workspace .od-section:nth-of-type(6) > h3::before { content: '5'; }
#workspace .od-section .hint { line-height: 1.55; }
#workspace .od-section .grid { align-items: start; }
#workspace .od-section label { display: block; min-width: 0; font-weight: 600; }
#workspace .od-section label .inp,
#workspace .od-section > label .inp { margin-top: 6px; width: 100%; max-width: 100%; box-sizing: border-box; }
#workspace .od-section .inp { border-radius: 9px; }
#workspace .od-section textarea.inp { resize: vertical; min-height: 42px; }
#workspace .od-section .row { align-items: center; }
#workspace .od-section:focus-within { border-color: color-mix(in srgb, var(--accent, #a3e635) 48%, var(--border, #888)); }
@media (max-width: 720px) {
  #workspace .od-section { padding: 14px; border-radius: 12px; margin-bottom: 12px; }
  #workspace .od-section .grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  #workspace .od-section .grid > label { grid-column: 1 / -1 !important; }
  #workspace .od-section > .row { align-items: stretch; }
  #workspace .od-section button { max-width: 100%; }
}

/* ARCH v19.2.38 — single AI action after authorization section */
#workspace .od-ai-action { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin: -2px 0 16px; padding: 14px 16px; border:1px solid var(--border,rgba(130,150,170,.28)); border-radius:12px; background:var(--panel,rgba(255,255,255,.025)); }
#workspace .od-ai-action .btn { background:var(--accent, var(--primary, currentColor)); color:var(--button-text, #101510); border-color:transparent; }
#workspace .od-ai-action .btn:disabled { opacity:.6; }


/* Long user prompts collapse after a completed assistant response. */
.msg.user .bubble { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.prompt-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt-text.prompt-collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.prompt-toggle { border: 0; background: transparent; color: var(--accent, #8ab4f8); padding: 3px 0 0; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.prompt-toggle:hover { text-decoration: underline; }
/* Tiptap document editor */
.od-editor-shell { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel, transparent); }
.od-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); }
.od-toolbar-sep { width: 1px; height: 24px; background: var(--border); margin: 0 3px; }
.od-tiptap-editor { min-height: 280px; max-height: 60vh; overflow: auto; padding: 14px 16px; outline: none; }
.od-tiptap-content { min-height: 250px; outline: none; white-space: normal; overflow-wrap: anywhere; }
.od-tiptap-content p { margin: 0 0 10px; }
.od-tiptap-content ul, .od-tiptap-content ol { padding-left: 24px; }
.od-editor-note { margin: 0; padding: 0 12px 10px; }
#od-body[hidden], #od-tiptap-shell[hidden] { display: none !important; }

/* v19.2.43: shared icon registry sizing and user-approved agent collaboration */
.arch-settings-nav button .settings-nav-icon{width:18px;height:18px;flex:0 0 18px;stroke-width:1.8}
.agent-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.agent-team-queue{margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}
.agent-delegation{border:1px solid var(--border);border-radius:10px;padding:14px;margin:10px 0;background:var(--panel);overflow-wrap:anywhere}
.agent-delegation p{white-space:pre-wrap;margin:10px 0;color:var(--text-muted,var(--text))}
.agent-result{white-space:pre-wrap;overflow:auto;max-height:360px;padding:12px;border-radius:8px;background:var(--bg);font:12px/1.55 ui-monospace,monospace}
.agent-delegation summary{cursor:pointer;margin:8px 0}
@media(max-width:700px){.agent-form-grid{grid-template-columns:1fr}}

/* v19.2.44: image-first chat layout and explicit agent communication states */
.image-attachment { margin-left:auto; margin-right:auto; width:fit-content; max-width:100%; }
.image-attachment img { max-width:min(100%,560px); max-height:420px; }
.agent-communication-track{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);overflow:hidden}
.agent-communication-track .agent-track-line{position:relative;flex:1;min-width:60px;height:3px;border-radius:99px;background:var(--border)}
.agent-communication-track .agent-track-line:after{content:"";position:absolute;top:-3px;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent,var(--primary));box-shadow:0 0 10px currentColor;animation:arch-agent-packet 1.7s ease-in-out infinite}
.agent-communication-track[data-state="delivered"] .agent-track-line:after{animation:none;left:calc(100% - 9px);background:#22c55e}
.agent-communication-track[data-state="failed"] .agent-track-line:after{animation:none;background:#ef4444}
.agent-communication-track .agent-track-status{font-size:12px;color:var(--text-muted,var(--text));white-space:nowrap}
@keyframes arch-agent-packet{0%{left:0;opacity:.5}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 9px);opacity:.5}}
@media(prefers-reduced-motion:reduce){.agent-communication-track .agent-track-line:after{animation:none;left:50%}}

/* v19.2.48: Agent identity and session visibility in New Chat */
.newchat-agent{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(640px,94%);margin:0 auto 26px;padding:8px 12px 4px;border:0;border-radius:0;background:transparent;text-align:center;box-shadow:none}
.newchat-agent-avatar{width:104px;height:104px;flex:0 0 104px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border,rgba(140,160,190,.28));background:var(--panel-2,rgba(120,140,170,.14));font-size:40px;overflow:hidden;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.newchat-agent-avatar svg{width:44px;height:44px}.newchat-agent-avatar img{width:100%;height:100%;object-fit:cover}
.newchat-agent-info{min-width:0;display:flex;align-items:center;flex-direction:column;gap:6px;width:100%}.newchat-agent-info strong{font-size:22px;line-height:1.25}.newchat-agent-info span,.newchat-agent-info small{font-size:13px;color:var(--muted,#8993a5);overflow-wrap:anywhere;line-height:1.55}.newchat-agent-info code{font-size:12px}.newchat-agent-info small{display:inline-block;margin-top:2px;padding:0;border-radius:0;background:transparent}.newchat-agent-status{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted,#8993a5);white-space:nowrap}.newchat-agent-status i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.13);animation:archAgentPulse 2s ease-in-out infinite}@keyframes archAgentPulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.12)}50%{box-shadow:0 0 0 6px rgba(34,197,94,.05)}}
@media(max-width:600px){.newchat-agent{width:100%;padding:22px 14px 20px;gap:10px}.newchat-agent-avatar{width:84px;height:84px;flex-basis:84px}.newchat-agent-info strong{font-size:20px}.newchat-agent-info span,.newchat-agent-info small{font-size:12px}}

/* v19.2.53: theme-driven delegation flow and accessible Agent dropdown */
.delegation-card{margin:10px 0 14px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--panel);color:var(--text);max-width:650px}
.delegation-head,.delegation-heading,.delegation-buttons{display:flex;align-items:center;gap:9px}.delegation-head{justify-content:space-between;flex-wrap:wrap}.delegation-heading{font-size:13px;font-weight:700}.delegation-heading svg,.delegation-buttons svg{width:17px;height:17px;flex-shrink:0}
.delegation-status{font-size:11px;font-weight:650;padding:5px 10px;border:1px solid var(--glow-border);border-radius:99px;color:var(--accent);background:var(--accent-soft)}
.delegation-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:currentColor;box-shadow:0 0 0 3px var(--accent-soft);animation:arch-delegation-beacon 2s ease-in-out infinite}
.delegation-flow{display:flex;align-items:flex-start;margin:21px 0 13px;gap:0}.delegation-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 86px;text-align:center;min-width:0}.delegation-node{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--border);border-radius:50%;background:var(--panel-2);color:var(--muted);font-size:13px;font-weight:700;position:relative;z-index:1}.delegation-step.done .delegation-node,.delegation-step.current .delegation-node{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}.delegation-step.current .delegation-node{box-shadow:0 0 0 5px var(--accent-soft),0 0 20px var(--glow-border);animation:arch-delegation-beacon 2.2s ease-in-out infinite}.delegation-step.error .delegation-node{border-color:var(--accent);color:var(--accent)}.delegation-step-label{font-size:10px;line-height:1.35;color:var(--muted)}.delegation-step.current .delegation-step-label{color:var(--text);font-weight:700}.delegation-link{height:2px;flex:1;min-width:12px;margin-top:17px;background:var(--border);overflow:hidden;position:relative}.delegation-link-pulse{position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:translateX(-100%)}.delegation-card[data-status="running"] .delegation-link-pulse{animation:arch-delegation-flow 2.4s linear infinite}.delegation-detail{font-size:12px;color:var(--muted);line-height:1.55;margin-top:10px}.delegation-buttons{margin-top:15px;flex-wrap:wrap}.delegation-buttons .btn{display:inline-flex;align-items:center;gap:7px;justify-content:center;min-height:36px}.delegation-reject{background:transparent!important;border:1px solid var(--border)!important;color:var(--text)!important}.delegation-reject:hover{border-color:var(--accent)!important;background:var(--accent-soft)!important}
@keyframes arch-delegation-flow{to{transform:translateX(100%)}}@keyframes arch-delegation-beacon{0%,100%{filter:brightness(1);opacity:1}50%{filter:brightness(1.18);opacity:.78}}
.agent-picker{position:relative;min-width:115px;max-width:210px}.agent-quick-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.agent-picker-toggle{display:flex;align-items:center;gap:7px;min-width:115px;max-width:210px;border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--text);padding:7px 9px;cursor:pointer;font-size:12px}.agent-picker-toggle svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor}.agent-picker-toggle span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}.agent-picker-toggle:hover,.agent-picker-toggle[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft)}.agent-picker-menu{position:absolute;top:calc(100% + 7px);right:0;min-width:210px;max-width:min(310px,85vw);max-height:320px;overflow:auto;z-index:80;border:1px solid var(--border);border-radius:12px;padding:5px;background:var(--panel);box-shadow:0 14px 32px rgba(0,0,0,.2)}.agent-picker-menu.hidden{display:none}.agent-picker-menu button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-size:12px}.agent-picker-menu button:hover,.agent-picker-menu button:focus-visible,.agent-picker-menu button[aria-selected="true"]{background:var(--accent-soft)}.agent-picker-menu svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor}.agent-picker-menu button span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis}.agent-choice-check{color:var(--accent);font-weight:700}
@media(max-width:650px){.agent-picker,.agent-picker-toggle{max-width:135px;min-width:90px}.delegation-card{padding:12px}.delegation-step{flex-basis:72px}.delegation-step-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.delegation-card *{animation:none!important;transition:none!important}}

/* Research images: inline thumbnails open in an accessible lightbox. */
.body .research-image-trigger{display:inline-flex;flex-direction:column;gap:5px;vertical-align:top;max-width:min(100%,360px);margin:8px 10px 8px 0;padding:6px;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--muted);cursor:zoom-in;text-align:left}
.body .research-image-trigger img{display:block;max-width:100%;width:auto;max-height:280px;object-fit:contain;border-radius:8px}
.research-image-caption{font-size:12px;overflow-wrap:anywhere;padding:0 3px}
.research-lightbox{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:56px 24px 24px;background:rgba(0,0,0,.88);backdrop-filter:blur(6px)}
.research-lightbox[hidden]{display:none}
.research-lightbox img{max-width:min(94vw,1500px);max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.4)}
.research-lightbox-close{position:absolute;top:16px;right:20px;width:42px;height:42px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(30,30,30,.8);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.research-lightbox-caption{position:absolute;left:24px;right:24px;bottom:12px;color:#eee;text-align:center;font-size:13px}