/* =================================================================== AIP four-pane shell: top bar + icon rail + sidebar + main Activated when has class "aip-shell". When unauthenticated or .aip-shell missing, layout falls back to the legacy navbar + container. =================================================================== */ body.aip-shell { margin: 0; background: var(--aip-bg-app); color: var(--aip-text); font: var(--aip-fs-md)/var(--aip-lh) var(--aip-font-sans); -webkit-font-smoothing: antialiased; /* Belt-and-braces: a single overflow-causing element (long table, inline math, mis-set width) shouldn't make the whole page scroll sideways on a phone. The shell has its own internal scrolling. */ overflow-x: hidden; } body.aip-shell .legacy-navbar { display: none !important; } /* Topbar new-chat button. Hidden by default; shown only on phones when the chat is open (the in-panel chat-header is hidden there to keep the panel header-less and let messages start right under the topbar). */ .aip-newchat { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin-right: 4px; background: transparent; border: 1px solid transparent; border-radius: var(--aip-radius); color: var(--aip-text-muted); cursor: pointer; } .aip-newchat:hover { color: var(--aip-text); background: rgba(127,127,127,0.12); } .aip-shell .aip-app { display: grid; /* Three explicit columns: sidebar, main, assist. Assist is 0 by default and expanded by the .chat-sidebar-open rule below. */ grid-template-columns: 240px 1fr 0; grid-template-rows: 56px 1fr; height: 100vh; /* Use 100% of the document body, not 100vw - viewport units include the scrollbar gutter and cause horizontal overflow when a vertical scrollbar is present (especially noticeable on iOS). */ width: 100%; max-width: 100vw; overflow: hidden; } /* Neutralize legacy chat.css body-margin push; the grid handles layout now. */ body.aip-shell.chat-sidebar-open { margin-right: 0 !important; } body.aip-shell.chat-sidebar-open .navbar, body.aip-shell.chat-sidebar-open .legacy-navbar { margin-right: 0 !important; padding-right: 0 !important; } /* ===== Top bar ===== */ .aip-topbar { grid-column: 1 / -1; display: flex; align-items: center; background: var(--aip-bg-panel); border-bottom: 1px solid var(--aip-border); padding: 0 18px; gap: 16px; z-index: 80; /* above the drawer overlay so it stays clickable */ height: 56px; flex-shrink: 0; } .aip-brand { font-weight: 600; letter-spacing: 0.6px; font-size: 15px; color: var(--aip-text); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .aip-topnav { display: flex; align-items: center; gap: 4px; margin-left: 12px; } .aip-topnav a { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 13px; color: var(--aip-text-muted); text-decoration: none; border-radius: var(--aip-radius); } .aip-topnav a:hover { color: var(--aip-text); background: rgba(127,127,127,0.10); } .aip-topnav a.active { color: var(--aip-accent); background: var(--aip-accent-bg); } .aip-crumb { color: var(--aip-text-muted); font-size: var(--aip-fs-sm); display: inline-flex; align-items: center; gap: 6px; } .aip-crumb b { color: var(--aip-text); font-weight: 500; } .aip-spacer { flex: 1; } .aip-iconbtn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--aip-radius); color: var(--aip-text-muted); cursor: pointer; font: inherit; font-size: 13px; text-decoration: none; } .aip-iconbtn:hover { background: rgba(127,127,127,0.10); color: var(--aip-text); } .aip-userchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: var(--aip-fs-sm); color: var(--aip-text-muted); border-radius: 999px; background: var(--aip-bg-elevated); border: 1px solid var(--aip-border); } .aip-userchip .role { opacity: 0.7; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .aip-logout { font-size: var(--aip-fs-sm); color: var(--aip-text-muted); text-decoration: none; padding: 4px 8px; border-radius: var(--aip-radius); } .aip-logout:hover { color: var(--aip-text); background: rgba(127,127,127,0.10); } /* ===== Left icon rail ===== */ .aip-rail { background: var(--aip-bg-panel); border-right: 1px solid var(--aip-border); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px; overflow-y: auto; } .aip-rail .rb { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--aip-text-muted); border-radius: var(--aip-radius); cursor: pointer; font-size: 16px; text-decoration: none; position: relative; } .aip-rail .rb:hover { background: rgba(127,127,127,0.10); color: var(--aip-text); } .aip-rail .rb.active { background: var(--aip-accent-soft); color: var(--aip-accent); } .aip-rail .rb[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 44px; background: var(--aip-bg-elevated); color: var(--aip-text); padding: 4px 8px; border-radius: var(--aip-radius); font-size: var(--aip-fs-sm); white-space: nowrap; border: 1px solid var(--aip-border); z-index: 100; pointer-events: none; } .aip-rail .rb-spacer { flex: 1; } /* ===== Sidebar ===== */ .aip-sidebar { background: var(--aip-bg-panel); border-right: 1px solid var(--aip-border); overflow-y: auto; padding: 8px 0; } .aip-s-section { padding: 10px 12px 4px; } .aip-s-section h4 { margin: 0; font-size: var(--aip-fs-xs); letter-spacing: 0.6px; text-transform: uppercase; color: var(--aip-text-muted); font-weight: 600; } .aip-s-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; color: var(--aip-text); cursor: pointer; border-left: 2px solid transparent; text-decoration: none; } .aip-s-item:hover { background: rgba(127,127,127,0.06); color: var(--aip-text); } .aip-s-item.active { background: var(--aip-accent-bg); border-left-color: var(--aip-accent); color: var(--aip-accent); } .aip-s-item .ic { color: var(--aip-text-muted); width: 14px; display: inline-flex; justify-content: center; } .aip-s-item .badge { margin-left: auto; font-size: 10px; padding: 1px 6px; background: var(--aip-bg-elevated); color: var(--aip-text-muted); border-radius: 8px; } .aip-s-item .aip-s-tag { margin-left: auto; font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; padding: 1px 5px; background: var(--aip-bg-elevated); color: var(--aip-text-muted); border-radius: 3px; font-weight: 600; border: 1px solid var(--aip-border); } /* ===== Main pane ===== */ .aip-main { overflow-y: auto; padding: 16px 20px; background: var(--aip-bg-app); } .aip-main .container { max-width: none !important; padding: 0 !important; margin: 0 !important; } /* AIP-style buttons that pages can opt into */ .aip-btn { font: inherit; height: 30px; padding: 0 10px; background: var(--aip-bg-elevated); color: var(--aip-text); border: 1px solid var(--aip-border); border-radius: var(--aip-radius); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 13px; } .aip-btn:hover { background: rgba(127,127,127,0.16); } .aip-btn.primary { background: var(--am-green); border-color: var(--am-green-dark); color: var(--bp-dark-gray1); } .aip-btn.primary:hover { background: var(--am-green-dark); } .aip-btn.minimal { background: transparent; border-color: transparent; color: var(--aip-text-muted); } .aip-btn.minimal:hover { background: rgba(127,127,127,0.10); color: var(--aip-text); } /* AIP-style tags / status pills */ .aip-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--aip-bg-elevated); color: var(--aip-text-muted); font-weight: 500; } .aip-tag.primary { background: var(--aip-accent-soft); color: var(--aip-accent); } .aip-tag.success { background: rgba(35,133,81,0.25); color: var(--bp-green5); } .aip-tag.warning { background: rgba(200,118,25,0.25); color: var(--bp-orange5); } .aip-tag.danger { background: rgba(205,66,70,0.25); color: var(--bp-red5); } .aip-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Theme toggle button */ .aip-theme-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--aip-radius); background: transparent; border: 1px solid var(--aip-border); color: var(--aip-text-muted); font: inherit; font-size: var(--aip-fs-sm); cursor: pointer; } .aip-theme-toggle:hover { color: var(--aip-text); border-color: var(--aip-border-strong); } /* ===== Hamburger button (only shown when sidebar is collapsed) ===== */ .aip-hamburger { display: none; /* shown by media query below */ width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--aip-radius); color: var(--aip-text); cursor: pointer; margin-left: -8px; /* tuck closer to brand */ flex-shrink: 0; } .aip-hamburger:hover { background: rgba(127,127,127,0.10); } .aip-hamburger:focus-visible { outline: 2px solid var(--aip-accent); outline-offset: -2px; } .aip-hamburger svg { width: 20px; height: 20px; } /* Backdrop scrim for mobile drawer (modal sidebar). Lives outside the grid so it can cover the topbar shadow consistently. Hidden by default. */ .aip-scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 50; opacity: 0; transition: opacity 200ms ease; } .aip-shell .aip-app.sidebar-open ~ .aip-scrim, .aip-shell .aip-app.sidebar-open + .aip-scrim { display: block; } /* Drawer footer: only rendered/visible on mobile drawer */ .aip-drawer-footer { display: none; border-top: 1px solid var(--aip-border); padding: 12px 14px; font-size: var(--aip-fs-sm); color: var(--aip-text-muted); } .aip-drawer-footer .aip-drawer-user { display: block; margin-bottom: 4px; color: var(--aip-text); word-break: break-all; } .aip-drawer-footer .aip-drawer-role { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; background: var(--aip-bg-elevated); color: var(--aip-text-muted); padding: 1px 6px; border-radius: 3px; margin-bottom: 8px; } .aip-drawer-footer .aip-drawer-logout { display: block; margin-top: 8px; padding: 10px 0; color: var(--aip-text); text-decoration: none; border-top: 1px solid var(--aip-border); min-height: var(--aip-touch-target); } /* =================================================================== MEDIUM viewport: <840px — collapse sidebar into a slide-in drawer. Three-pane shell becomes single column, sidebar overlays content on demand. Triggered by hamburger button. =================================================================== */ @media (max-width: 840px) { .aip-shell .aip-app { grid-template-columns: 1fr; } .aip-hamburger { display: inline-flex; } /* Sidebar becomes a fixed overlay drawer (modal pattern). Material spec: width capped at 320dp, mobile uses min(85vw, 320px). */ .aip-shell .aip-sidebar { display: flex; flex-direction: column; position: fixed; top: 56px; left: 0; bottom: 0; width: min(85vw, 320px); z-index: 60; /* above scrim */ transform: translateX(-100%); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .aip-shell .aip-app.sidebar-open .aip-sidebar { transform: translateX(0); } /* Show drawer footer with user info + logout. The topbar versions are hidden via the compact rules below. */ .aip-drawer-footer { display: block; margin-top: auto; } /* Body scroll lock when drawer open — prevents content scroll bleed */ body.aip-shell.sidebar-open-lock { overflow: hidden; } /* Prevent main from being shoved down by the absolute sidebar */ .aip-main { padding: 16px; } /* Tap targets in sidebar items: bump from 13px line to 44px hit area */ .aip-s-item { min-height: var(--aip-touch-target); padding: 10px 14px; font-size: 14px; } .aip-s-section { padding: 12px 14px 4px; } } /* =================================================================== COMPACT viewport: <600px — phones. Strip topbar to brand + crumb. Move user chip + logout into the drawer footer. Tighter padding. =================================================================== */ @media (max-width: 600px) { .aip-topbar { padding: 0 8px; gap: 4px; } .aip-brand { font-size: 14px; letter-spacing: 0.5px; } .aip-crumb { font-size: var(--aip-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; /* allow flex shrink */ flex: 1; } /* Hide email + role in topbar; user info now lives in the drawer footer */ .aip-userchip { display: none; } .aip-logout { display: none; } /* Assist toggle: keep gem only, drop the "Assist" word for space */ .aip-assist-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; border-color: transparent; } .aip-assist-toggle span:not(.gem) { /* visually hide but keep accessible */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .aip-main { padding: 12px; } } /* On very narrow phones (<360px), drop the breadcrumb entirely so brand + hamburger + assist always fit. Page title still in . */ @media (max-width: 360px) { .aip-crumb { display: none; } } /* =================================================================== AIP Assist pane — restyle the legacy chat widget to slot into the grid as a fourth column. The legacy CSS uses position:fixed and pushes content; we override to make it a real grid item. =================================================================== */ /* Assist column reserved when body.chat-sidebar-open */ body.aip-shell.chat-sidebar-open .aip-app { grid-template-columns: 240px 1fr 380px; } /* Hide the floating green launcher button — replaced by topbar gem */ body.aip-shell #chat-toggle { display: none !important; } /* Make the chat panel a grid column instead of a fixed overlay. position: relative (not static) so z-index applies — without it, modals at z-index 1000 can't reliably cover the panel and we get visual bleed. */ body.aip-shell #chat-panel { position: relative !important; top: auto !important; right: auto !important; width: 100% !important; height: 100% !important; min-width: 0 !important; z-index: 1 !important; grid-row: 2 / 3 !important; grid-column: 3 / 4 !important; background: var(--aip-bg-panel) !important; border-left: 1px solid var(--aip-border) !important; border-top: none !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; flex-direction: column; overflow: hidden; min-width: 0; } /* If the legacy code applied .container shrink to body, neutralize it */ body.aip-shell.chat-sidebar-open .aip-main { padding-right: 16px; } body.aip-shell.chat-sidebar-open main.container, body.aip-shell.chat-sidebar-open .container { margin-right: 0 !important; } /* Header: slate, not green */ body.aip-shell #chat-panel .chat-header { background: var(--aip-bg-panel) !important; color: var(--aip-text) !important; border-bottom: 1px solid var(--aip-border) !important; padding: 10px 14px !important; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } body.aip-shell #chat-panel .chat-header::before { content: ""; width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, var(--bp-blue4), var(--bp-violet5)); flex-shrink: 0; } body.aip-shell #chat-panel .chat-header-actions { margin-left: auto; display: flex; gap: 4px; } body.aip-shell #chat-panel .chat-header-btn { background: transparent !important; color: var(--aip-text-muted) !important; border: 1px solid transparent !important; border-radius: var(--aip-radius) !important; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } body.aip-shell #chat-panel .chat-header-btn:hover { background: rgba(127,127,127,0.12) !important; color: var(--aip-text) !important; } /* Messages area */ body.aip-shell #chat-panel .chat-messages { background: var(--aip-bg-panel) !important; color: var(--aip-text) !important; padding: 12px 14px !important; font-size: 13px; } body.aip-shell #chat-panel .chat-messages a { color: var(--aip-link) !important; } /* Welcome / suggestion chips */ body.aip-shell #chat-panel .chat-suggestion, body.aip-shell #chat-panel .suggestion-btn, body.aip-shell #chat-panel button[class*="suggest"] { background: var(--aip-bg-elevated) !important; color: var(--aip-text) !important; border: 1px solid var(--aip-border) !important; border-radius: var(--aip-radius) !important; padding: 8px 12px !important; font-size: 13px !important; text-align: left !important; width: 100% !important; margin-bottom: 6px !important; cursor: pointer; transition: background 0.1s; } body.aip-shell #chat-panel .chat-suggestion:hover, body.aip-shell #chat-panel .suggestion-btn:hover { background: var(--aip-accent-bg) !important; border-color: var(--aip-accent-border) !important; color: var(--aip-accent) !important; } /* Message bubbles — AIP style: tighter rectangles, no chat-bubble look. */ body.aip-shell #chat-panel .chat-msg { max-width: 92% !important; padding: 8px 12px !important; border-radius: var(--aip-radius) !important; font-size: 13px !important; line-height: 1.45 !important; } body.aip-shell #chat-panel .chat-msg-user { align-self: flex-end !important; background: var(--aip-bg-elevated) !important; color: var(--aip-text) !important; border: 1px solid var(--aip-border-strong) !important; border-bottom-right-radius: var(--aip-radius) !important; } body.aip-shell #chat-panel .chat-msg-assistant { align-self: stretch !important; background: transparent !important; color: var(--aip-text) !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; max-width: 100% !important; } /* Code/preformatted blocks inside assistant messages: subtle slate */ body.aip-shell #chat-panel .chat-msg-assistant code { background: var(--aip-bg-elevated) !important; color: var(--aip-text) !important; border-radius: 3px !important; padding: 1px 5px !important; font-family: var(--aip-font-mono) !important; font-size: 12px !important; } body.aip-shell #chat-panel .chat-msg-assistant pre { background: var(--aip-bg-elevated) !important; border: 1px solid var(--aip-border) !important; border-radius: var(--aip-radius) !important; padding: 10px 12px !important; } /* Input area */ body.aip-shell #chat-panel .chat-input-area { background: var(--aip-bg-panel) !important; border-top: 1px solid var(--aip-border) !important; padding: 10px !important; gap: 8px; } body.aip-shell #chat-panel #chat-input, body.aip-shell #chat-panel textarea { background: var(--aip-bg-elevated) !important; color: var(--aip-text) !important; border: 1px solid var(--aip-border-strong) !important; border-radius: var(--aip-radius) !important; font-size: 13px !important; padding: 8px 10px !important; } body.aip-shell #chat-panel #chat-input:focus, body.aip-shell #chat-panel textarea:focus { outline: 0 !important; border-color: var(--am-green) !important; box-shadow: 0 0 0 2px var(--aip-accent-soft) !important; } body.aip-shell #chat-panel #chat-send, body.aip-shell #chat-panel button[type="submit"] { background: var(--am-green) !important; color: var(--bp-dark-gray1) !important; border: 1px solid var(--am-green-dark) !important; border-radius: var(--aip-radius) !important; padding: 0 14px !important; height: 32px !important; font-size: 13px !important; font-weight: 500; cursor: pointer; } body.aip-shell #chat-panel #chat-send:hover { background: var(--am-green-dark) !important; color: var(--bp-dark-gray1) !important; } body.aip-shell #chat-panel #chat-send:disabled, body.aip-shell #chat-panel #chat-send[disabled] { background: var(--aip-bg-elevated) !important; color: var(--aip-text-disabled) !important; border-color: var(--aip-border) !important; cursor: not-allowed; } body.aip-shell #chat-panel .chat-disclaimer { background: var(--aip-bg-panel) !important; color: var(--aip-text-muted) !important; border-top: 1px solid var(--aip-border) !important; font-size: 11px !important; padding: 8px 14px !important; } /* Topbar Assist toggle (gem icon) */ .aip-assist-toggle { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: transparent; border: 1px solid var(--aip-border); border-radius: var(--aip-radius); color: var(--aip-text-muted); font: inherit; font-size: var(--aip-fs-sm); cursor: pointer; } .aip-assist-toggle:hover { background: rgba(127,127,127,0.10); color: var(--aip-text); border-color: var(--aip-border-strong); } .aip-assist-toggle .gem { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, var(--bp-blue4), var(--bp-violet5)); } body.aip-shell.chat-sidebar-open .aip-assist-toggle { background: var(--aip-accent-soft); color: var(--aip-accent); border-color: var(--aip-accent-border); } /* =================================================================== Assist pane: responsive collapse. - 1240px+ : 380px column (default above) - 1100px : narrows to 320px to keep main pane usable - 840px : assist becomes a fixed right drawer (single-column main) - 600px : assist becomes a full-screen modal overlay =================================================================== */ @media (max-width: 1100px) { body.aip-shell.chat-sidebar-open .aip-app { grid-template-columns: 240px 1fr 320px; } } /* Medium: 600-840px. Main is single column (drawer pattern); assist slides in from the right as a 360px overlay. */ @media (max-width: 840px) { body.aip-shell.chat-sidebar-open .aip-app { grid-template-columns: 1fr; } body.aip-shell #chat-panel { position: fixed !important; top: 56px !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(90vw, 380px) !important; height: auto !important; z-index: 70 !important; grid-row: auto !important; grid-column: auto !important; transform: translateX(100%); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15); } body.aip-shell.chat-sidebar-open #chat-panel { transform: translateX(0); } /* Make the chat panel header tap targets larger on touch */ body.aip-shell #chat-panel .chat-header { padding: 12px 16px !important; } body.aip-shell #chat-panel .chat-header-btn { width: 44px !important; height: 44px !important; font-size: 22px !important; } } /* Compact: <600px. Assist becomes a full-screen modal overlay (Material recommends a bottom-sheet rise, but we share the same right-drawer transform for simplicity — it goes full-width here). The in-panel chat-header is hidden — its actions move into the topbar (the assist gem toggles, plus a pencil button next to it for "new chat") so the panel only shows messages + input. */ @media (max-width: 600px) { body.aip-shell #chat-panel { top: 56px !important; width: 100% !important; max-width: 100vw !important; box-shadow: none !important; } body.aip-shell #chat-panel .chat-header { display: none !important; } /* Show the topbar new-chat button only when the chat is open. The gem already serves as the close affordance via toggleChat(). */ body.aip-shell.chat-sidebar-open .aip-newchat { display: inline-flex; } /* Disable body scroll while chat is open on phone */ body.aip-shell.chat-sidebar-open { overflow: hidden; } } /* ===== Login / unauth pages: centered, no shell ===== */ body.aip-shell.aip-unauth .aip-app { display: flex; flex-direction: column; height: auto; min-height: 100vh; width: 100%; overflow: visible; } body.aip-shell.aip-unauth .aip-sidebar { display: none; } body.aip-shell.aip-unauth .aip-topbar { position: sticky; top: 0; height: 56px; flex-shrink: 0; } body.aip-shell.aip-unauth .aip-main { flex: 1; height: auto; display: flex; align-items: flex-start; justify-content: center; padding: 56px 16px; } body.aip-shell.aip-unauth .aip-main > * { width: 100%; max-width: 440px; } /* ===== Reusable auth card (login, request account, password reset) ===== */ .aip-auth-card { background: var(--aip-bg-panel); border: 1px solid var(--aip-border); border-radius: var(--aip-radius-lg); padding: 32px 28px; margin: 0 auto; } .aip-auth-card h1 { font-size: 18px; font-weight: 600; letter-spacing: 0.4px; color: var(--aip-text); margin: 0 0 4px; text-align: center; } .aip-auth-card .aip-auth-sub { text-align: center; color: var(--aip-text-muted); font-size: 13px; margin: 0 0 24px; } /* Pure-CSS wordmark — adapts to theme, no JPG inversion artifacts */ .aip-auth-card .aip-auth-wordmark { font-family: var(--aip-font-sans); font-size: 22px; font-weight: 300; letter-spacing: 5px; text-align: center; color: var(--aip-text); margin: 0 auto 16px; padding-left: 5px; /* compensate for trailing letter-spacing */ } .aip-auth-card .form-group { margin-bottom: 14px; } .aip-auth-card label { display: block; font-size: 12px; font-weight: 500; color: var(--aip-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .aip-auth-card input, .aip-auth-card textarea, .aip-auth-card select { width: 100%; padding: 10px 12px; background: var(--aip-bg-elevated); color: var(--aip-text); border: 1px solid var(--aip-border-strong); border-radius: var(--aip-radius); font-size: 14px; font-family: inherit; } .aip-auth-card input:focus, .aip-auth-card textarea:focus, .aip-auth-card select:focus { outline: 0; border-color: var(--am-green); box-shadow: 0 0 0 2px var(--aip-accent-soft); } .aip-auth-card .aip-auth-submit { width: 100%; padding: 10px; margin-top: 6px; background: var(--am-green); color: var(--bp-dark-gray1); border: 1px solid var(--am-green-dark); border-radius: var(--aip-radius); font-size: 14px; font-weight: 600; cursor: pointer; } .aip-auth-card .aip-auth-submit:hover { background: var(--am-green-dark); } .aip-auth-card .aip-auth-link { display: block; text-align: center; margin-top: 10px; color: var(--aip-text-muted); font-size: 13px; text-decoration: none; } .aip-auth-card .aip-auth-link:hover { color: var(--aip-accent); } .aip-auth-card .aip-auth-footer { text-align: center; margin-top: 20px; color: var(--aip-text-disabled); font-size: 11px; line-height: 1.5; } .aip-auth-card .aip-auth-footer a { color: var(--aip-text-muted); text-decoration: underline; } .aip-auth-card .aip-auth-error { background: rgba(205,66,70,0.12); border: 1px solid rgba(205,66,70,0.4); color: var(--bp-red5); padding: 10px 12px; border-radius: var(--aip-radius); margin-bottom: 14px; font-size: 13px; } [data-theme="light"] .aip-auth-card .aip-auth-error, :root:not([data-theme="dark"]) .aip-auth-card .aip-auth-error { background: rgba(205,66,70,0.08); color: #b22a2e; } /* Kill the browser's yellow autofill highlight in dark theme */ [data-theme="dark"] .aip-auth-card input:-webkit-autofill, [data-theme="dark"] .aip-auth-card input:-webkit-autofill:hover, [data-theme="dark"] .aip-auth-card input:-webkit-autofill:focus { -webkit-text-fill-color: var(--aip-text); -webkit-box-shadow: 0 0 0 1000px var(--aip-bg-elevated) inset; caret-color: var(--aip-text); transition: background-color 9999s ease-in-out 0s; }