/* HotOS interface system — Dani / October 2026 */
:root {
  color-scheme: dark;
  /* Source: app.hotmobile.com.br/css/site.css, dark theme, 2026-10-19. */
  --brand: #148392;
  --brand-strong: #0f6f7b;
  --brand-soft: rgba(20, 131, 146, .14);
  --brand-border: rgba(20, 131, 146, .48);
  --bg-primary: #101617;
  --bg-sidebar: #151d1f;
  --bg-surface: #182122;
  --surface-raised: #1f2a2c;
  --surface-muted: #243234;
  --bg-input: #202c2e;
  --bg-surface-hover: var(--surface-muted);
  --border-color: rgba(222, 245, 247, .1);
  --border-focus: var(--brand);
  --text-primary: #eef7f8;
  --text-secondary: #a7b8bc;
  --text-muted: #a7b8bc;
  --rail-bg: #0b1112;
  --rail-text: #d9eeee;
  --accent-cyan: var(--brand);
  --accent-teal: var(--brand-strong);
  --accent-blue: var(--brand);
  --accent-green: #24b47e;
  --accent-yellow: #d49b16;
  --accent-red: #d85d5d;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 10px;
  --radius-panel: 16px;
  --font-label: 13px;
  --font-control: 14px;
  --font-body: 16px;
  --content-width: 880px;
}
body { font-size: var(--font-control); line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--font-sans); }
button { line-height: 1.4; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 3px; }
::selection { background: var(--brand-strong); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--surface-muted) transparent; }
.muted-text { color: var(--text-muted); font-size: var(--font-label); line-height: 1.6; }
.eyebrow { font-size: 11px; letter-spacing: .12em; font-weight: 600; color: var(--accent-cyan); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.icon-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.primary-sm, .ghost-sm, .del-btn { min-height: 40px; padding: 10px 16px; font-size: var(--font-control); border-radius: var(--radius-control); font-weight: 500; }
.primary-sm, .login-submit, .send-btn { background: var(--accent-cyan); color: #ffffff; }
.primary-sm:hover, .send-btn:hover { background: var(--brand-strong); }
.ghost-sm:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.del-btn { color: var(--accent-red); }
.form-buttons { flex-wrap: wrap; gap: 10px; }
.tab-action-bar .form-buttons { margin-top: 0; }

/* Login and application shell */
.login-screen { padding: 24px; overflow-y: auto; background: var(--bg-primary); }
.orb { opacity: .09; }
.login-card { max-width: 460px; padding: 40px; background: var(--bg-surface); border-color: var(--border-color); border-radius: 24px; box-shadow: 0 24px 80px #0006; margin: auto; }
.login-logo, .brand .logo { background: var(--brand-soft); color: var(--rail-text); box-shadow: none; flex-shrink: 0; }
.login-card h1 { font-size: 28px; letter-spacing: -.7px; }
.login-copy { line-height: 1.7; margin: 24px 0; }
.login-form label { font-size: 13px; color: var(--text-secondary); }
.input-wrap input { min-height: 46px; font-size: 15px; border-radius: 10px; }
.password-wrap input { padding-right: 80px; }
.password-wrap button { min-height: 40px; color: var(--text-secondary); }
.login-submit { min-height: 48px; border-radius: 10px; }
.login-foot { flex-wrap: wrap; gap: 8px; font-size: 12px; }
.app, .chat-main { height: 100dvh; }
.app { width: 100%; }
.sidebar { width: 280px; flex: 0 0 280px; }
.sidebar-header { padding: 24px 16px; gap: 8px; }
.brand { min-width: 0; }
.brand div b { font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.brand div span { display: block; font-size: 12px; margin-top: 2px; }
.brand .logo { width: 36px; height: 36px; border: 1px solid var(--brand-border); }
.new-chat-btn { background: var(--surface-raised); margin: 0 16px 24px; min-height: 46px; border-color: var(--border-color); gap: 10px; border-radius: 10px; }
.plus-icon { font-size: 22px; color: var(--rail-text); }
.sessions-section { padding: 0 12px; }
.section-title { align-items: center; font-size: 11px; padding: 0 12px; }
.section-title button { width: 32px; height: 32px; font-size: 18px; }
.session-item { min-height: 44px; padding: 10px 12px; font-size: 14px; }
.session-title { max-width: 200px; }
.delete-session-btn { min-width: 28px; min-height: 28px; }
.session-item:focus-within .delete-session-btn { opacity: 1; }
.sidebar-footer { padding: 16px; border-top: 1px solid var(--border-color); display: grid; gap: 6px; }
.user-card { padding: 8px 4px 16px; gap: 12px; }
.user-info { min-width: 0; }
.user-info b { font-size: 14px; overflow-wrap: anywhere; }
.badge { font-family: var(--font-sans); font-size: 11px; font-weight: 500; border-radius: 6px; }
.admin-entry-btn, .logout-btn { min-height: 42px; font-size: 14px; border-radius: 9px; text-align: left; }
.chat-main { min-width: 0; }
.chat-header { min-height: 80px; height: auto; padding: 14px 28px; gap: 12px; flex-shrink: 0; background: var(--bg-primary); }
.header-left, .header-right { min-width: 0; }
#openSidebarBtn { display: inline-flex; }
.agent-display { color: var(--text-primary); padding: 8px 12px; min-height: 50px; gap: 12px; text-align: left; background: transparent; border-color: transparent; }
.agent-text { min-width: 0; gap: 4px; }
.agent-text b { font-size: 15px; font-weight: 600; }
.agent-text span { font-size: 12px; }
.agent-icon { font-size: 22px; }
.agent-dropdown { width: 340px; max-height: min(560px, 70dvh); overflow-y: auto; padding: 8px; border-radius: 14px; }
.agent-option { min-height: 62px; padding: 12px; }
.agent-option .agent-text p { font-size: 12px; line-height: 1.5; }
.picker-section-title { font-size: 11px; padding: 12px; }
.run-indicator { font-size: 13px; background: var(--surface-raised); padding: 7px 12px; border: 1px solid var(--border-color); border-radius: 20px; }
.dot.idle { background: var(--text-muted); }
.stop-btn { min-height: 40px; font-size: 13px; }
.sidebar-backdrop { display: none; }
@media (min-width: 769px) { .sidebar-collapsed .sidebar { display: none; } }

/* Conversation and composer */
.messages-container { padding: 36px 32px; gap: 28px; min-height: 0; }
.message-row { max-width: var(--content-width); }
.message-body { font-size: var(--font-body); line-height: 1.75; min-width: 0; overflow-wrap: anywhere; }
.message-row.assistant .message-body { max-width: calc(100% - 48px); }
.message-row.user .message-body { background: var(--brand-soft); border-color: var(--brand-border); padding: 14px 20px; }
.empty-state { max-width: 660px; width: 100%; padding: 40px 12px; gap: 16px; }
.empty-icon { width: 68px; height: 68px; display: grid; place-items: center; font-size: 32px; background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 20px; margin-bottom: 8px; }
.empty-state h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -1.2px; line-height: 1.2; }
.empty-state > p:not(.eyebrow) { font-size: 15px; line-height: 1.7; max-width: 470px; }
.empty-state .eyebrow { font-size: 11px; color: var(--accent-cyan); }
.quick-prompts { margin-top: 20px; gap: 16px; }
.prompt-card { padding: 20px; border-radius: 14px; min-height: 106px; font-size: 13px; line-height: 1.6; background: var(--bg-surface); }
.prompt-card b { font-size: 15px; font-weight: 500; margin-bottom: 7px; }
.prompt-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.composer-wrapper { max-width: 928px; padding: 16px 24px 24px; }
.composer-form { background: var(--surface-raised); border-color: var(--border-color); border-radius: 18px; padding: 14px 16px; gap: 16px; box-shadow: 0 8px 32px #0002; }
.composer-form textarea { font-size: 16px; line-height: 1.6; min-height: 28px; padding: 7px 0; }
.send-btn { width: 44px; height: 44px; border-radius: 12px; }
.composer-disclaimer { font-size: 12px; margin-top: 12px; line-height: 1.5; }

/* Administration workspace */
.modal-backdrop { padding: 24px; background: rgba(11, 17, 18, .85); backdrop-filter: blur(6px); }
.modal-card { width: min(1360px, 100%); max-width: 1360px; height: min(920px, calc(100dvh - 48px)); display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: 80px minmax(0, 1fr); border-radius: 20px; background: var(--bg-primary); box-shadow: 0 32px 100px #0008; border-color: var(--border-color); }
.modal-header { grid-column: 1 / -1; padding: 16px 28px; background: var(--bg-surface); gap: 16px; }
.modal-header .brand div b { font-size: 19px; }
.modal-header .brand div span { color: var(--text-muted); font-size: 13px; }
.admin-tabs { flex-direction: column; padding: 24px 12px; gap: 6px; border-bottom: 0; border-right: 1px solid var(--border-color); background: var(--bg-sidebar); overflow-y: auto; }
.tab-btn { width: 100%; min-height: 46px; text-align: left; padding: 12px 16px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; }
.tab-btn:hover { background: var(--surface-raised); color: #fff; }
.tab-btn.active { color: var(--rail-text); background: var(--brand-soft); border-color: var(--brand-border); }
.modal-body { padding: 32px; min-width: 0; min-height: 0; background: var(--bg-primary); overscroll-behavior: contain; }
.tab-pane { max-width: 1080px; margin: 0 auto; }
.tab-pane h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.6px; font-weight: 600; }
.tab-pane h4 { font-size: 17px; line-height: 1.4; font-weight: 600; }
.tab-action-bar { align-items: flex-start; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.tab-action-bar .eyebrow { margin-bottom: 6px; }
.tab-action-bar .muted-text { margin-top: 7px; }
.page-heading { margin-bottom: 28px; }
.page-heading .eyebrow { margin-bottom: 12px; }
.page-heading h2 { font-size: clamp(24px, 2.5vw, 30px); line-height: 1.25; font-weight: 600; letter-spacing: -.8px; }
.page-heading > p:last-child { color: var(--text-muted); margin-top: 10px; font-size: 14px; }
.overview-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { padding: 20px; background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 14px; display: flex; flex-direction: column; gap: 8px; }
.stat-card > span { font-size: 13px; color: var(--text-secondary); }
.stat-card strong { font-size: 32px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.stat-card small { font-size: 12px; color: var(--text-muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.section-heading h3 { font-size: 18px; }
.overview-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.overview-agent { background: var(--bg-surface); border: 1px solid var(--border-color); padding: 20px; border-radius: 14px; display: flex; flex-direction: column; }
.overview-agent-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.overview-agent-heading > div { min-width: 0; }
.overview-agent h4 { font-size: 16px; margin: 0; overflow-wrap: anywhere; }
.overview-agent-heading p { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.overview-agent-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; background: var(--bg-surface-hover); border-radius: 12px; font-size: 20px; }
.overview-agent-description { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 18px 0; flex: 1; overflow-wrap: anywhere; }
.route-badge { font-size: 12px; color: var(--rail-text); padding-top: 14px; border-top: 1px solid var(--border-color); overflow-wrap: anywhere; }
.route-badge span { color: var(--text-muted); }
.system-details { margin-top: 28px; color: var(--text-muted); font-size: 13px; }
summary { cursor: pointer; padding: 10px 0; }
.system-version { border-top: 1px solid var(--border-color); margin-top: 24px; padding-top: 16px; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--text-muted); }
#adminVersionOutput { white-space: pre-wrap; overflow-wrap: anywhere; text-align: right; }

/* Shared forms, tables, and integrations */
.new-user-form, .mcp-editor-card { background: var(--bg-surface); border: 1px solid var(--border-color); padding: 24px; border-radius: 16px; margin-bottom: 28px; }
.form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.form-grid > *, .form-field { min-width: 0; }
.form-grid label, .form-field > label, .mcp-form label, .agent-tools-settings label, #agentWizard label, .squad-step-fields label { display: block; color: var(--text-primary); font-size: 13px; font-weight: 500; line-height: 1.5; margin-bottom: 8px; }
.form-field { margin-top: 20px; }
.form-grid input, .form-grid select, .form-field input, .form-field textarea, .agent-tools-settings select, .mcp-form input, .mcp-form select, .mcp-form textarea, .mcp-profile-row select, .squad-step-fields input, .squad-step-fields select, .squad-step-fields textarea, #agentWizard textarea { width: 100%; font: 14px/1.6 var(--font-sans); border: 1px solid rgba(222, 245, 247, .24); border-radius: 10px; padding: 10px 12px; color: var(--text-primary); background: var(--bg-input); min-height: 44px; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
.form-grid label > input, .form-grid label > select, .form-grid label > textarea { margin-top: 8px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-cyan); }
.agent-tools-settings { margin-top: 20px; padding: 12px 16px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px; font-size: 13px; }
.agent-tools-settings p { margin-top: 10px; }
input[type="checkbox"] { width: 17px; min-height: 17px; height: 17px; accent-color: var(--brand); }
.checkbox-group { gap: 12px 20px; padding-top: 8px; }
.checkbox-group label { font-size: 14px; gap: 8px; min-height: 32px; }
.new-user-form h4, .mcp-editor-card h4 { margin-bottom: 20px; }
.form-msg:not(:empty) { margin-top: 16px; font-size: 14px; }
.table-wrap { border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-surface); }
.admin-table { font-size: 14px; }
.admin-table th { background: var(--bg-surface-hover); color: var(--text-secondary); font-size: 12px; font-weight: 500; padding: 14px 18px; white-space: nowrap; }
.admin-table td { padding: 16px 18px; border-bottom: 1px solid var(--border-color); vertical-align: middle; overflow-wrap: anywhere; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--bg-surface-hover); }
.admin-table td:last-child { white-space: nowrap; }
.admin-table td code { font-family: var(--font-sans); font-size: 12px; color: var(--rail-text); }
.admin-table .badge { display: inline-block; padding: 4px 8px; color: var(--text-secondary); background: var(--bg-surface-hover); }
.admin-table .ghost-sm, .admin-table .del-btn { padding: 8px 10px; font-size: 13px; }
.console-box, .mcp-form textarea { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; background: var(--rail-bg); padding: 16px; }
.mcp-profile-row { flex-wrap: wrap; margin: 20px 0; gap: 12px; }
.mcp-profile-row label { font-size: 13px; }
.mcp-profile-row select { width: auto; }
.mcp-form label { display: flex; }
.mcp-form .muted-text { font-size: 13px; line-height: 1.6; }
.mcp-connection-card { padding: 20px; gap: 16px; }
.mcp-connection-main b { font-size: 15px; }
.mcp-connection-main span:not(.mcp-connection-icon), .mcp-connection-meta code, .mcp-test-result { font-size: 12px; }
.mcp-editor-heading { margin-bottom: 24px; }
.mcp-editor-heading h4 { margin-bottom: 6px; }
.squad-step-row, .squad-admin-card { padding: 20px; border-radius: 14px; }
.squad-admin-card p, .squad-stage-list { font-size: 14px; line-height: 1.6; }
.squad-step-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.squad-step-fields .squad-approval-label { display: flex; gap: 8px; }
.squad-step-fields .squad-approval { width: 17px; min-height: 17px; }
.shortcut-card { padding: 20px; border-radius: 14px; }
.shortcut-card b { font-size: 16px; }
.shortcut-card span { font-size: 13px; line-height: 1.6; }

/* Guided creation */
#agentWizard { border-color: var(--brand); background: var(--surface-raised); }
.agent-wizard-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 20px 0 24px; }
.agent-wizard-steps li { padding: 12px; background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 10px; font-size: 12px; color: var(--text-secondary); }
.agent-wizard-steps .is-current { color: var(--rail-text); border-color: var(--brand); background: var(--brand-soft); }
#agentWizard input[type="file"] { width: 100%; padding: 12px; border: 1px dashed var(--brand-border); background: var(--bg-input); border-radius: 12px; font-size: 13px; }
#agentWizard input::file-selector-button { background: var(--bg-surface-hover); color: var(--text-primary); border: 0; padding: 10px 14px; border-radius: 8px; margin-right: 12px; font: inherit; cursor: pointer; }
#agentWizardFileHint { margin: 12px 0 8px; }
#agentWizardFileList { margin: 12px 0 12px 20px; }
#agentWizardStatus:not(:empty) { margin-top: 20px; padding: 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px; font-size: 14px; }
#agentWizardReview h5 { font-size: 14px; margin: 20px 0 8px; }
#agentWizardReview ul { padding-left: 22px; }
#agentWizardReview li { margin-bottom: 8px; }
#agentWizardReview .muted-text { margin: 16px 0; }

@media (max-width: 1100px) {
  .modal-card { grid-template-columns: 180px minmax(0,1fr); }
  .modal-body { padding: 24px; }
  .overview-agents { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-table th, .admin-table td { padding: 12px; }
  .sidebar { width: 252px; flex-basis: 252px; }
}
@media (max-width: 900px) {
  .modal-backdrop { padding: 12px; }
  .modal-card { height: calc(100dvh - 24px); grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr); }
  .modal-header { padding: 16px 20px; }
  .admin-tabs { flex-direction: row; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--border-color); overflow-x: auto; }
  .tab-btn { width: auto; min-height: 40px; white-space: nowrap; flex-shrink: 0; padding: 10px 14px; }
  .modal-body { padding: 24px; }
}
@media (max-width: 768px) {
  .sidebar { position: fixed; width: min(320px, 86vw); height: 100dvh; transform: translateX(-100%); box-shadow: 16px 0 60px #0007; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop:not(.hidden) { display: block; position: fixed; inset: 0; border: 0; background: #0009; z-index: 90; }
  .chat-header { padding: 10px 12px; min-height: 72px; }
  .header-left { gap: 4px; }
  .agent-display { padding: 6px; gap: 8px; }
  .agent-text span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-right { gap: 6px; }
  .run-indicator { padding: 6px 8px; font-size: 11px; }
  .agent-dropdown { position: fixed; left: 12px; right: 12px; top: 74px; width: auto; }
  .messages-container { padding: 24px 16px; }
  .message-body { font-size: 16px; }
  .message-row { gap: 10px; }
  .message-row.user .message-body { max-width: 90%; }
  .empty-state { padding: 24px 0; }
  .quick-prompts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .prompt-card { padding: 16px; }
  .composer-wrapper { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
  .composer-form { padding: 10px 12px; border-radius: 16px; }
  .composer-disclaimer { font-size: 11px; }
  .delete-session-btn { opacity: 1; }
}
@media (max-width: 620px) {
  .modal-backdrop { padding: 0; }
  .modal-card { height: 100dvh; width: 100%; border: 0; border-radius: 0; }
  .modal-header { padding: 16px; }
  .modal-header .brand div b { font-size: 18px; }
  .modal-header .brand div span { font-size: 12px; max-width: 230px; }
  .modal-body { padding: 24px 16px; }
  .admin-tabs { padding: 8px; }
  .tab-action-bar { gap: 16px; margin-bottom: 20px; }
  .tab-action-bar > .form-buttons { width: 100%; }
  .tab-action-bar .form-buttons button { flex: 1; padding: 10px; }
  .page-heading h2 { font-size: 26px; }
  .overview-stats { gap: 8px; margin-bottom: 28px; }
  .stat-card { padding: 14px 10px; gap: 10px; }
  .stat-card > span { font-size: 12px; line-height: 1.4; min-height: 34px; }
  .stat-card strong { font-size: 28px; }
  .stat-card small { display: none; }
  .overview-agents { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .section-heading h3 { font-size: 17px; }
  .section-heading .muted-text { font-size: 12px; }
  .new-user-form, .mcp-editor-card { padding: 20px 16px; }
  .form-grid, .squad-step-fields, .shortcuts-grid { grid-template-columns: minmax(0,1fr); }
  .form-grid input, .form-grid select, .form-field input, .form-field textarea, .mcp-form input, .mcp-form select, .mcp-form textarea, .mcp-profile-row select, .squad-step-fields input, .squad-step-fields select, .squad-step-fields textarea, #agentWizard textarea { font-size: 16px; }
  .table-wrap { border: 0; background: none; overflow: visible; }
  .admin-table, .admin-table tbody, .admin-table tr { display: block; width: 100%; }
  .admin-table thead { display: none; }
  .admin-table tr { border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-surface); margin-bottom: 12px; padding: 8px 16px; }
  .admin-table td { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 8px; padding: 10px 0; border: 0; font-size: 14px; }
  .admin-table td::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; padding-top: 2px; }
  .admin-table td:first-child { display: block; font-size: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); margin-bottom: 6px; }
  .admin-table td:first-child::before { display: none; }
  .admin-table td:last-child { display: flex; align-items: center; flex-wrap: wrap; white-space: normal; }
  .admin-table td:last-child::before { width: 92px; }
  .admin-table tr:hover td { background: transparent; }
  .agent-wizard-steps { grid-template-columns: minmax(0,1fr); gap: 6px; margin: 16px 0 20px; }
  .agent-wizard-steps li { padding: 10px 12px; }
  .mcp-profile-row select { width: 100%; }
  .mcp-connection-actions { flex-wrap: wrap; }
  .squad-card-actions { flex-wrap: wrap; }
  .system-version { flex-direction: column; gap: 4px; }
  #adminVersionOutput { text-align: left; }
}
@media (max-width: 400px) {
  .agent-text span { max-width: 110px; }
  .run-indicator { gap: 4px; }
  .empty-state h2 { font-size: 28px; }
  .quick-prompts { grid-template-columns: 1fr; }
  .prompt-card { min-height: auto; }
  .login-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.session-title { background: none; border: 0; color: inherit; font: inherit; text-align: left; min-height: 28px; flex: 1; cursor: pointer; }

/* Complete the brand mapping for components inherited from styles.css. */
.orb-a { background: var(--brand); }
.orb-b { background: var(--brand-strong); }
.login-submit:hover { background: var(--brand-strong); opacity: 1; }
.login-logo, .brand .logo { background: var(--brand); color: #fff; }
.user-avatar { background: var(--surface-muted); color: var(--rail-text); }
.message-row.user .message-avatar { background: var(--surface-muted) !important; }
.badge, .badge.admin { background: var(--brand-soft); color: var(--rail-text); }
.admin-entry-btn { background: var(--brand-soft); color: var(--rail-text); border-color: var(--brand-border); }
.admin-entry-btn:hover { background: var(--surface-muted); }
.text-pill, .shortcut-card { background: var(--bg-surface); }
.console-box { color: var(--text-secondary); }
.squad-option { border-color: var(--brand-border); }
.eyebrow { color: var(--text-secondary); }
.tab-btn.active, .agent-wizard-steps .is-current { box-shadow: inset 3px 0 var(--brand); }
.stop-btn { background: rgba(216, 93, 93, .14); }

.chat-header { background: var(--surface-raised); }
.primary-sm, .login-submit, .send-btn { font-weight: 600; }
/* Small white labels require the official strong tone (brand gives only 4.48:1). */
.primary-sm, .login-submit, .send-btn { background: var(--brand-strong); color: #fff; }
.primary-sm:hover, .login-submit:hover, .send-btn:hover { background: var(--brand-strong); box-shadow: 0 0 0 2px var(--brand); }

/* Official Hotmobile mark, also used by the HotOS login. */
.hotmobile-brand-logo { display: block; object-fit: contain; flex: 0 0 auto; height: auto; background: transparent; }
.hotmobile-brand-logo-login { width: 72px; }
.hotmobile-brand-logo-sidebar { width: 44px; }
@media (max-width: 480px) { .hotmobile-brand-logo-login { width: 60px; } }

/* Dani review: consistent secondary screens and touch controls. */
.active-job-indicator .message-body { color: var(--text-secondary) !important; }
.mcp-form .muted-text { font-size: 13px; }
.mcp-editor-heading select { min-height: 44px; font-family: var(--font-sans); }
.mcp-profile-row { flex-wrap: wrap; }
.mcp-profile-row select { min-width: 0; max-width: 100%; }
.mcp-connection-card, .mcp-connection-meta, .squad-step-fields, .squad-admin-card > div { min-width: 0; }
.mcp-connection-meta code, .squad-stage-list, .squad-admin-card p { overflow-wrap: anywhere; }
.mcp-connection-actions { flex-wrap: wrap; }
.mcp-connection-main span:not(.mcp-connection-icon) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.agent-dropdown { max-height: min(520px, calc(100dvh - 100px)); overflow-y: auto; overscroll-behavior: contain; }
.form-buttons button, .squad-card-actions button { white-space: normal; }
@media (max-width: 850px) {
  .mcp-editor-heading select { font-size: 16px; }
}
@media (max-width: 768px) {
  .login-form input, .form-grid input, .form-grid select, .form-field input, .form-field textarea,
  .mcp-form input, .mcp-form select, .mcp-form textarea, .mcp-profile-row select,
  .squad-step-fields input, .squad-step-fields select, .squad-step-fields textarea,
  .agent-tools-settings select, #agentWizard textarea { font-size: 16px; }
  .primary-sm, .ghost-sm, .del-btn, .icon-btn, .send-btn, .tab-btn { min-height: 44px; }
  .icon-btn, .send-btn { min-width: 44px; }
  .agent-wizard-steps, .squad-step-fields { grid-template-columns: minmax(0,1fr); }
  .squad-step-row { flex-direction: column; }
  .squad-step-fields .squad-instructions-label, .squad-step-fields .squad-approval-label { grid-column: auto; }
  .mcp-profile-row { align-items: stretch; flex-direction: column; }
  .mcp-profile-row select { width: 100%; }
  .agent-dropdown { z-index: 250; }
}

.agent-option-role { color: var(--text-secondary); }

.integration-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.integration-choice { display: flex !important; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-surface); cursor: pointer; }
.integration-choice input { flex: 0 0 auto; margin-top: 3px; }
.integration-choice small { display: block; color: var(--text-secondary); margin-top: 6px; line-height: 1.6; }
.integration-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
@media(max-width:768px) { .integration-options { grid-template-columns: minmax(0,1fr); } }

.hotos-auth-panel { flex-basis: 100%; min-width: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.hotos-auth-panel p { overflow-wrap: anywhere; }
#hotosCodeForm:not([hidden]) { display: grid; gap: 12px; margin-top: 16px; max-width: 480px; }
#hotosCodeForm[hidden] { display: none; }
#hotosCodeForm > input { width: 100%; min-width: 0; box-sizing: border-box; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input, #202c2e); color: var(--text-primary); font-size: 16px; }
#hotosCodeForm label { font-size: 14px; line-height: 1.5; }
#hotosCodeForm input[type="checkbox"] { width: auto; margin-right: 6px; }