/* MultiAI — style.css. Design tokens + components mula sa docs/design/project/ (as-is), pagkatapos ang layout ng app. Dark ang default; ilagay ang data-theme="light" sa para sa Light theme (DECISIONS Q11). */ /* ===== 1. Tokens (colors_and_type.css) — walang import ng font mula sa labas; system fallback ng --font-sans / --font-mono ===== */ :root { /* ---- Base palette (dark) ---- */ --bg: #0f1115; --surface: #171a21; --surface-2: #1d2129; /* raised: hover rows, inputs on surface */ --surface-3: #242833; /* pressed / selected */ --border: #262a33; --border-strong: #343945; --text: #e7e9ee; --muted: #9aa0ab; --subtle: #6b717c; /* placeholders, disabled */ --accent: #7c5cff; --accent-hover: #8d71ff; --accent-press: #6a48f5; --accent-soft: rgba(124, 92, 255, 0.14); --accent-ring: rgba(124, 92, 255, 0.45); --on-accent: #ffffff; --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.14); --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.14); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.14); --info: #38bdf8; --info-soft: rgba(56, 189, 248, 0.14); /* ---- Semantic aliases ---- */ --fg1: var(--text); --fg2: var(--muted); --fg3: var(--subtle); --bubble-user: var(--accent); --bubble-user-fg: #ffffff; --bubble-assistant: var(--surface); --code-bg: #0b0d11; --scrim: rgba(5, 6, 9, 0.62); /* ---- Type ---- */ --font-sans: 'Inter', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-display: 32px; --lh-display: 38px; --fs-h1: 24px; --lh-h1: 30px; --fs-h2: 20px; --lh-h2: 26px; --fs-h3: 17px; --lh-h3: 24px; --fs-body: 15px; --lh-body: 22px; /* chat text, mobile default */ --fs-sm: 13px; --lh-sm: 18px; --fs-xs: 11px; --lh-xs: 14px; /* badges, meta */ --fs-code: 13px; --lh-code: 20px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Spacing (4px grid) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ---- Radius ---- */ --r-xs: 6px; /* code inline, small tags */ --r-sm: 8px; /* inputs inside cards, icon buttons */ --r-md: 12px; /* cards, bubbles, inputs */ --r-lg: 20px; /* bottom sheet top corners */ --r-pill: 999px; /* ---- Shadows (small + soft) ---- */ --shadow-1: 0 1px 2px rgba(0,0,0,.30); --shadow-2: 0 4px 12px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.24); --shadow-3: 0 12px 32px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.24); --focus-ring: 0 0 0 3px var(--accent-ring); /* ---- Motion ---- */ --ease: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* ---- Layout ---- */ --tap: 44px; /* min hit target */ --header-h: 56px; color-scheme: dark; } [data-theme="light"] { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f1f2f5; --surface-3: #e8eaef; --border: #e3e5ea; --border-strong: #d2d5dc; --text: #14161b; --muted: #5d636e; --subtle: #8b909a; --accent: #6d4cf5; --accent-hover: #5f3ee8; --accent-press: #5433d6; --accent-soft: rgba(109, 76, 245, 0.10); --accent-ring: rgba(109, 76, 245, 0.35); --success: #16a34a; --success-soft: rgba(22,163,74,.10); --warning: #d97706; --warning-soft: rgba(217,119,6,.12); --danger: #dc2626; --danger-soft: rgba(220,38,38,.10); --info: #0284c7; --info-soft: rgba(2,132,199,.10); --bubble-assistant: #ffffff; --code-bg: #f3f4f7; --scrim: rgba(15, 17, 21, 0.40); --shadow-1: 0 1px 2px rgba(16,18,24,.06); --shadow-2: 0 4px 12px rgba(16,18,24,.08), 0 1px 2px rgba(16,18,24,.05); --shadow-3: 0 12px 32px rgba(16,18,24,.14), 0 2px 6px rgba(16,18,24,.06); color-scheme: light; } /* ---- Semantic element styles ---- */ .ma-root, body.ma { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; } .ma-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; letter-spacing: -0.02em; } .ma-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -0.015em; } .ma-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: -0.01em; } .ma-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; } .ma-p { font-size: var(--fs-body); line-height: var(--lh-body); } .ma-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); } .ma-label { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ma-code, code, pre { font-family: var(--font-mono); font-size: var(--fs-code); line-height: var(--lh-code); } .ma-num { font-variant-numeric: tabular-nums; } /* ===== 2. Components (components.css) ===== */ /* Buttons */ .ma-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:var(--r-md); border:1px solid transparent; font:600 15px/1 var(--font-sans); cursor:pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; white-space:nowrap; } .ma-btn:active { transform: scale(.98); } .ma-btn:focus-visible { outline:none; box-shadow: var(--focus-ring); } .ma-btn svg { width:18px; height:18px; } .ma-btn--primary { background:var(--accent); color:var(--on-accent); } .ma-btn--primary:hover { background:var(--accent-hover); } .ma-btn--primary:active { background:var(--accent-press); } .ma-btn--ghost { background:transparent; color:var(--text); border-color:var(--border-strong); } .ma-btn--ghost:hover { background:var(--surface-2); } .ma-btn--danger { background:var(--danger-soft); color:var(--danger); border-color:transparent; } .ma-btn--danger:hover { background:var(--danger); color:#fff; } .ma-btn--sm { height:34px; padding:0 12px; font-size:13px; border-radius:var(--r-sm); } .ma-btn--block { width:100%; } .ma-btn[disabled] { opacity:.45; pointer-events:none; } .ma-iconbtn { width:40px; height:40px; display:inline-grid; place-items:center; border-radius:var(--r-sm); background:transparent; border:0; color:var(--muted); cursor:pointer; transition: background var(--dur-fast), color var(--dur-fast); } .ma-iconbtn:hover { background:var(--surface-2); color:var(--text); } .ma-iconbtn:active { background:var(--surface-3); } .ma-iconbtn svg { width:20px; height:20px; } .ma-iconbtn--filled { background:var(--accent); color:#fff; border-radius:var(--r-pill); } .ma-iconbtn--filled:hover { background:var(--accent-hover); color:#fff; } .ma-iconbtn--outline { border:1px solid var(--border); } /* Inputs */ .ma-field { display:flex; flex-direction:column; gap:6px; } .ma-field > label { font-size:13px; font-weight:500; color:var(--muted); } .ma-input, .ma-textarea { width:100%; box-sizing:border-box; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-md); font:400 15px/22px var(--font-sans); padding:10px 14px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .ma-input { height:44px; } .ma-input::placeholder, .ma-textarea::placeholder { color:var(--subtle); } .ma-input:focus, .ma-textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); } .ma-input--error { border-color:var(--danger); } .ma-hint { font-size:12px; color:var(--subtle); } .ma-hint--error { color:var(--danger); } .ma-textarea { resize:none; min-height:44px; max-height:160px; overflow-y:auto; field-sizing:content; } /* Chips (toggle pills) */ .ma-chip { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); color:var(--muted); font:500 13px/1 var(--font-sans); cursor:pointer; transition: all var(--dur-fast) var(--ease); white-space:nowrap; } .ma-chip:hover { color:var(--text); border-color:var(--border-strong); } .ma-chip[aria-pressed="true"], .ma-chip.is-on { background:var(--accent-soft); border-color:var(--accent); color:var(--text); } .ma-chip svg { width:14px; height:14px; } /* Badges */ .ma-badge { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px; border-radius:var(--r-pill); font:700 10.5px/1 var(--font-sans); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; } .ma-badge svg { width:11px; height:11px; } .ma-badge--free { background:var(--success-soft); color:var(--success); } .ma-badge--vision { background:var(--info-soft); color:var(--info); } .ma-badge--upgrade { background:var(--accent); color:#fff; } .ma-badge--budget { background:var(--warning-soft); color:var(--warning); } .ma-badge--neutral { background:var(--surface-3); color:var(--muted); } /* Cards */ .ma-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); } .ma-stat { padding:16px; display:flex; flex-direction:column; gap:6px; } .ma-stat__label { font-size:12px; color:var(--muted); font-weight:500; } .ma-stat__value { font-size:24px; line-height:28px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .ma-stat__delta { font-size:12px; font-weight:600; } .ma-stat__delta--up { color:var(--success); } .ma-stat__delta--down { color:var(--danger); } /* Progress */ .ma-progress { height:6px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; } .ma-progress > i { display:block; height:100%; border-radius:inherit; background:var(--accent); transition: width var(--dur-slow) var(--ease); } .ma-progress--warn > i { background:var(--warning); } .ma-progress--full > i { background:var(--danger); } /* Banner */ .ma-banner { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-md); font-size:13px; line-height:18px; border:1px solid transparent; } .ma-banner svg { width:18px; height:18px; flex:none; margin-top:0; } .ma-banner--warning { background:var(--warning-soft); color:var(--text); border-color:rgba(245,158,11,.28); } .ma-banner--warning svg { color:var(--warning); } .ma-banner--danger { background:var(--danger-soft); border-color:rgba(239,68,68,.28); } .ma-banner--danger svg { color:var(--danger); } .ma-banner--info { background:var(--accent-soft); border-color:rgba(124,92,255,.3); } .ma-banner--info svg { color:var(--accent); } .ma-banner b { font-weight:600; } .ma-banner a { color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; } /* Toast */ .ma-toast { display:inline-flex; align-items:center; gap:10px; padding:10px 14px 10px 12px; border-radius:var(--r-md); background:var(--surface-3); color:var(--text); border:1px solid var(--border-strong); box-shadow:var(--shadow-3); font:500 14px/20px var(--font-sans); } .ma-toast svg { width:18px; height:18px; flex:none; } .ma-toast--success svg { color:var(--success); } .ma-toast--error svg { color:var(--danger); } .ma-toast--warning svg { color:var(--warning); } .ma-toast button { background:none; border:0; color:var(--accent); font:600 14px var(--font-sans); cursor:pointer; margin-left:6px; } /* Table */ .ma-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; } .ma-table th { text-align:left; font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--border); } .ma-table td { padding:12px; border-bottom:1px solid var(--border); color:var(--text); } .ma-table tr:last-child td { border-bottom:0; } .ma-table td.num, .ma-table th.num { text-align:right; font-variant-numeric:tabular-nums; } .ma-table tbody tr:hover td { background:var(--surface-2); } /* Model avatar (monogram — replace with official logos when licensed) */ .ma-avatar { width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; font:700 12px/1 var(--font-sans); color:#fff; background:var(--surface-3); } .ma-avatar--lg { width:36px; height:36px; font-size:14px; border-radius:10px; } /* Message bubbles */ .ma-msg { display:flex; flex-direction:column; gap:6px; max-width:100%; } .ma-msg--user { align-items:flex-end; } .ma-bubble { padding:10px 14px; border-radius:var(--r-md); font-size:15px; line-height:22px; max-width:85%; overflow-wrap:anywhere; } .ma-msg--user .ma-bubble { background:var(--bubble-user); color:var(--bubble-user-fg); border-bottom-right-radius:4px; } .ma-msg--assistant .ma-bubble { background:var(--bubble-assistant); border:1px solid var(--border); border-bottom-left-radius:4px; max-width:100%; } .ma-msg__model { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); font-weight:500; } .ma-msg__model b { color:var(--text); font-weight:600; } .ma-msg__actions { display:flex; gap:2px; margin-left:-8px; } .ma-msg__actions .ma-iconbtn { width:32px; height:32px; } .ma-msg__actions .ma-iconbtn svg { width:16px; height:16px; } .ma-bubble p { margin:0 0 8px; } .ma-bubble p:last-child { margin:0; } .ma-bubble code { background:var(--surface-3); padding:1px 5px; border-radius:var(--r-xs); font-size:13px; } .ma-bubble pre { background:var(--code-bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; overflow-x:auto; margin:8px 0; } .ma-bubble pre code { background:none; padding:0; } /* Sheet + drawer */ .ma-scrim { position:fixed; inset:0; z-index:40; background:var(--scrim); animation: ma-fade var(--dur) var(--ease); } .ma-sheet { position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--border); border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--shadow-3); padding:8px 16px 24px; max-height:85%; overflow:auto; animation: ma-up var(--dur-slow) var(--ease); } .ma-sheet__grab { width:36px; height:4px; border-radius:var(--r-pill); background:var(--border-strong); margin:4px auto 12px; } .ma-drawer { position:fixed; top:0; bottom:0; left:0; width:84%; max-width:320px; background:var(--surface); border-right:1px solid var(--border); box-shadow:var(--shadow-3); display:flex; flex-direction:column; animation: ma-right var(--dur-slow) var(--ease); } @keyframes ma-fade { from { opacity:0 } } @keyframes ma-up { from { transform: translateY(100%) } } @keyframes ma-right { from { transform: translateX(-100%) } } @keyframes ma-toast-in { from { transform: translateY(12px); opacity:0 } } /* ===== 3. Extra components (proto/proto.css) ===== */ .scroll { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .scroll::-webkit-scrollbar { width: 6px; height: 0; } .scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; } .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ma-link { color: var(--accent); text-decoration: none; font-weight: 500; } .ma-link:hover { text-decoration: underline; } .ma-rowbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--text); font: 400 14px var(--font-sans); text-align: left; cursor: pointer; transition: background var(--dur-fast); } .ma-rowbtn:hover { background: var(--surface-2); } .ma-modelbtn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; min-width: 0; border-radius: 10px; border: 0; background: none; color: var(--text); font: 600 16px var(--font-sans); letter-spacing: -.01em; cursor: pointer; } .ma-modelbtn:hover { background: var(--surface-2); } .ma-menuitem { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: 500 14px var(--font-sans); cursor: pointer; text-align: left; } .ma-menuitem:hover { background: var(--surface-2); } .ma-planbox { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; padding: 10px 14px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); cursor: pointer; text-align: left; font-family: var(--font-sans); transition: border-color var(--dur-fast); } .ma-planbox:hover { border-color: var(--border-strong); } /* Streaming cursor */ .ma-cursor { display: inline-block; width: 8px; height: 17px; margin-left: 2px; vertical-align: -3px; background: var(--accent); border-radius: 2px; animation: ma-blink 1s steps(1) infinite; } @keyframes ma-blink { 50% { opacity: 0; } } .ma-thinking { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; height: 22px; } .ma-thinking i { width: 6px; height: 6px; border-radius: 9px; background: var(--muted); animation: ma-dot 1s infinite ease-in-out; } .ma-thinking i:nth-child(2) { animation-delay: .15s; } .ma-thinking i:nth-child(3) { animation-delay: .3s; } @keyframes ma-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .ma-codeblock { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin: 8px 0; background: var(--code-bg); } .ma-codeblock__bar { display: flex; justify-content: space-between; padding: 6px 12px; font: 500 11px var(--font-mono); color: var(--muted); border-bottom: 1px solid var(--border); } .ma-codeblock pre { margin: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 10px 12px !important; } .ma-msg--assistant .ma-bubble p { margin: 0 0 10px; } .ma-msg--assistant .ma-bubble p:last-child { margin: 0; } .ma-inline-error { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--danger-soft); border: 1px solid rgba(239,68,68,.28); font-size: 13px; line-height: 18px; color: var(--text); } .ma-inline-error > svg { color: var(--danger); margin-top: 1px; } .ma-inline-error b { font-weight: 600; } .ma-inline-error div div { color: var(--muted); } .ma-inline-error button { background: none; border: 0; color: var(--accent); font: 600 13px var(--font-sans); cursor: pointer; white-space: nowrap; } /* Attachments */ .ma-attach { position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 6px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); } .ma-attach__thumb { width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; flex: none; } .ma-attach__x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 99px; border: 2px solid var(--surface); background: var(--text); color: var(--bg); display: grid; place-items: center; cursor: pointer; padding: 0; } .ma-msg--user .ma-attach { background: var(--surface); } /* Striped image placeholder (generated / uploaded images) */ .ma-ph { --h: 260; background: repeating-linear-gradient(135deg, hsl(var(--h) 22% 26%) 0 10px, hsl(var(--h) 20% 21%) 10px 20px); display: block; } [data-theme="light"] .ma-ph { background: repeating-linear-gradient(135deg, hsl(var(--h) 35% 88%) 0 10px, hsl(var(--h) 30% 83%) 10px 20px); } /* Compare */ .ma-compare-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .ma-compare-body { padding: 12px; font-size: 14px; line-height: 21px; flex: 1; max-height: 360px; overflow-y: auto; } .ma-compare-body p { margin: 0 0 8px; } .ma-compare-body p:last-child { margin: 0; } .ma-compare-body code { background: var(--surface-3); padding: 1px 5px; border-radius: 6px; font-size: 12px; } /* Image result tiles */ .ma-imgtile { position: relative; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); } .ma-imgtile__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: 500 12px var(--font-mono); color: var(--muted); background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%) var(--surface-2); background-size: 200% 100%; animation: ma-shimmer 1.4s linear infinite; } @keyframes ma-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } } .ma-imgtile__label { position: absolute; left: 8px; bottom: 8px; font: 500 10px var(--font-mono); color: rgba(255,255,255,.75); background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 4px; } [data-theme="light"] .ma-imgtile__label { color: #14161b; background: rgba(255,255,255,.7); } .ma-imgtile__dl { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(15,17,21,.7); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast); } .ma-imgtile:hover .ma-imgtile__dl, .is-touch .ma-imgtile__dl { opacity: 1; } .ma-suggest { text-align: left; padding: 12px 14px; color: var(--text); font: 500 13px/18px var(--font-sans); cursor: pointer; min-height: 60px; transition: border-color var(--dur-fast), background var(--dur-fast); } .ma-suggest:hover { border-color: var(--border-strong); background: var(--surface-2); } /* D5b: Images UI */ .ma-imgwrap { margin-left: 28px; max-width: min(520px, calc(100% - 28px)); } .ma-imgwrap--portrait { max-width: min(320px, calc(100% - 28px)); } .ma-imgwrap .ma-imgtile { width: 100%; } .ma-imgtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ma-imgtile__loading { text-align: center; padding: 0 12px; } .ma-imgtile__hint { font: 500 11px/15px var(--font-sans); color: var(--subtle); } a.ma-imgtile__dl, a.ma-iconbtn { text-decoration: none; } .ma-imgactions { align-items: center; margin-top: 4px; } .ma-imgactions .ma-sm { margin-left: 6px; } .ma-msg--assistant .ma-imgwrap .ma-inline-error { margin: 0; } .ma-msg--user .ma-bubble > .ic { margin-right: 6px; vertical-align: -2px; opacity: .8; } .ma-imgbar .ma-chip { height: 30px; flex: none; } .ma-imgbar__ratios { display: flex; align-items: center; gap: 6px; } .ma-imgbar__sep { width: 1px; height: 18px; background: var(--border); flex: none; } .ma-imgbar__note { font-size: 11px; color: var(--subtle); margin-left: 4px; white-space: nowrap; } .imgpick__group { margin-bottom: 14px; } .imgpick__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 10px 2px; } .imgpick__used { font-size: 12px; color: var(--muted); white-space: nowrap; } .imgpick__used.is-out { color: var(--danger); } .imgpick__note { padding: 0 10px 6px; } .ma-pickrow.is-on { background: var(--accent-soft); } .sheet-sub { margin: 0 0 10px; } /* Composer */ .ma-composer { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 8px 8px 6px 14px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .ma-composer:focus-within { border-color: var(--border-strong); } .ma-composer.is-image { border-color: rgba(124,92,255,.45); box-shadow: 0 0 0 3px var(--accent-soft); } .ma-imgbar { display: flex; align-items: center; gap: 6px; overflow-x: auto; margin: 0 -2px 0 -6px; padding-bottom: 2px; scrollbar-width: none; } .ma-imgbar::-webkit-scrollbar { display: none; } .ma-aspect { display: inline-block; height: 10px; max-width: 16px; border: 1.5px solid currentColor; border-radius: 2px; } .ma-refadd { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 8px; border: 1px dashed var(--border-strong); background: none; color: var(--muted); font: 500 12px var(--font-sans); cursor: pointer; } .ma-refadd:hover { color: var(--text); border-color: var(--muted); } .ma-stop { width: 36px !important; height: 36px !important; background: var(--text) !important; color: var(--bg) !important; } .ma-wave { display: flex; align-items: center; gap: 2px; height: 20px; flex: 1; } .ma-wave i { width: 3px; border-radius: 3px; background: var(--accent); height: 30%; animation: ma-wave .7s ease-in-out infinite alternate; } @keyframes ma-wave { to { height: 100%; } } @keyframes ma-pulse { 50% { opacity: .35; } } /* Pick rows (sheets) */ .ma-pickrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-family: var(--font-sans); transition: background var(--dur-fast); box-sizing: border-box; } .ma-pickrow:hover { background: var(--surface-2); } .ma-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; color: #fff; transition: all var(--dur-fast); } .ma-check.on { background: var(--accent); border-color: var(--accent); } .ma-radio { width: 18px; height: 18px; border-radius: 99px; border: 2px solid var(--border-strong); flex: none; box-sizing: border-box; position: relative; } .ma-radio.on { border-color: var(--accent); } .ma-radio.on::after { content: ''; position: absolute; inset: 3px; border-radius: 9px; background: var(--accent); } .ma-plancard { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-family: var(--font-sans); transition: border-color var(--dur-fast), background var(--dur-fast); } .ma-plancard:hover { border-color: var(--border-strong); } /* Admin */ .ma-tab { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border: 0; background: none; color: var(--muted); font: 500 14px var(--font-sans); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; } .ma-tab:hover { color: var(--text); } .ma-tab.on { color: var(--text); border-bottom-color: var(--accent); } .ma-count { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 99px; background: var(--danger); color: #fff; font: 700 11px/18px var(--font-sans); text-align: center; } .ma-dlcard { display: flex; align-items: center; gap: 12px; padding: 14px; color: var(--text); cursor: pointer; font-family: var(--font-sans); transition: border-color var(--dur-fast); } .ma-dlcard:hover { border-color: var(--border-strong); } .ma-table td, .ma-table th { white-space: nowrap; } .ma-shake { animation: ma-shake .35s; } @keyframes ma-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @keyframes ma-pop { from { transform: scale(.96); opacity: 0; } } @keyframes ma-left { from { transform: translateX(100%); } } @keyframes ma-spin { to { transform: rotate(360deg); } } .ma-imgbar, .ma-imgbar + div { scrollbar-width: none; } .ma-msg__model { flex-wrap: nowrap; min-width: 0; } .ma-msg__model b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ma-msg__model span { white-space: nowrap; } /* ===== 4. Layout ng app (bago; token lang ang gamit) ===== */ [hidden] { display: none !important; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { overflow: hidden; overscroll-behavior: none; } button, input, textarea { font-family: inherit; } .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ic--sm { width: 16px; height: 16px; } .ic--xs { width: 13px; height: 13px; } .ic--fill { fill: currentColor; } .ma-sheet { z-index: 41; } .ma-popover { position: fixed; z-index: 60; min-width: 180px; padding: 6px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-3); animation: ma-pop 160ms var(--ease); } .ma-menuitem { color: var(--text); } .ma-menuitem--danger { color: var(--danger); } /* Segmented (TL | EN, Mag-login | Gumawa ng account) */ .ma-seg { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; } .ma-seg button { flex: 1; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 600 13px var(--font-sans); cursor: pointer; white-space: nowrap; } .ma-seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-1); } .ma-seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ma-seg--lang button { min-width: 44px; padding: 0 10px; } .ma-logo { display: inline-flex; align-items: center; gap: 9px; } .ma-logo__mark { width: 27px; height: 27px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: #fff; font: 700 14px var(--font-sans); letter-spacing: -.04em; } .ma-logo b { font-size: 17px; letter-spacing: -.03em; } .ma-logo b span { color: var(--accent); } .ma-spinner { width: 18px; height: 18px; border-radius: 99px; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: ma-spin .8s linear infinite; flex: none; opacity: .9; } .boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--muted); z-index: 100; } .boot .ma-spinner { width: 28px; height: 28px; } /* ---- Login / Register ---- */ .auth { height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); } .auth__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .auth__pitch { display: flex; flex-direction: column; gap: 10px; } .auth__pitch h1 { margin: 0; text-wrap: balance; font-size: 28px; line-height: 34px; } .auth__pitch h1 span { display: block; } .auth__pitch p { margin: 0; color: var(--muted); font-size: 15px; line-height: 22px; max-width: 380px; } .auth__form { display: flex; flex-direction: column; gap: 14px; width: 100%; } .auth__pw { position: relative; } .auth__pw .ma-input { padding-right: 46px; } .auth__pw button { position: absolute; right: 4px; top: 2px; width: 40px; height: 40px; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; } .auth__pw button:hover { color: var(--text); } .auth__submit { margin-top: 4px; } .auth__models { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; } @media (min-width: 900px) { .auth { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; gap: 0; padding: 0; overflow: hidden; } .auth__side { border-right: 1px solid var(--border); background: var(--surface); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; } .auth__pitch h1 { font-size: 40px; line-height: 46px; } .auth__panel { display: grid; place-items: center; padding: 40px; overflow-y: auto; } .auth__panel-inner { width: 380px; display: flex; flex-direction: column; gap: 20px; } .auth__top--panel { justify-content: flex-end; } } @media (max-width: 899.98px) { .auth__side, .auth__panel, .auth__panel-inner { display: contents; } .auth__top--panel { order: -1; } .auth__logo { display: none; } .auth__models { display: none; } } /* ---- App shell ---- */ .app { height: 100dvh; display: flex; background: var(--bg); } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 41; width: 84%; max-width: 320px; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); box-shadow: var(--shadow-3); transform: translateX(-100%); visibility: hidden; transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow); padding-top: env(safe-area-inset-top); } .sidebar.is-open { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease); } .sidebar__head { display: flex; align-items: center; gap: 6px; padding: 12px 8px 10px 16px; } .sidebar__head .grow { flex: 1; } .sidebar__search { padding: 0 12px 6px; position: relative; } .sidebar__search .ma-input { height: 38px; padding-left: 36px; } .sidebar__search .ic { position: absolute; left: 24px; top: 10px; color: var(--subtle); width: 18px; height: 18px; pointer-events: none; } .sidebar__list { flex: 1; overflow-y: auto; padding: 0 8px 8px; min-height: 0; } .sidebar__group { padding: 14px 10px 4px; } .sidebar__foot { border-top: 1px solid var(--border); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); } .sidebar__user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 0; } .sidebar__user .ma-avatar { width: 26px; height: 26px; border-radius: 99px; font-size: 10px; background: var(--surface-3); color: var(--text); } #user-name { color: var(--muted); font-size: 13px; } .sidebar__badges { display: inline-flex; gap: 4px; flex: none; margin-left: auto; } .sidebar__empty { padding: 32px 20px; text-align: center; color: var(--muted); font-size: 13px; line-height: 18px; } .sidebar__empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; } @media (min-width: 900px) { .sidebar { position: static; z-index: auto; width: 272px; max-width: none; flex: none; transform: none; visibility: visible; box-shadow: none; padding-top: 0; } #btn-menu, #btn-sidebar-close, #scrim { display: none !important; } .sidebar__head { padding: 14px 10px 10px 16px; } } .chatrow { position: relative; display: flex; align-items: center; border-radius: 10px; } .chatrow:hover, .chatrow.is-menu { background: var(--surface-2); } .chatrow.is-active { background: var(--surface-3); } .chatrow__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border: 0; background: none; color: var(--text); font: 400 14px var(--font-sans); text-align: left; cursor: pointer; border-radius: 10px; } .chatrow__main .ic { color: var(--subtle); width: 15px; height: 15px; } .chatrow__more { width: 32px; height: 32px; margin-right: 4px; opacity: 0; } .chatrow:hover .chatrow__more, .chatrow__more:focus-visible, .chatrow.is-menu .chatrow__more, .chatrow.is-active .chatrow__more { opacity: 1; } @media (hover: none) { .chatrow__more { opacity: 1; } } .chatrow__edit { flex: 1; margin: 3px 4px; height: 34px; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100dvh; } .topbar { height: var(--header-h); flex: none; display: flex; align-items: center; gap: 4px; padding: env(safe-area-inset-top) 6px 0 6px; box-sizing: content-box; border-bottom: 1px solid var(--border); background: var(--bg); } .topbar .ma-modelbtn { flex: 1; justify-content: center; max-width: 100%; } @media (min-width: 900px) { .topbar { padding: 0 12px 0 16px; } .topbar .ma-modelbtn { flex: none; justify-content: flex-start; } .topbar__spacer { flex: 1; } } .ma-modelbtn .ma-avatar { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; } .ma-modelbtn .ic { color: var(--muted); width: 16px; height: 16px; } .thread { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } .thread__inner { max-width: 760px; margin: 0 auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 22px; min-height: 100%; } @media (min-width: 900px) { .thread__inner { padding: 28px 32px 16px; } } .thread__inner.is-empty { justify-content: center; align-items: center; text-align: center; gap: 20px; } .empty { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 560px; width: 100%; } .empty__mark { width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 26px var(--font-sans); letter-spacing: -.04em; margin-bottom: 8px; } .empty h2 { margin: 0; text-wrap: balance; } .empty p { margin: 0; color: var(--muted); font-size: 14px; } .empty__grid { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; margin-top: 16px; } @media (min-width: 600px) { .empty__grid { grid-template-columns: 1fr 1fr; } } .ma-msg { max-width: 100%; } .ma-msg--user .ma-bubble { white-space: pre-wrap; } .ma-msg--assistant .ma-bubble.ma-bubble--plain { background: transparent; border: 0; padding: 0 0 0 28px; max-width: 100%; } .ma-msg--assistant .ma-inline-error { margin-left: 28px; } .ma-msg--assistant .ma-msg__actions { margin-left: 20px; } .ma-msg__model .ma-avatar { width: 20px; height: 20px; border-radius: 6px; font-size: 8px; } .ma-msg__note { font-weight: 400; } /* Markdown sa loob ng bubble (walang innerHTML — DOM nodes lang mula sa public/md.js) */ .ma-md > :first-child { margin-top: 0; } .ma-md > :last-child { margin-bottom: 0; } .ma-md h3, .ma-md h4, .ma-md h5, .ma-md h6 { margin: 16px 0 6px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; } .ma-md h3 { font-size: 18px; } .ma-md h4 { font-size: 16px; } .ma-md h5, .ma-md h6 { font-size: 15px; } .ma-md ul, .ma-md ol { margin: 0 0 10px; padding-left: 22px; } .ma-md li { margin: 2px 0; } .ma-md li > p { margin: 0 0 4px; } .ma-md blockquote { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid var(--border-strong); color: var(--muted); } .ma-md hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; } .ma-md a { color: var(--accent); text-underline-offset: 2px; } .ma-md del { color: var(--muted); } .ma-md .ma-tablewrap { overflow-x: auto; margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); } .ma-md table { border-collapse: collapse; width: 100%; font-size: 13px; } .ma-md th, .ma-md td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .ma-md th { font-weight: 600; background: var(--surface-2); white-space: nowrap; } .ma-md tr:last-child td { border-bottom: 0; } .ma-codeblock__copy { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; } .ma-codeblock__copy:hover { color: var(--text); } .ma-codeblock pre code { white-space: pre; } .ma-bubble .ma-codeblock code { background: none; padding: 0; } .composer-wrap { flex: none; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); } .composer-wrap > * { max-width: 760px; margin-left: auto; margin-right: auto; } .composer-error { margin-bottom: 8px; } .composer-error .ma-inline-error { align-items: center; } .composer-error .ma-inline-error > div { flex: 1; } .ma-composer { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 8px 6px 14px; } .ma-composer .ma-textarea { flex: 1; min-height: 40px; max-height: 160px; padding: 9px 0; border: 0; background: none; border-radius: 0; box-shadow: none; } .ma-composer .ma-textarea:focus { box-shadow: none; } .ma-composer .ma-iconbtn--filled, .ma-composer .ma-stop { flex: none; width: 36px; height: 36px; } .ma-iconbtn--filled[disabled] { opacity: .4; cursor: default; pointer-events: none; } .composer-note { margin: 6px auto 0; text-align: center; font-size: 11px; color: var(--subtle); } .scroll { overscroll-behavior: contain; } /* Sheets (model picker, kumpirmasyon) */ .sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .sheet-head h2 { margin: 0; flex: 1; } .sheet-search { position: relative; margin-bottom: 8px; } .sheet-search .ma-input { padding-left: 38px; } .sheet-search .ic { position: absolute; left: 12px; top: 12px; color: var(--subtle); width: 18px; height: 18px; pointer-events: none; } .sheet-list { max-height: min(56vh, 480px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; } .sheet-note { padding: 14px 10px; text-align: center; color: var(--muted); font-size: 13px; line-height: 18px; } .sheet-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; } .ma-pickrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ma-pickrow__name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; min-width: 0; } .ma-pickrow__sub { font-size: 12px; color: var(--muted); } .ma-pickrow .ma-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; } .sheet-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } .sheet-actions .ma-btn { flex: 1; } @media (min-width: 900px) { .ma-sheet { inset: 0; margin: auto; height: fit-content; width: min(480px, 92vw); border-radius: var(--r-lg); border: 1px solid var(--border); padding: 16px 20px 20px; animation: ma-pop var(--dur) var(--ease); } .ma-sheet__grab { display: none; } } @media (max-width: 899.98px) { .ma-sheet { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } } .toasts { position: fixed; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; } .toasts .ma-toast { pointer-events: auto; animation: ma-toast-in 240ms var(--ease); max-width: 100%; } @media (min-width: 900px) { .auth__logo-mobile { display: none; } } /* ===== 5. D3b: composer (attach, web, voice), persona, compare, sheets ===== */ .grow { flex: 1; min-width: 0; } .composer__row { display: flex; align-items: center; gap: 2px; margin-left: -8px; } .composer__row .ma-iconbtn:not(.ma-iconbtn--filled) { width: 38px; height: 38px; } .composer__status { margin-left: 6px; font-size: 12px; color: var(--accent); min-width: 0; } .ma-toggle { position: relative; } .ma-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); } .ma-toggle.is-locked { opacity: .55; } .web-lock { position: absolute; right: 5px; bottom: 6px; width: 10px; height: 10px; color: var(--muted); pointer-events: none; } .ma-composer.is-recording .composer__row { display: none; } .ma-composer.is-drag { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); } .drop-hint { display: none; align-items: center; gap: 8px; padding: 6px 0; color: var(--accent); font: 600 13px var(--font-sans); } .ma-composer.is-drag .drop-hint { display: flex; } .voice-bar { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 2px 0 0; } .voice-bar__dot { width: 10px; height: 10px; border-radius: 99px; background: var(--danger); animation: ma-pulse 1.2s infinite; flex: none; } .voice-bar__time { font-size: 14px; } .voice-bar__label { font-size: 12px; color: var(--muted); white-space: nowrap; } .voice-bar .ma-wave { flex: 1; min-width: 0; } .ma-wave i:nth-child(3n) { animation-delay: .2s; } .ma-wave i:nth-child(3n+1) { animation-delay: .4s; } .ma-wave i:nth-child(4n) { animation-delay: .1s; } .ma-attach-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 8px 8px 0; } .ma-attach-row--static { justify-content: flex-end; padding: 0 0 2px; } .ma-attach__thumb--img { object-fit: cover; } .ma-attach__icon { background: var(--surface-3); color: var(--muted); } .ma-attach__meta { display: flex; flex-direction: column; min-width: 0; max-width: 130px; gap: 1px; } .ma-attach__name { font-size: 13px; font-weight: 500; line-height: 16px; } .ma-attach__sub { font-size: 11px; line-height: 14px; color: var(--muted); white-space: nowrap; } .ma-attach__x .ic { width: 11px; height: 11px; stroke-width: 2.5; } /* Persona chip sa topbar */ .topbar__persona { flex: none; max-width: 130px; height: 30px; padding: 0 10px; gap: 5px; } .topbar__persona .persona-label { min-width: 0; } @media (max-width: 599.98px) { .topbar__persona { max-width: 104px; } .topbar__persona:not(.is-on) { padding: 0 8px; } .topbar__persona:not(.is-on) .persona-label { display: none; } } .persona-tile { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-3); color: var(--muted); display: grid; place-items: center; flex: none; } .ma-pickrow.is-on { background: var(--accent-soft); } .ma-pickrow.is-on .persona-tile { background: var(--accent); color: #fff; } .ma-pickrow > .ic:last-child { color: var(--accent); } .ma-check .ic { width: 13px; height: 13px; stroke-width: 3; } /* Sheets: footer ng model picker, subtitle */ .sheet-sub { margin: -2px 0 10px; } .sheet-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .sheet-foot__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .sheet-foot .ma-btn { flex: none; min-width: 112px; } /* Compare: magkakatabi sa desktop, naka-tab sa mobile */ @media (min-width: 900px) { .thread__inner.has-compare { max-width: 1080px; } } .cmp__grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(200px, 1fr)); gap: 12px; overflow-x: auto; } .cmp__tabs { display: none; } .cmp__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .cmp__head b { flex: 1; min-width: 0; font-size: 13px; } .cmp__head .ma-avatar { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; } .cmp__status { display: inline-flex; align-items: center; flex: none; font-size: 12px; color: var(--muted); } .cmp__spin { width: 14px; height: 14px; border-width: 2px; } .cmp__foot { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-top: 1px solid var(--border); } .cmp__foot .ma-iconbtn { width: 32px; height: 32px; } .cmp__foot .ma-iconbtn .ic { width: 16px; height: 16px; } .cmp__card .ma-inline-error { margin-top: 8px; } @media (max-width: 899.98px) { .cmp__grid { display: block; overflow: visible; } .cmp__card { display: none; } .cmp__card.is-active { display: flex; } .cmp__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .cmp__tabs::-webkit-scrollbar { display: none; } .cmp__tab { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 190px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: 500 13px var(--font-sans); cursor: pointer; } .cmp__tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); } .cmp__tab .cmp__tab-av { width: 18px; height: 18px; border-radius: 5px; font-size: 8px; } } /* Plans sheet (Q1): 2x2 sa desktop, 1 column sa mobile */ .plans__grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .plans__foot { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .plans__note { margin: 0; text-align: center; } .ma-plancard { width: 100%; text-align: left; } .ma-plancard.is-on { border-color: var(--accent); background: var(--accent-soft); } .ma-plancard.is-highlight { border-color: var(--accent); } .plancard__head { display: flex; align-items: center; gap: 8px; width: 100%; } .plancard__price { text-align: right; } .plancard__price b { font-size: 20px; letter-spacing: -.02em; } .plancard__price span { font-size: 12px; color: var(--muted); } .plancard__tag { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--accent); } .plancard__limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin: 12px 0 10px; } .plancard__cell { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; } .plancard__cell b { display: block; font-size: 15px; font-weight: 700; } .plancard__cell span { font-size: 11px; color: var(--muted); } .plancard__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; width: 100%; } .plancard__perks li { display: flex; gap: 8px; font-size: 13px; color: var(--muted); } .plancard__perks li .ic { color: var(--success); margin-top: 1px; } .plancard__perks li.is-off .ic { color: var(--subtle); } @media (min-width: 900px) { .ma-sheet--wide { width: min(760px, 94vw); } .plans__grid { grid-template-columns: 1fr 1fr; } } /* Account sheet */ .acct__head { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; } .acct__avatar { width: 48px; height: 48px; border-radius: 99px; background: var(--surface-3); color: var(--text); font-size: 17px; } .acct__who { flex: 1; min-width: 0; } .acct__name { display: flex; align-items: center; gap: 6px; font-size: 16px; min-width: 0; } .acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--border); } .acct-row__label { flex: 1; min-width: 0; font-size: 15px; } .acct-row .ma-seg { flex: none; } .acct__select { width: 170px; height: 38px; padding: 0 8px; font-size: 13px; flex: none; } .acct__link { border-top: 1px solid var(--border); border-radius: 0; min-height: 52px; } .acct__link .ic:first-child { color: var(--muted); } .acct__logout { margin-top: 14px; } /* D4: usage box sa Account sheet (ma-progress mula sa design) */ .acct-usage { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 14px; border-top: 1px solid var(--border); } .acct-usage__title { font-size: 15px; font-weight: 600; } .acct-usage__item { display: flex; flex-direction: column; gap: 6px; } .acct-usage__line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .acct-usage > .ma-spinner { align-self: center; } .ma-pickrow.is-locked .ma-pickrow__sub, .ma-pickrow.is-locked .ma-avatar { opacity: .6; } /* ===== D6: Preview panel + ZIP (Q12: walang design — umiiral na tokens at .ma-tab / .ma-iconbtn / .ma-card lang) ===== */ .ma-msg__actions { align-items: center; } .pv-open { height: 30px; padding: 0 10px; gap: 6px; } .pv-open .ic { width: 15px; height: 15px; } .pv { position: fixed; inset: 0; z-index: 42; display: flex; flex-direction: column; background: var(--surface); animation: ma-up var(--dur-slow) var(--ease); } .pv__bar { height: var(--header-h); flex: none; display: flex; align-items: center; gap: 2px; padding: env(safe-area-inset-top) 6px 0 8px; box-sizing: content-box; border-bottom: 1px solid var(--border); background: var(--bg); } .pv__bar .grow { flex: 1; } .pv__tabs { display: flex; align-self: stretch; align-items: flex-end; } .pv__tabs .ma-tab { height: 100%; } .pv__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .pv__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--surface-2); } .pv__frame { position: absolute; top: 0; left: 0; border: 0; display: block; transform-origin: 0 0; color-scheme: light; background: Canvas; } .pv.is-mobile .pv__frame { position: relative; margin: 0 auto; } .pv__code { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); } .pv__code .ma-codeblock pre { overflow-x: auto; } .pv [hidden] { display: none !important; } @media (min-width: 900px) { .pv { position: static; z-index: auto; flex: 0 0 min(48%, 760px); min-width: 0; height: 100dvh; border-left: 1px solid var(--border); animation: none; } .pv__bar { padding: 0 8px 0 12px; } .pv.is-mobile .pv__stage { padding: 16px 0; } .pv.is-mobile .pv__frame { border-radius: var(--r-md); box-shadow: var(--shadow-2); } .pv.is-full { position: fixed; inset: 0; z-index: 42; } } /* ===== D7b: Admin UI (umiiral na tokens at components lang; walang bagong kulay) ===== */ .ma-badge--ok { background: var(--success-soft); color: var(--success); } .ma-badge--warn { background: var(--warning-soft); color: var(--warning); } .ma-badge--danger { background: var(--danger-soft); color: var(--danger); } .adm { height: 100dvh; display: flex; flex-direction: column; background: var(--bg); } .adm[hidden] { display: none; } .adm__bar { height: var(--header-h); flex: none; display: flex; align-items: center; gap: 8px; padding: env(safe-area-inset-top) 12px 0 6px; box-sizing: content-box; border-bottom: 1px solid var(--border); } .adm__title { margin: 0; } .adm__tabs { flex: none; display: flex; gap: 2px; overflow-x: auto; padding: 0 8px; border-bottom: 1px solid var(--border); } .adm__main { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); } .adm-panel { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .adm-loading { display: grid; place-items: center; padding: 40px 0; color: var(--muted); } .adm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .adm-row .grow { flex: 1; } .adm-search { display: flex; gap: 8px; } .adm-search .ma-input { flex: 1; min-width: 0; } .adm-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .adm-pager div { display: flex; gap: 8px; } .adm-empty { padding: 24px 8px; text-align: center; color: var(--muted); font-size: 14px; } .adm-table { display: table; } .adm-table td, .adm-table th { white-space: normal; overflow-wrap: break-word; vertical-align: top; } .adm-sub { display: block; font-size: 12px; color: var(--muted); } .adm-mono { font-family: var(--font-mono); font-size: 12px; } .adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .adm-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .adm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .adm-card__head .grow { flex: 1; } .adm-kv { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; } .adm-kv b { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .adm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: start; } .adm-form .ma-field--wide { grid-column: 1 / -1; } .adm-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; } .adm-check input { width: 20px; height: 20px; accent-color: var(--accent); } .adm-sec { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--border); } .adm-sec:first-child { border-top: 0; padding-top: 4px; } .adm-sec > h3 { margin: 0; font-size: 14px; font-weight: 600; } .adm-err { padding: 10px 12px; border-radius: var(--r-sm); background: var(--danger-soft); color: var(--text); font-size: 13px; line-height: 18px; border: 1px solid var(--danger); overflow-wrap: anywhere; } .adm-temp { padding: 14px; text-align: center; font-size: 18px; letter-spacing: .04em; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-sm); user-select: all; overflow-wrap: anywhere; } .adm-dl { display: flex; align-items: center; gap: 12px; padding: 14px; color: var(--text); text-decoration: none; } .adm-dl .grow { flex: 1; } select.ma-input { padding: 0 10px; } .adm-sheet-body { display: flex; flex-direction: column; } @media (max-width: 699px) { .adm-tablewrap { border: 0; background: none; } .adm-table thead { display: none; } .adm-table, .adm-table tbody, .adm-table tr, .adm-table td { display: block; width: 100%; box-sizing: border-box; } .adm-table tr { padding: 10px 12px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .adm-table td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 0; text-align: right; } .adm-table td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 12px; text-align: left; } .adm-table tbody tr:hover td { background: transparent; } .adm-table td:not([data-label])::before { content: none; } } /* ===== D8: Manual QR payment (umiiral na tokens at components lang; walang bagong kulay) ===== */ .pay { display: flex; flex-direction: column; gap: 14px; } .pay__row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; } .pay__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pay__label { font-size: 13px; font-weight: 500; color: var(--muted); } .pay__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .pay__amount b { font-size: 24px; letter-spacing: -.02em; color: var(--text); } .pay__qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px; } .pay__qr img { width: 220px; max-width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface-2); border-radius: var(--r-sm); } .pay__acct { flex: 1; min-width: 160px; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; } .pay__acct dt { color: var(--muted); } .pay__acct dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .pay__pick { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .pay__receipt { display: flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; } .pay__receipt img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); } .pay__done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 12px 0; } .pay__done-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--success-soft); color: var(--success); } .pay__done .sheet-actions { width: 100%; } .pay-hist { gap: 10px; } .pay-hist__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pay-hist__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; } .adm-tabcount { margin-left: 2px; } .adm-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .adm-grid--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .adm-qrsec { margin: 0; gap: 10px; } .adm-qrsec > h3 { margin: 8px 0 0; } .adm-qr img { width: 160px; max-width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface-2); border-radius: var(--r-sm); } .adm-receipt { display: grid; place-items: center; background: var(--surface-2); border-radius: var(--r-sm); padding: 8px; } .adm-receipt img { max-width: 100%; max-height: 70dvh; object-fit: contain; } @media (max-width: 699px) { .pay__qr { justify-content: center; } .pay__amount { align-items: flex-start; } }