/* * This is a manifest file that'll be compiled into application.css. */ /* UA / Tailwind preflight leave buttons as cursor:default — restore the hand. */ button:not(:disabled), input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled), input[type="reset"]:not(:disabled), summary, [role="button"]:not([aria-disabled="true"]) { cursor: pointer; } button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, [role="button"][aria-disabled="true"] { cursor: not-allowed; } /* Dashboard Clean AI badge — dismissed preference is stored on before paint. */ html.mir-clean-ai-badge-dismissed .mir-clean-ai-badge { display: none; } /* Skip link (WCAG 2.4.1) — first child of in every layout. Off-screen until focused, then pinned top-left so keyboard users can jump past the nav. */ .mir-skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .mir-skip-link:focus { position: fixed; left: 1rem; top: 1rem; z-index: 100; width: auto; height: auto; overflow: visible; padding: 0.5rem 1rem; border-radius: 0.75rem; background-color: #ffffff; color: #0369a1; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); outline: 2px solid #0ea5e9; outline-offset: 2px; } html.dark .mir-skip-link:focus { background-color: #0f172a; color: #7dd3fc; } /* main carries tabindex="-1" so the skip link lands focus in every browser; it isn't interactive, so suppress the ring the programmatic focus would draw. */ main#main:focus { outline: none; } /* Heroicons via rails_icons — SVGs have no intrinsic size without CSS. Tailwind `size-*` often isn't generated for helper args, so pin defaults here. */ svg[data-slot="icon"] { display: inline-block; width: 1rem; height: 1rem; flex-shrink: 0; vertical-align: middle; } svg[data-slot="icon"].size-3, svg[data-slot="icon"].mir-icon-xs { width: 0.75rem; height: 0.75rem; } svg[data-slot="icon"].size-3\.5, svg[data-slot="icon"].mir-icon-sm { width: 0.875rem; height: 0.875rem; } svg[data-slot="icon"].size-4 { width: 1rem; height: 1rem; } svg[data-slot="icon"].size-5 { width: 1.25rem; height: 1.25rem; } svg[data-slot="icon"].size-6 { width: 1.5rem; height: 1.5rem; } @keyframes mir-chat-dot { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .mir-chat-typing span { display: inline-block; width: 0.35rem; height: 0.35rem; margin-right: 0.2rem; border-radius: 9999px; background: currentColor; animation: mir-chat-dot 1.15s ease-in-out infinite; } .mir-chat-typing span:nth-child(2) { animation-delay: 0.15s; } .mir-chat-typing span:nth-child(3) { animation-delay: 0.3s; margin-right: 0; } @media (prefers-reduced-motion: reduce) { .mir-chat-typing span { animation: none; opacity: 0.65; } } /* Managed / auth shell — dusk atmosphere only in dark mode. Fixed + no-repeat keeps the glows viewport-sized on tall pages (privacy/terms) instead of stretching or tiling down the document. */ html.dark .mir-managed-shell { background-color: #0a0f16; background-image: radial-gradient(ellipse 90% 55% at 0% -10%, rgba(56, 189, 248, 0.09), transparent 55%), radial-gradient(ellipse 70% 45% at 100% 110%, rgba(14, 165, 233, 0.05), transparent 50%); background-repeat: no-repeat; background-attachment: fixed; } /* Lit site preview — soft sky rim in the dark */ html.dark .mir-site-frame { box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.14), 0 28px 56px -28px rgba(56, 189, 248, 0.28), 0 12px 24px -16px rgba(0, 0, 0, 0.55); } /* Site preview — desktop browser vs mobile browser chrome */ .mir-site-preview { display: flex; justify-content: center; } .mir-site-preview__shell { width: 100%; transition: width 0.25s ease, max-width 0.25s ease, border-radius 0.25s ease, box-shadow 0.25s ease; } .mir-site-preview__shell--mobile { width: min(100%, 24.375rem); border-radius: 1.75rem; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 22px 48px -24px rgb(0 0 0 / 0.4); } html.dark .mir-site-preview__shell--mobile { box-shadow: 0 0 0 1px rgb(56 189 248 / 0.16), 0 28px 56px -28px rgb(56 189 248 / 0.28), 0 12px 24px -16px rgb(0 0 0 / 0.55); } .mir-site-preview__mode { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.625rem; padding: 0.375rem; color: #78716c; transition: background-color 0.15s ease, color 0.15s ease; } .mir-site-preview__mode:hover { background-color: rgb(255 255 255 / 0.7); color: #44403c; } .mir-site-preview__mode:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; } .mir-site-preview__mode--active { background-color: #fff; color: #0c4a6e; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); } html.dark .mir-site-preview__mode { color: #94a3b8; } html.dark .mir-site-preview__mode:hover { background-color: rgb(51 65 85 / 0.6); color: #e2e8f0; } html.dark .mir-site-preview__mode--active { background-color: #0f172a; color: #38bdf8; box-shadow: none; } /* Mobile browser chrome: hide traffic lights, compact URL + controls */ .mir-site-preview--mobile .mir-site-preview__traffic { display: none; } .mir-site-preview--mobile .mir-site-preview__chrome { flex-wrap: nowrap; gap: 0.5rem; padding: 0.625rem 0.75rem; } .mir-site-preview--mobile .mir-site-preview__url { border-radius: 9999px; padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1.25rem; box-shadow: none; } .mir-site-preview--mobile .mir-site-preview__open-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mir-site-preview--mobile .mir-site-preview__open { padding: 0.375rem; } .mir-site-preview__frame { display: block; width: 100%; height: 16rem; background: #fff; transition: height 0.25s ease; } @media (min-width: 640px) { .mir-site-preview__frame--desktop { height: 34rem; } } .mir-site-preview__frame--mobile { height: 36rem; } @media (min-width: 640px) { .mir-site-preview__frame--mobile { height: 40rem; } } html.dark .mir-site-preview__frame { background: #020617; } @media (prefers-reduced-motion: reduce) { .mir-site-preview__shell, .mir-site-preview__frame, .mir-site-preview__mode { transition: none; } } /* Public showcase — each card shows a recorded preview of the site (a still poster that swaps to a short animated WebP of the site loading when the card scrolls into view), not a live iframe. `showcase-preview` does the swap. */ .mir-showcase-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .mir-showcase-card:hover { transform: translateY(-2px); } .mir-showcase-shot { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #fff; } html.dark .mir-showcase-shot { background: #020617; } .mir-showcase-shot__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; /* Recorded at desktop width, so crop to the top of the page — the part a visitor lands on — rather than squashing the whole thing into the card. */ object-fit: cover; object-position: top center; } /* Featured before anyone has recorded it: the browser chrome with the site's name in it, which beats an empty white rectangle. */ .mir-showcase-shot__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; background: linear-gradient(160deg, #f5f5f4, #e7e5e4); } html.dark .mir-showcase-shot__placeholder { background: linear-gradient(160deg, #0f172a, #1e293b); } .mir-showcase-shot__veil { position: absolute; inset: 0; background: transparent; transition: background-color 0.2s ease; } .mir-showcase-card:hover .mir-showcase-shot__veil { background-color: rgb(2 132 199 / 0.06); } @media (prefers-reduced-motion: reduce) { .mir-showcase-card, .mir-showcase-shot__veil { transition: none; } .mir-showcase-card:hover { transform: none; } } /* Shared page-enter motion (dashboard lists, page blocks, auth, marketing) */ .mir-rise { animation: mir-auth-rise 0.45s ease-out both; } .mir-rise-delayed { animation: mir-auth-rise 0.55s ease-out 0.08s both; } .mir-rise-list > *, .mir-dash-list > li { animation: mir-auth-rise 0.45s ease-out both; animation-delay: calc(var(--mir-rise-i, var(--mir-dash-i, 0)) * 45ms); } /* Turbo shows a cached snapshot before the network response. Entrance motion on that preview + again on the final render reads as a double load flash. */ html[data-turbo-preview] .mir-rise, html[data-turbo-preview] .mir-rise-delayed, html[data-turbo-preview] .mir-rise-list > *, html[data-turbo-preview] .mir-dash-list > li { animation: none !important; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .mir-rise, .mir-rise-delayed, .mir-rise-list > *, .mir-dash-list > li { animation: none; } } /* Data form wizard field chips */ .mir-form-chip { cursor: pointer; } .mir-form-chip.mir-form-chip--on, .mir-form-chip[aria-pressed="true"] { border-color: rgb(14 165 233); background: rgb(240 249 255); color: rgb(12 74 110); } html.dark .mir-form-chip.mir-form-chip--on, html.dark .mir-form-chip[aria-pressed="true"] { border-color: rgb(56 189 248); background: rgb(8 47 73 / 0.55); color: rgb(224 242 254); } /* Auth doorway (Devise layout) */ @keyframes mir-auth-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; /* `none` — not translateY(0). A lingering transform makes position:fixed descendants (modals) size to this box instead of the viewport. */ transform: none; } } .mir-auth-panel { animation: mir-auth-rise 0.45s ease-out both; } .mir-auth-window { animation: mir-auth-rise 0.55s ease-out 0.08s both; } @media (prefers-reduced-motion: reduce) { .mir-auth-panel, .mir-auth-window { animation: none; } } .mir-password-field { position: relative; } .mir-password-field__toggle { position: absolute; top: 50%; right: 0.625rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem; border: 0; border-radius: 0.625rem; background: transparent; color: rgb(120 113 108); cursor: pointer; transform: translateY(-50%); } .mir-password-field__toggle:hover { color: rgb(68 64 60); background: rgb(245 245 244); } .mir-password-field__toggle:focus-visible { outline: 2px solid rgb(14 165 233); outline-offset: 2px; } html.dark .mir-password-field__toggle { color: rgb(148 163 184); } html.dark .mir-password-field__toggle:hover { color: rgb(226 232 240); background: rgb(30 41 59); } html.dark .mir-password-field__toggle:focus-visible { outline-color: rgb(56 189 248); } /* Marketing homepage */ .mir-marketing, .mir-marketing .mir-brand { font-family: "Bricolage Grotesque", "Source Sans 3", ui-sans-serif, system-ui, sans-serif; } .mir-marketing { font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; } .mir-marketing .mir-brand { font-optical-sizing: auto; } .mir-home-rise { animation: mir-auth-rise 0.5s ease-out both; } .mir-home-window { animation: mir-auth-rise 0.65s ease-out 0.1s both; } .mir-home-steps > li { animation: mir-auth-rise 0.5s ease-out both; } .mir-home-steps > li:nth-child(1) { animation-delay: 0.05s; } .mir-home-steps > li:nth-child(2) { animation-delay: 0.12s; } .mir-home-steps > li:nth-child(3) { animation-delay: 0.19s; } @media (prefers-reduced-motion: reduce) { .mir-home-rise, .mir-home-window, .mir-home-steps > li { animation: none; } } /* Stylized client site inside the homepage frame */ .mir-demo-site { background-color: #1a1512; color: #f3ebe3; background-image: radial-gradient(ellipse at 20% 0%, rgba(232, 145, 72, 0.35), transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(60, 35, 22, 0.9), transparent 45%); } .mir-demo-panel { display: flex; aspect-ratio: 3 / 4; flex-direction: column; justify-content: flex-end; border-radius: 1rem; padding: 1rem; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45); } .mir-demo-panel--sourdough { background: linear-gradient(165deg, #d4894a 0%, #8b4e28 48%, #3d2418 100%); } .mir-demo-panel--olive { margin-top: 2.5rem; background: linear-gradient(165deg, #a67c52 0%, #5c3a24 55%, #24160f 100%); } /* Compact attachment thumbs (composer + chat) */ .mir-attach-thumb { width: 3rem; height: 3rem; border-radius: 0.75rem; object-fit: cover; display: block; flex-shrink: 0; } .mir-attach-chip { position: relative; } .mir-attach-chip.is-uploading .mir-attach-thumb { opacity: 0.62; } .mir-attach-chip__progress { position: absolute; right: 0.28rem; bottom: 0.28rem; left: 0.28rem; } .mir-upload-bar { display: block; width: 100%; height: 0.28rem; overflow: hidden; border-radius: 999px; background: rgb(231 229 228); } html.dark .mir-upload-bar { background: rgb(51 65 85); } .mir-upload-bar > span { display: block; height: 100%; width: var(--mir-upload-pct, 0%); border-radius: inherit; background: rgb(3 105 161); transition: width 120ms ease-out; } html.dark .mir-upload-bar > span { background: rgb(56 189 248); } .mir-upload-bar.is-indeterminate > span { width: 36%; animation: mir-upload-indeterminate 1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .mir-upload-bar > span { transition: none; } .mir-upload-bar.is-indeterminate > span { animation: none; width: 100%; } } @keyframes mir-upload-indeterminate { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } } /* Change-request live page — keep last cards clear of the main scroller edge. Don't rely on Tailwind spacing utilities that may not be in the built CSS. */ .mir-change-request-live { padding-bottom: 6rem; } .mir-chat-scroll-end { display: block; width: 100%; height: 4rem; flex-shrink: 0; } /* Managed flash toasts — float above the shell, auto-dismiss with a quiet timer. */ .mir-toast-stack { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; display: flex; flex-direction: column; gap: 0.75rem; max-width: min(22rem, calc(100vw - 2rem)); pointer-events: none; } .mir-toast { pointer-events: auto; position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: start; overflow: hidden; border-radius: 1rem; border: 1px solid rgb(231 229 228); background: rgb(255 255 255 / 0.96); box-shadow: 0 12px 32px rgb(28 25 23 / 0.1), 0 2px 6px rgb(28 25 23 / 0.05); padding: 0.9rem 0.85rem 1rem 0; opacity: 0; transform: translateY(0.85rem) scale(0.98); } html.dark .mir-toast { border-color: rgb(51 65 85 / 0.9); background: rgb(15 23 42 / 0.94); box-shadow: 0 16px 40px rgb(2 6 23 / 0.45), 0 0 0 1px rgb(148 163 184 / 0.08); } .mir-toast.is-in { animation: mir-toast-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .mir-toast.is-out { animation: mir-toast-out 0.28s ease-in forwards; } .mir-toast__rail { width: 0.25rem; align-self: stretch; margin: 0.15rem 0 0.15rem 0.55rem; border-radius: 999px; background: rgb(14 165 233); } .mir-toast--notice .mir-toast__rail { background: rgb(5 150 105); } .mir-toast--alert .mir-toast__rail { background: rgb(225 29 72); } .mir-toast__body { min-width: 0; padding-top: 0.05rem; } .mir-toast__label { margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: rgb(120 113 108); } html.dark .mir-toast__label { color: rgb(148 163 184); } .mir-toast__message { margin: 0.2rem 0 0; font-size: 0.9rem; line-height: 1.4; color: rgb(28 25 23); } html.dark .mir-toast__message { color: rgb(226 232 240); } .mir-toast__dismiss { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-right: 0.25rem; border: 0; border-radius: 0.75rem; background: transparent; color: rgb(168 162 158); cursor: pointer; } .mir-toast__dismiss:hover { background: rgb(245 245 244); color: rgb(68 64 60); } html.dark .mir-toast__dismiss:hover { background: rgb(30 41 59); color: rgb(226 232 240); } .mir-toast__dismiss svg { width: 1rem; height: 1rem; } .mir-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(231 229 228 / 0.8); } html.dark .mir-toast__timer { background: rgb(51 65 85 / 0.8); } .mir-toast__timer span { display: block; height: 100%; width: 100%; transform-origin: left center; background: rgb(14 165 233 / 0.7); animation: mir-toast-timer linear forwards; } .mir-toast--notice .mir-toast__timer span { background: rgb(5 150 105 / 0.75); } .mir-toast--alert .mir-toast__timer span { background: rgb(225 29 72 / 0.75); } @keyframes mir-toast-in { from { opacity: 0; transform: translateY(0.85rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mir-toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(0.4rem) scale(0.98); } } @keyframes mir-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .mir-toast.is-in, .mir-toast.is-out, .mir-toast__timer span { animation: none !important; } .mir-toast.is-in { opacity: 1; transform: none; } } /* Confirm modal — styled replacement for window.confirm. Prefer + showModal() so the overlay paints in the browser top layer (escapes
/ transform clipping). Plain divs still work when rendered as a direct child of (shared/confirm). */ .mir-confirm { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; /* Fill the visible viewport via inset — avoid 100vh, which overshoots mobile browser chrome and clips the footer buttons. */ width: auto; max-width: none; height: auto; max-height: none; margin: 0; border: none; padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); background: transparent; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; box-sizing: border-box; } dialog.mir-confirm:not([open]) { display: none; } dialog.mir-confirm[open] { display: flex; } .mir-confirm.is-open, dialog.mir-confirm[open].is-open { pointer-events: auto; opacity: 1; } dialog.mir-confirm::backdrop { background: transparent; } .mir-confirm__backdrop { position: absolute; inset: 0; background: rgb(28 25 23 / 0.45); backdrop-filter: blur(2px); } html.dark .mir-confirm__backdrop { background: rgb(2 6 23 / 0.65); } .mir-confirm__dialog { position: relative; display: flex; width: 100%; max-width: 24rem; max-height: min(85dvh, 40rem); flex-direction: column; overflow: hidden; border-radius: 1rem; border: 1px solid rgb(231 229 228); background: rgb(255 255 255 / 0.98); box-shadow: 0 24px 48px rgb(28 25 23 / 0.14), 0 4px 12px rgb(28 25 23 / 0.06); transform: translateY(0.75rem) scale(0.98); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } @supports not (height: 1dvh) { .mir-confirm__dialog { max-height: min(85vh, 40rem); } } @media (min-width: 640px) { .mir-confirm__dialog--form { max-width: 32rem; } } .mir-confirm.is-open .mir-confirm__dialog { transform: translateY(0) scale(1); } html.dark .mir-confirm__dialog { border-color: rgb(51 65 85 / 0.9); background: rgb(15 23 42 / 0.98); box-shadow: 0 24px 48px rgb(2 6 23 / 0.45), 0 4px 12px rgb(2 6 23 / 0.2); } body.mir-confirm-open { overflow: hidden; } .mir-confirm__header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid rgb(231 229 228); padding: 1rem 1.15rem; } html.dark .mir-confirm__header { border-bottom-color: rgb(51 65 85 / 0.9); } .mir-confirm__title { min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: rgb(28 25 23); } html.dark .mir-confirm__title { color: rgb(248 250 252); } .mir-confirm__close { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.75rem; color: rgb(120 113 108); } .mir-confirm__close:hover { background: rgb(245 245 244); color: rgb(41 37 36); } html.dark .mir-confirm__close { color: rgb(148 163 184); } html.dark .mir-confirm__close:hover { background: rgb(30 41 59); color: rgb(248 250 252); } .mir-confirm__body { padding: 1rem 1.15rem; } .mir-confirm__dialog--form .mir-confirm__body { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mir-confirm__scroll { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .mir-confirm__message { font-size: 0.9375rem; line-height: 1.55; color: rgb(68 64 60); white-space: pre-wrap; } html.dark .mir-confirm__message { color: rgb(203 213 225); } .mir-confirm__detail { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.5; color: rgb(120 113 108); white-space: pre-wrap; } html.dark .mir-confirm__detail { color: rgb(148 163 184); } .mir-confirm__footer { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 0.5rem; border-top: 1px solid rgb(231 229 228); padding: 0.85rem 1.15rem 1.15rem; /* Keep actions above home-indicator when the sheet is near the bottom edge. */ padding-bottom: max(1.15rem, env(safe-area-inset-bottom, 0px)); } html.dark .mir-confirm__footer { border-top-color: rgb(51 65 85 / 0.9); } .mir-confirm__cancel, .mir-confirm__confirm { border-radius: 0.75rem; padding: 0.55rem 0.95rem; font-size: 0.875rem; font-weight: 500; } .mir-confirm__cancel { border: 1px solid rgb(214 211 209); background: rgb(255 255 255); color: rgb(68 64 60); } .mir-confirm__cancel:hover { background: rgb(250 250 249); } html.dark .mir-confirm__cancel { border-color: rgb(51 65 85); background: rgb(15 23 42); color: rgb(226 232 240); } html.dark .mir-confirm__cancel:hover { background: rgb(30 41 59); } .mir-confirm__confirm { border: 1px solid rgb(3 105 161); background: rgb(3 105 161); color: rgb(255 255 255); } .mir-confirm__confirm:hover { background: rgb(7 89 133); } html.dark .mir-confirm__confirm { border-color: rgb(14 165 233); background: rgb(14 165 233); color: rgb(2 6 23); } html.dark .mir-confirm__confirm:hover { background: rgb(56 189 248); } .mir-confirm__confirm--danger { border-color: rgb(190 18 60); background: rgb(190 18 60); color: rgb(255 255 255); } .mir-confirm__confirm--danger:hover { background: rgb(159 18 57); } html.dark .mir-confirm__confirm--danger { border-color: rgb(244 63 94); background: rgb(244 63 94); color: rgb(2 6 23); } html.dark .mir-confirm__confirm--danger:hover { background: rgb(251 113 133); } @media (prefers-reduced-motion: reduce) { .mir-confirm, .mir-confirm__dialog { transition: none; } .mir-confirm__dialog { transform: none; } } /* Inbox attachment viewer — Gmail-style full-page takeover */ .mir-attachment-viewer { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr); width: auto; height: auto; margin: 0; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .mir-attachment-viewer.is-open { opacity: 1; pointer-events: auto; } .mir-attachment-viewer__backdrop { position: absolute; inset: 0; z-index: 0; border: 0; background: rgb(32 33 36); cursor: default; } .mir-attachment-viewer__header { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.5rem; min-height: 3.5rem; padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) 0.5rem max(0.5rem, env(safe-area-inset-left, 0px)); color: rgb(232 234 237); background: rgb(32 33 36); } .mir-attachment-viewer__heading { min-width: 0; } .mir-attachment-viewer__title { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: rgb(232 234 237); } .mir-attachment-viewer__meta { margin-top: 0.05rem; font-size: 0.75rem; color: rgb(154 160 166); } .mir-attachment-viewer__nav, .mir-attachment-viewer__close, .mir-attachment-viewer__icon-btn, .mir-attachment-viewer__zoom-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; color: rgb(232 234 237); } .mir-attachment-viewer__nav:hover, .mir-attachment-viewer__close:hover, .mir-attachment-viewer__icon-btn:hover, .mir-attachment-viewer__zoom-btn:hover { background: rgb(255 255 255 / 0.1); color: rgb(255 255 255); } .mir-attachment-viewer__counter { min-width: 2.75rem; text-align: center; font-size: 0.75rem; color: rgb(154 160 166); } .mir-attachment-viewer__stage { position: relative; z-index: 1; display: flex; min-height: 0; align-items: center; justify-content: center; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) max(4.5rem, calc(1rem + env(safe-area-inset-bottom, 0px))) max(1rem, env(safe-area-inset-left, 0px)); background: rgb(32 33 36); } .mir-attachment-viewer__stage--frame { align-items: stretch; justify-content: stretch; overflow: hidden; padding: 0 max(0px, env(safe-area-inset-right, 0px)) max(0px, env(safe-area-inset-bottom, 0px)) max(0px, env(safe-area-inset-left, 0px)); } .mir-attachment-viewer__loading { font-size: 0.875rem; color: rgb(154 160 166); } .mir-attachment-viewer__canvas { display: flex; min-height: 100%; width: 100%; align-items: center; justify-content: center; } .mir-attachment-viewer__image { display: block; width: auto; height: auto; max-width: min(100%, 72rem); max-height: calc(100dvh - 8rem); object-fit: contain; user-select: none; } @supports not (height: 1dvh) { .mir-attachment-viewer__image { max-height: calc(100vh - 8rem); } } .mir-attachment-viewer__frame { display: block; width: 100%; height: 100%; border: 0; background: rgb(255 255 255); } .mir-attachment-viewer__zoom { position: absolute; z-index: 2; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 0.15rem; padding: 0.25rem; border-radius: 999px; background: rgb(60 64 67 / 0.92); box-shadow: 0 4px 16px rgb(0 0 0 / 0.35); transform: translateX(-50%); } .mir-attachment-viewer__zoom[hidden] { display: none !important; } .mir-attachment-viewer__zoom-btn { width: 2.25rem; height: 2.25rem; border-radius: 999px; } .mir-attachment-viewer__empty { display: flex; max-width: 22rem; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1.25rem; text-align: center; } .mir-attachment-viewer__empty-name { font-size: 0.9375rem; font-weight: 600; color: rgb(232 234 237); } .mir-attachment-viewer__empty-msg { font-size: 0.875rem; line-height: 1.5; color: rgb(154 160 166); } .mir-attachment-viewer__empty-download { margin-top: 0.5rem; border-radius: 0.75rem; background: rgb(3 105 161); padding: 0.55rem 0.95rem; font-size: 0.875rem; font-weight: 500; color: rgb(255 255 255); } .mir-attachment-viewer__empty-download:hover { background: rgb(7 89 133); } body.mir-attachment-viewer-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .mir-attachment-viewer, .mir-attachment-viewer__image { transition: none; } } /* Conversation message accordion */ .mir-email-message + .mir-email-message { border-top: 1px solid rgb(231 229 228); } /* Keep the newest message clear of the sticky thread toolbar on open. */ .mir-email-message--latest { scroll-margin-top: 5.5rem; } @media (max-width: 1023px) { .mir-email-message--latest { scroll-margin-top: calc(8.75rem + env(safe-area-inset-top, 0px)); } } html.dark .mir-email-message + .mir-email-message { border-top-color: rgb(51 65 85 / 0.9); } .mir-email-message__header:hover { background: rgb(250 250 249); } html.dark .mir-email-message__header:hover { background: rgb(15 23 42 / 0.65); } .mir-email-message[data-expanded="true"] .mir-email-message__header { border-bottom: 1px solid rgb(245 245 244); } html.dark .mir-email-message[data-expanded="true"] .mir-email-message__header { border-bottom-color: rgb(51 65 85 / 0.7); } /* Managed shell — mobile drawer + safe areas */ .mir-managed-mobile-header { padding-top: max(0.75rem, env(safe-area-inset-top, 0px)); } .mir-managed-menu-button { width: 2.5rem; height: 2.5rem; } .mir-managed-main { padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)); } .mir-live-site-header { position: sticky; z-index: 20; top: 0; } .mir-managed-main:has(.mir-studio), .mir-managed-main.mir-studio-main, .mir-managed-main.mir-inbox-main, .mir-managed-main:has(.mir-inbox), .mir-managed-main:has(.mir-live-site-header) { padding-bottom: 0; } /* Inbox mail workspace — full-bleed list / thread; document scrolls with the page */ .mir-inbox { width: 100%; } .mir-inbox__toolbar { position: sticky; z-index: 20; top: 0; background: rgb(255 255 255 / 0.95); backdrop-filter: blur(8px); } html.dark .mir-inbox__toolbar { background: rgb(2 6 23 / 0.92); } @media (max-width: 1023px) { /* Sit below the sticky shell mobile header */ .mir-inbox__toolbar { top: calc(3.25rem + env(safe-area-inset-top, 0px)); } } /* TipTap compose (rich-compose Stimulus) */ .mir-rich-compose__tool { display: inline-flex; min-height: 1.75rem; min-width: 1.75rem; cursor: pointer; align-items: center; justify-content: center; border-radius: 0.75rem; padding: 0.25rem 0.4rem; font-size: 0.8125rem; line-height: 1; color: rgb(120 113 108); transition: background-color 150ms ease, color 150ms ease; } .mir-rich-compose__tool:hover { background: rgb(245 245 244); color: rgb(28 25 23); } .mir-rich-compose__tool--active, .mir-rich-compose__tool[aria-pressed="true"] { background: rgb(240 249 255); color: rgb(3 105 161); } html.dark .mir-rich-compose__tool { color: rgb(148 163 184); } html.dark .mir-rich-compose__tool:hover { background: rgb(30 41 59); color: rgb(248 250 252); } html.dark .mir-rich-compose__tool--active, html.dark .mir-rich-compose__tool[aria-pressed="true"] { background: rgb(12 74 110 / 0.45); color: rgb(125 211 252); } .mir-rich-compose__editor .ProseMirror { min-height: min(55vh, 28rem); outline: none; } .mir-rich-compose__prose { font-size: 1rem; line-height: 1.625; color: rgb(41 37 36); } html.dark .mir-rich-compose__prose { color: rgb(241 245 249); } .mir-rich-compose__prose p { margin: 0 0 0.75em; } .mir-rich-compose__prose p:last-child { margin-bottom: 0; } .mir-rich-compose__prose ul { margin: 0 0 0.75em; padding-left: 1.25rem; list-style: disc; } .mir-rich-compose__prose ol { margin: 0 0 0.75em; padding-left: 1.25rem; list-style: decimal; } .mir-rich-compose__prose li { margin: 0.15em 0; } .mir-rich-compose__prose li p { margin: 0; } .mir-rich-compose__prose blockquote { margin: 0 0 0.75em; border-left: 2px solid rgb(214 211 209); padding-left: 0.75rem; color: rgb(87 83 78); } html.dark .mir-rich-compose__prose blockquote { border-left-color: rgb(71 85 105); color: rgb(203 213 225); } .mir-rich-compose__link { color: rgb(3 105 161); text-decoration: underline; text-underline-offset: 2px; } html.dark .mir-rich-compose__link { color: rgb(125 211 252); } .mir-rich-compose__prose p.is-editor-empty:first-child::before, .mir-rich-compose__prose .is-empty::before { float: left; height: 0; color: rgb(168 162 158); content: attr(data-placeholder); pointer-events: none; } html.dark .mir-rich-compose__prose p.is-editor-empty:first-child::before, html.dark .mir-rich-compose__prose .is-empty::before { color: rgb(100 116 139); } /* Studio workbench — mobile document scroll; desktop fills the viewport (see lg:has lock below) */ .mir-studio { display: flex; min-height: calc(100dvh - 4rem); flex-direction: column; } .mir-studio__grid { display: flex; flex-direction: column; min-height: 0; } @media (min-width: 1024px) { .mir-studio__grid { display: grid; grid-template-columns: minmax(16rem, 3fr) minmax(0, 5fr) minmax(0, 4fr); align-items: stretch; } .mir-studio__pane { min-height: 0; height: 100%; } .mir-studio--chat-minimized .mir-studio__grid { grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr) 2.75rem; } } .mir-studio__chrome-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 0.75rem; background: transparent; color: rgb(120 113 108); cursor: pointer; } .mir-studio__chrome-btn.hidden { display: none; } .mir-studio__chrome-btn--lg { display: none; } .mir-studio__chrome-btn--mobile { display: inline-flex; } .mir-studio__chrome-btn--desktop { display: none; } @media (min-width: 1024px) { .mir-studio__chrome-btn--lg:not(.hidden) { display: inline-flex; } .mir-studio__chrome-btn--mobile { display: none; } .mir-studio__chrome-btn--desktop:not(.hidden) { display: inline-flex; } } .mir-studio__chrome-btn:hover { background: rgb(245 245 244); color: rgb(28 25 23); } html.dark .mir-studio__chrome-btn { color: rgb(148 163 184); } html.dark .mir-studio__chrome-btn:hover { background: rgb(30 41 59); color: rgb(241 245 249); } .mir-studio__chat-rail { display: none; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.65rem; padding: 0.7rem 0.15rem; border: 0; background: transparent; color: rgb(68 64 60); cursor: pointer; } .mir-studio__chat-rail:hover { background: rgb(240 249 255); } html.dark .mir-studio__chat-rail { color: rgb(203 213 225); } html.dark .mir-studio__chat-rail:hover { background: rgb(12 74 110 / 0.28); } .mir-studio__chat-rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; } .mir-studio--chat-minimized .mir-studio__pane--chat { min-width: 0; width: 2.75rem; } .mir-studio--chat-minimized .mir-studio__chat-body { display: none; } .mir-studio--chat-minimized .mir-studio__chat-rail { display: flex; } .mir-studio:not(.mir-studio--chat-minimized) .mir-studio__chat-rail { display: none; } .mir-studio__tab { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 0.75rem; padding: 0.5rem 0.65rem; font-size: 0.8125rem; font-weight: 500; color: rgb(87 83 78); background: transparent; border: 0; cursor: pointer; } .mir-studio__tab:hover { background: rgb(255 255 255 / 0.7); color: rgb(28 25 23); } .mir-studio__tab--active { background: white; color: rgb(3 105 161); box-shadow: 0 1px 2px rgb(28 25 23 / 0.06); } html.dark .mir-studio__tab { color: rgb(148 163 184); } html.dark .mir-studio__tab:hover { background: rgb(30 41 59 / 0.8); color: rgb(241 245 249); } html.dark .mir-studio__tab--active { background: rgb(15 23 42); color: rgb(56 189 248); box-shadow: none; } .mir-studio__bottom-nav { display: none; } @media (max-width: 1023px) { .mir-studio__bottom-nav { position: sticky; bottom: 0; z-index: 40; display: flex; flex-shrink: 0; gap: 0.25rem; border-top: 1px solid rgb(231 229 228); background: rgb(255 255 255 / 0.95); padding: 0.45rem 0.55rem calc(0.45rem + env(safe-area-inset-bottom, 0px)); backdrop-filter: blur(8px); } html.dark .mir-studio__bottom-nav { border-top-color: rgb(30 41 59); background: rgb(2 6 23 / 0.92); } /* One pane in document flow — page scrolls naturally; pull-to-refresh works. */ .mir-studio { height: auto; min-height: calc(100dvh - 3.5rem); } .mir-studio__grid { position: relative; height: auto; min-height: calc(100dvh - 9rem); padding-bottom: 0.75rem; } .mir-studio__pane--files, .mir-studio__pane--editor, .mir-studio__pane--chat { position: relative; inset: auto; z-index: auto; display: flex; min-height: calc(100dvh - 10rem); height: auto; flex-direction: column; opacity: 1; pointer-events: auto; transform: none; box-shadow: none; } .mir-studio__pane.is-suppressed { display: none; } .mir-studio__pane--files, .mir-studio__pane--editor, .mir-studio__pane--chat { overflow: visible; } .mir-studio-files { min-height: auto; overflow: visible; } .mir-studio-files__list { height: auto; overflow: visible; } .mir-studio__editor-shell { min-height: min(60vh, 28rem); } .mir-studio__turns { overflow: visible; max-height: none; min-height: 12rem; } } @media (min-width: 1024px) { /* Desktop IDE: lock the viewport so panes share the screen and scroll internally. */ html:has(.mir-studio) { height: 100%; } body:has(.mir-studio) { height: 100%; overflow: hidden; } body:has(.mir-studio) .mir-shell-row { height: 100%; min-height: 0; } .mir-managed-main.mir-studio-main, .mir-managed-main:has(.mir-studio) { min-height: 0; overflow: hidden; } .mir-studio { flex: 1 1 0%; height: auto; min-height: 0; } .mir-studio__pane--editor, .mir-studio__pane--chat { position: static; inset: auto; z-index: auto; opacity: 1; pointer-events: auto; transform: none; box-shadow: none; transition: none; } } .mir-studio__turns:has(.mir-chat-turn) .mir-studio__chat-empty { display: none; } .mir-studio__editor-shell { min-height: 0; } .mir-studio__editor-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgb(250 250 249 / 0.86); } html.dark .mir-studio__editor-loading { background: rgb(2 6 23 / 0.72); } .mir-studio__editor-loading[hidden] { display: none; } .mir-studio__editor { tab-size: 2; white-space: pre-wrap; word-break: break-word; caret-color: rgb(3 105 161); } html.dark .mir-studio__editor { caret-color: rgb(56 189 248); } .mir-studio__editor:focus-visible { box-shadow: inset 0 0 0 2px rgb(14 165 233 / 0.35); } .mir-studio__editor-line-hit { display: inline; background: rgb(125 211 252 / 0.45); border-radius: 0.2rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; } html.dark .mir-studio__editor-line-hit { background: rgb(14 165 233 / 0.35); } /* highlight.js token colors — light (stone/sky) */ .mir-studio__editor .hljs-comment, .mir-studio__editor .hljs-quote { color: rgb(168 162 158); font-style: italic; } .mir-studio__editor .hljs-tag, .mir-studio__editor .hljs-name, .mir-studio__editor .hljs-selector-tag { color: rgb(3 105 161); } .mir-studio__editor .hljs-attr, .mir-studio__editor .hljs-attribute, .mir-studio__editor .hljs-selector-attr, .mir-studio__editor .hljs-selector-class, .mir-studio__editor .hljs-selector-id { color: rgb(13 148 136); } .mir-studio__editor .hljs-string, .mir-studio__editor .hljs-doctag { color: rgb(4 120 87); } .mir-studio__editor .hljs-number, .mir-studio__editor .hljs-literal, .mir-studio__editor .hljs-variable, .mir-studio__editor .hljs-template-variable { color: rgb(180 83 9); } .mir-studio__editor .hljs-keyword, .mir-studio__editor .hljs-selector-pseudo { color: rgb(190 24 93); } .mir-studio__editor .hljs-built_in, .mir-studio__editor .hljs-type, .mir-studio__editor .hljs-title, .mir-studio__editor .hljs-section { color: rgb(67 56 202); } .mir-studio__editor .hljs-punctuation, .mir-studio__editor .hljs-symbol { color: rgb(120 113 108); } /* highlight.js token colors — dark */ html.dark .mir-studio__editor .hljs-comment, html.dark .mir-studio__editor .hljs-quote { color: rgb(100 116 139); } html.dark .mir-studio__editor .hljs-tag, html.dark .mir-studio__editor .hljs-name, html.dark .mir-studio__editor .hljs-selector-tag { color: rgb(56 189 248); } html.dark .mir-studio__editor .hljs-attr, html.dark .mir-studio__editor .hljs-attribute, html.dark .mir-studio__editor .hljs-selector-attr, html.dark .mir-studio__editor .hljs-selector-class, html.dark .mir-studio__editor .hljs-selector-id { color: rgb(45 212 191); } html.dark .mir-studio__editor .hljs-string, html.dark .mir-studio__editor .hljs-doctag { color: rgb(52 211 153); } html.dark .mir-studio__editor .hljs-number, html.dark .mir-studio__editor .hljs-literal, html.dark .mir-studio__editor .hljs-variable, html.dark .mir-studio__editor .hljs-template-variable { color: rgb(251 191 36); } html.dark .mir-studio__editor .hljs-keyword, html.dark .mir-studio__editor .hljs-selector-pseudo { color: rgb(244 114 182); } html.dark .mir-studio__editor .hljs-built_in, html.dark .mir-studio__editor .hljs-type, html.dark .mir-studio__editor .hljs-title, html.dark .mir-studio__editor .hljs-section { color: rgb(167 139 250); } html.dark .mir-studio__editor .hljs-punctuation, html.dark .mir-studio__editor .hljs-symbol { color: rgb(148 163 184); } /* Studio file tray */ .mir-studio-files { position: relative; min-height: 0; } .mir-studio-files__tool, .mir-studio-files__icon-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; border: 0; background: transparent; color: rgb(120 113 108); cursor: pointer; } .mir-studio-files__tool { width: 2rem; height: 2rem; } .mir-studio-files__search { position: relative; display: flex; align-items: center; } .mir-studio-files__search-icon { pointer-events: none; position: absolute; left: 0.65rem; color: rgb(168 162 158); } html.dark .mir-studio-files__search-icon { color: rgb(100 116 139); } .mir-studio-files__search-input { width: 100%; border: 0; border-radius: 0.75rem; background: rgb(245 245 244); padding: 0.45rem 2rem 0.45rem 2rem; font-size: 0.8125rem; line-height: 1.25rem; color: rgb(41 37 36); outline: none; } /* stone-600: the input sits on stone-100, where stone-500 is only 4.40:1. */ .mir-studio-files__search-input::placeholder { color: rgb(87 83 78); } .mir-studio-files__search-input::-webkit-search-cancel-button, .mir-studio-files__search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .mir-studio-files__search-input:focus { background: rgb(255 255 255); box-shadow: inset 0 0 0 1px rgb(14 165 233 / 0.55), 0 0 0 3px rgb(186 230 253 / 0.55); } html.dark .mir-studio-files__search-input { background: rgb(15 23 42); color: rgb(241 245 249); } html.dark .mir-studio-files__search-input::placeholder { color: rgb(148 163 184); } html.dark .mir-studio-files__search-input:focus { background: rgb(2 6 23); box-shadow: inset 0 0 0 1px rgb(56 189 248 / 0.55), 0 0 0 3px rgb(14 165 233 / 0.2); } .mir-studio-files__search-clear { position: absolute; right: 0.35rem; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border: 0; border-radius: 0.5rem; background: transparent; color: rgb(168 162 158); cursor: pointer; } .mir-studio-files__search-clear:hover { background: rgb(231 229 228); color: rgb(68 64 60); } .mir-studio-files__search-clear.hidden { display: none; } html.dark .mir-studio-files__search-clear { color: rgb(100 116 139); } html.dark .mir-studio-files__search-clear:hover { background: rgb(30 41 59); color: rgb(226 232 240); } .mir-studio-files__tool:hover, .mir-studio-files__icon-btn:hover { background: rgb(245 245 244); color: rgb(28 25 23); } .mir-studio-files__icon-btn { width: 1.65rem; height: 1.65rem; } .mir-studio-files__icon-btn--danger:hover { background: rgb(255 241 242); color: rgb(190 18 60); } html.dark .mir-studio-files__tool, html.dark .mir-studio-files__icon-btn { color: rgb(148 163 184); } html.dark .mir-studio-files__tool:hover, html.dark .mir-studio-files__icon-btn:hover { background: rgb(30 41 59); color: rgb(241 245 249); } html.dark .mir-studio-files__icon-btn--danger:hover { background: rgb(76 5 25 / 0.55); color: rgb(253 164 175); } .mir-studio-files__row { display: flex; align-items: center; gap: 0.25rem; min-width: 0; border-radius: 0.75rem; padding-left: calc(0.35rem + (var(--mir-depth, 0) * 0.85rem)); padding-right: 0.25rem; } .mir-studio-files__row:hover { background: rgb(250 250 249); } .mir-studio-files__row--active { background: rgb(240 249 255); } html.dark .mir-studio-files__row:hover { background: rgb(30 41 59 / 0.55); } html.dark .mir-studio-files__row--active { background: rgb(12 74 110 / 0.28); } .mir-studio-files__link, .mir-studio-files__folder-toggle { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.5rem; padding: 0.4rem 0.35rem; border: 0; background: transparent; color: rgb(68 64 60); font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; cursor: pointer; } html.dark .mir-studio-files__link, html.dark .mir-studio-files__folder-toggle { color: rgb(203 213 225); } .mir-studio-files__row--active .mir-studio-files__link { color: rgb(3 105 161); font-weight: 600; } html.dark .mir-studio-files__row--active .mir-studio-files__link { color: rgb(56 189 248); } .mir-studio-files__actions { display: none; align-items: center; gap: 0.1rem; padding-right: 0.15rem; } .mir-studio-files__row:hover .mir-studio-files__actions, .mir-studio-files__row:focus-within .mir-studio-files__actions { display: inline-flex; } .mir-studio-files__folder-toggle--open svg { /* no-op hook for future caret */ } .mir-studio-files__drop-overlay { pointer-events: none; position: absolute; inset: 0.35rem; z-index: 5; display: none; align-items: center; justify-content: center; border-radius: 1rem; border: 2px dashed rgb(14 165 233); background: rgb(240 249 255 / 0.88); } html.dark .mir-studio-files__drop-overlay { background: rgb(8 47 73 / 0.78); border-color: rgb(56 189 248); } .mir-studio-files--drop .mir-studio-files__drop-overlay { display: flex; } .mir-studio-files--uploading { pointer-events: none; } .mir-studio-files--uploading .mir-studio-files__header, .mir-studio-files--uploading .mir-studio-files__composer, .mir-studio-files--uploading .mir-studio-files__list, .mir-studio-files--uploading .mir-studio-files__results { opacity: 0.45; } .mir-studio-files__progress { pointer-events: none; position: absolute; inset: 0.35rem; z-index: 6; display: flex; align-items: center; justify-content: center; } .mir-studio-files__progress[hidden] { display: none; } .mir-studio-files__progress-card { display: flex; width: min(16rem, 100%); flex-direction: column; gap: 0.55rem; border-radius: 1rem; border: 1px solid rgb(125 211 252); background: rgb(255 255 255 / 0.96); padding: 0.9rem 1rem; box-shadow: 0 10px 30px rgb(15 23 42 / 0.08); } html.dark .mir-studio-files__progress-card { border-color: rgb(56 189 248 / 0.45); background: rgb(15 23 42 / 0.94); } .mir-studio-files__drop-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; border-radius: 1rem; border: 1px dashed rgb(125 211 252); background: white; padding: 1rem 1.25rem; } html.dark .mir-studio-files__drop-card { border-color: rgb(56 189 248); background: rgb(15 23 42); } .mir-studio-files__result { display: flex; flex-direction: column; gap: 0.2rem; border-radius: 0.75rem; padding: 0.65rem 0.75rem; text-decoration: none; } .mir-studio-files__result:hover { background: rgb(240 249 255); } html.dark .mir-studio-files__result:hover { background: rgb(12 74 110 / 0.28); } .mir-studio-files__result-path { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75rem; font-weight: 600; color: rgb(3 105 161); } html.dark .mir-studio-files__result-path { color: rgb(56 189 248); } .mir-studio-files__result-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75rem; color: rgb(120 113 108); } html.dark .mir-studio-files__result-snippet { color: rgb(148 163 184); } .mir-managed-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(28 25 23 / 0.4); backdrop-filter: blur(2px); } html.dark .mir-managed-backdrop { background: rgb(2 6 23 / 0.6); } @media (max-width: 1023px) { .mir-managed-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(18rem, 88vw); height: 100%; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 16px 0 48px -24px rgb(28 25 23 / 0.28); } html.dark .mir-managed-sidebar { box-shadow: 16px 0 48px -24px rgb(0 0 0 / 0.55); } .mir-managed-sidebar.is-open { transform: translateX(0); } body.mir-managed-nav-open { overflow: hidden; } } .mir-site-switcher__collapsed-icon { display: none; } @media (min-width: 1024px) { .mir-managed-backdrop { display: none !important; } /* Sticky so document-scroll pages keep the rail visible; locked workspaces still fill the viewport. */ .mir-managed-sidebar { position: sticky; top: 0; z-index: auto; width: 14rem; height: 100dvh; max-height: 100dvh; min-height: 0; transform: none; transition: width 0.2s ease, padding 0.2s ease; box-shadow: none; } /* Desktop icon rail — preference stored as html.mir-sidebar-collapsed */ html.mir-sidebar-collapsed .mir-managed-sidebar { width: 4rem; padding-left: 0.5rem; padding-right: 0.5rem; overflow: visible; } html.mir-sidebar-collapsed .mir-managed-sidebar .mir-sidebar-label { display: none; } html.mir-sidebar-collapsed .mir-managed-sidebar .mir-sidebar-dashboard-row { flex-direction: column; align-items: center; gap: 0.25rem; } html.mir-sidebar-collapsed .mir-managed-sidebar .mir-sidebar-nav-link { justify-content: center; gap: 0; flex: none; width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } html.mir-sidebar-collapsed .mir-managed-sidebar .mir-site-switcher__collapsed-icon { display: block; } html.mir-sidebar-collapsed .mir-managed-sidebar .mir-site-switcher__row { flex-direction: column; align-items: center; gap: 0.25rem; } html.mir-sidebar-collapsed .mir-managed-sidebar .mir-site-switcher__row > .relative, html.mir-sidebar-collapsed .mir-managed-sidebar .mir-site-switcher__header { width: 100%; } html.mir-sidebar-collapsed .mir-managed-sidebar .mir-site-switcher__trigger, html.mir-sidebar-collapsed .mir-managed-sidebar .mir-site-switcher__header { justify-content: center; gap: 0; padding: 0.5rem; } html.mir-sidebar-collapsed .mir-managed-sidebar .mir-site-switcher__menu { left: calc(100% + 0.5rem); right: auto; width: 14rem; } html.mir-sidebar-collapsed .mir-managed-sidebar .mir-site-switcher__new { width: 100%; } html.mir-sidebar-collapsed .mir-managed-sidebar [data-controller="theme"] { justify-content: center; gap: 0; } } @media (prefers-reduced-motion: reduce) { .mir-managed-sidebar { transition: none; } } .mir-nav-item-active { background: rgb(240 249 255); color: rgb(7 89 133); font-weight: 500; } /* Site switcher — explicit dark styles so hover:bg utilities can’t wash out text */ .mir-site-switcher__trigger { display: flex; width: 100%; align-items: center; gap: 0.5rem; border-radius: 0.75rem; border: 1px solid rgb(231 229 228); background: #fff; padding: 0.5rem 0.625rem; text-align: left; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: rgb(28 25 23); } /* One site: a plain heading rather than a control, so it lines up with the sidebar labels above and below instead of sitting in the switcher's box. */ .mir-site-switcher__header { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: rgb(28 25 23); } .mir-site-switcher__trigger:hover { background: rgb(250 250 249); } .mir-site-switcher__trigger:focus { outline: none; } .mir-site-switcher__trigger:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(14 165 233); } .mir-site-switcher__trigger-icon { flex-shrink: 0; color: rgb(168 162 158); } .mir-site-switcher__menu { position: absolute; left: 0; right: 0; z-index: 20; margin-top: 0.25rem; max-height: min(16rem, 50vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-radius: 1rem; border: 1px solid rgb(231 229 228); background: #fff; padding: 0.25rem 0; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); } .mir-site-switcher__option { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: rgb(68 64 60); } .mir-site-switcher__option:hover { background: rgb(250 250 249); color: rgb(28 25 23); } .mir-site-switcher__option--active { background: rgb(240 249 255); font-weight: 500; color: rgb(7 89 133); } .mir-site-switcher__option--active:hover { background: rgb(224 242 254); color: rgb(7 89 133); } html.dark .mir-site-switcher__trigger { border-color: rgb(51 65 85); background: rgb(2 6 23); color: rgb(241 245 249); } html.dark .mir-site-switcher__header { color: rgb(241 245 249); } html.dark .mir-site-switcher__trigger:hover { background: rgb(15 23 42); color: rgb(248 250 252); } html.dark .mir-site-switcher__trigger:focus-visible { box-shadow: 0 0 0 2px rgb(2 6 23), 0 0 0 4px rgb(14 165 233); } html.dark .mir-site-switcher__trigger-icon { color: rgb(100 116 139); } html.dark .mir-site-switcher__menu { border-color: rgb(51 65 85); background: rgb(2 6 23); box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.65); } html.dark .mir-site-switcher__option { color: rgb(203 213 225); } html.dark .mir-site-switcher__option:hover { background: rgb(30 41 59); color: rgb(248 250 252); } html.dark .mir-site-switcher__option--active { background: rgb(8 47 73 / 0.5); color: rgb(125 211 252); } html.dark .mir-site-switcher__option--active:hover { background: rgb(8 47 73 / 0.8); color: rgb(186 230 253); } html.dark .mir-nav-item-active { background: rgb(14 165 233 / 0.14); color: rgb(125 211 252); box-shadow: inset 0 0 0 1px rgb(56 189 248 / 0.22); } /* Selected managed project in the sidebar — readable in light and dusk */ .mir-nav-project-active { background: rgb(240 249 255); color: rgb(7 89 133); } html.dark .mir-nav-project-active { background: rgb(14 165 233 / 0.14); color: rgb(125 211 252); box-shadow: inset 0 0 0 1px rgb(56 189 248 / 0.22); } /* Managed domains — mode choice tiles + shared form fields */ .mir-domain-mode-choice { display: flex; align-items: flex-start; gap: 0.875rem; width: 100%; border-radius: 1rem; border: 2px solid rgb(231 229 228); background: rgb(255 255 255); padding: 1rem 1.125rem; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .mir-domain-mode-choice:hover { border-color: rgb(214 211 209); background: rgb(250 250 249); } .mir-domain-mode-choice:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(255 255 255), 0 0 0 4px rgb(14 165 233); } .mir-domain-mode-choice__marker { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; border-radius: 9999px; border: 2px solid rgb(168 162 158); background: rgb(255 255 255); transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .mir-domain-mode-choice__copy { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .mir-domain-mode-choice__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: rgb(68 64 60); } .mir-domain-mode-choice__hint { font-size: 0.8125rem; line-height: 1.45; color: rgb(120 113 108); } .mir-domain-mode-choice[aria-selected="true"] { border-color: rgb(3 105 161); background: rgb(240 249 255); box-shadow: inset 0 0 0 1px rgb(186 230 253); } .mir-domain-mode-choice[aria-selected="true"] .mir-domain-mode-choice__marker { border-color: rgb(3 105 161); background: rgb(3 105 161); box-shadow: inset 0 0 0 3px rgb(240 249 255); } .mir-domain-mode-choice[aria-selected="true"] .mir-domain-mode-choice__title { color: rgb(12 74 110); } .mir-domain-mode-choice[aria-selected="true"] .mir-domain-mode-choice__hint { color: rgb(3 105 161); } html.dark .mir-domain-mode-choice { border-color: rgb(51 65 85); background: rgb(15 23 42); } html.dark .mir-domain-mode-choice:hover { border-color: rgb(71 85 105); background: rgb(15 23 42 / 0.85); } html.dark .mir-domain-mode-choice__marker { border-color: rgb(100 116 139); background: rgb(2 6 23); } html.dark .mir-domain-mode-choice__title { color: rgb(226 232 240); } html.dark .mir-domain-mode-choice__hint { color: rgb(148 163 184); } html.dark .mir-domain-mode-choice[aria-selected="true"] { border-color: rgb(56 189 248); background: rgb(14 165 233 / 0.12); box-shadow: inset 0 0 0 1px rgb(56 189 248 / 0.35); } html.dark .mir-domain-mode-choice[aria-selected="true"] .mir-domain-mode-choice__marker { border-color: rgb(56 189 248); background: rgb(56 189 248); box-shadow: inset 0 0 0 3px rgb(15 23 42); } html.dark .mir-domain-mode-choice[aria-selected="true"] .mir-domain-mode-choice__title { color: rgb(186 230 253); } html.dark .mir-domain-mode-choice[aria-selected="true"] .mir-domain-mode-choice__hint { color: rgb(125 211 252); } @media (prefers-reduced-motion: reduce) { .mir-domain-mode-choice, .mir-domain-mode-choice__marker { transition: none; } } .mir-domain-field-label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: rgb(68 64 60); } html.dark .mir-domain-field-label { color: rgb(203 213 225); } .mir-domain-field-input { width: 100%; border-radius: 0.75rem; border: 1px solid rgb(214 211 209); background: rgb(255 255 255); padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.5rem; } .mir-domain-field-input:focus { border-color: rgb(14 165 233); outline: none; box-shadow: 0 0 0 2px rgb(186 230 253); } html.dark .mir-domain-field-input { border-color: rgb(51 65 85); background: rgb(2 6 23); color: rgb(241 245 249); } html.dark .mir-domain-field-input:focus { border-color: rgb(56 189 248); box-shadow: 0 0 0 2px rgb(56 189 248 / 0.2); } .mir-domain-host-input { display: flex; align-items: stretch; overflow: hidden; border-radius: 0.75rem; border: 1px solid rgb(214 211 209); background: rgb(255 255 255); } .mir-domain-host-input:focus-within { border-color: rgb(14 165 233); box-shadow: 0 0 0 2px rgb(186 230 253); } html.dark .mir-domain-host-input { border-color: rgb(51 65 85); background: rgb(2 6 23); } html.dark .mir-domain-host-input:focus-within { border-color: rgb(56 189 248); box-shadow: 0 0 0 2px rgb(56 189 248 / 0.2); } .mir-domain-host-input__prefix { display: flex; align-items: center; padding: 0 0.75rem; font-size: 0.875rem; font-weight: 500; color: rgb(87 83 78); background: rgb(245 245 244); border-right: 1px solid rgb(214 211 209); user-select: none; } .mir-domain-host-input__host { width: 5.5rem; flex-shrink: 0; border: 0; background: rgb(245 245 244); padding: 0.75rem 0.625rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: rgb(28 25 23); text-align: center; outline: none; border-right: 1px solid rgb(214 211 209); } .mir-domain-host-input__dot { display: flex; align-items: center; padding: 0 0.125rem; font-size: 1rem; font-weight: 500; color: rgb(120 113 108); background: rgb(245 245 244); border-right: 1px solid rgb(214 211 209); user-select: none; } html.dark .mir-domain-host-input__prefix { color: rgb(148 163 184); background: rgb(15 23 42); border-right-color: rgb(51 65 85); } html.dark .mir-domain-host-input__host, html.dark .mir-domain-host-input__dot { color: rgb(241 245 249); background: rgb(15 23 42); border-right-color: rgb(51 65 85); } html.dark .mir-domain-host-input__dot { color: rgb(148 163 184); } .mir-domain-host-input__control { min-width: 0; flex: 1; border: 0; background: transparent; padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.5rem; color: rgb(28 25 23); outline: none; } html.dark .mir-domain-host-input__control { color: rgb(241 245 249); } .mir-domain-host-input__control::placeholder { color: rgb(168 162 158); } html.dark .mir-domain-host-input__control::placeholder { color: rgb(100 116 139); } @keyframes mir-domain-spin { to { transform: rotate(360deg); } } .mir-domain-spinner { display: inline-block; flex-shrink: 0; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mir-domain-spin 0.65s linear infinite; } .mir-domain-spinner--sm { width: 0.75rem; height: 0.75rem; border-width: 1.5px; } @media (prefers-reduced-motion: reduce) { .mir-domain-spinner { animation: none; border-right-color: currentColor; opacity: 0.55; } } .mir-inbox-refresh--busy { pointer-events: none; opacity: 0.7; } .mir-inbox-refresh--busy svg { animation: mir-domain-spin 0.65s linear infinite; } @media (prefers-reduced-motion: reduce) { .mir-inbox-refresh--busy svg { animation: none; } } .mir-domain-field-submit { width: 100%; flex-shrink: 0; border-radius: 0.75rem; background: rgb(3 105 161); padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: rgb(255 255 255); } .mir-domain-field-submit:hover:not(:disabled) { background: rgb(7 89 133); } .mir-domain-field-submit:disabled { cursor: not-allowed; opacity: 0.6; } html.dark .mir-domain-field-submit { background: rgb(14 165 233); color: rgb(2 6 23); } html.dark .mir-domain-field-submit:hover:not(:disabled) { background: rgb(56 189 248); } @media (min-width: 640px) { .mir-domain-field-submit { width: auto; min-width: 9.5rem; } } .mir-domain-available-panel { border: 1px solid rgb(167 243 208); background: rgb(236 253 245); } .mir-domain-available-panel__domain, .mir-domain-available-panel__price { color: rgb(6 78 59); } .mir-domain-available-panel__message, .mir-domain-available-panel__breakdown { color: rgb(4 120 87); } .mir-domain-available-panel__footnote { color: rgb(6 95 70); } html.dark .mir-domain-available-panel { border-color: rgb(6 95 70 / 0.8); background: rgb(2 44 34 / 0.72); box-shadow: inset 0 0 0 1px rgb(6 95 70 / 0.35); } html.dark .mir-domain-available-panel__domain, html.dark .mir-domain-available-panel__price { color: rgb(110 231 183); } html.dark .mir-domain-available-panel__message, html.dark .mir-domain-available-panel__breakdown { color: rgb(52 211 153); } html.dark .mir-domain-available-panel__footnote { color: rgb(74 222 128); } /* Domain DNS setup — three-step registrar flow inside domain row */ .mir-domain-setup { border-top: 1px solid rgb(231 229 228); padding-top: 1.25rem; } .mir-domain-setup__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; } .mir-domain-setup__step { display: flex; flex-direction: column; gap: 1rem; } .mir-domain-setup__step + .mir-domain-setup__step { padding-top: 1.5rem; border-top: 1px solid rgb(231 229 228); } .mir-domain-setup__step-head { display: flex; gap: 0.875rem; align-items: flex-start; } .mir-domain-setup__step-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.75rem; background: rgb(224 242 254); color: rgb(3 105 161); font-size: 0.8125rem; font-weight: 600; line-height: 1; } .mir-domain-setup__step-title { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: rgb(28 25 23); } .mir-domain-setup__step-lead { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.55; color: rgb(87 83 78); } .mir-domain-setup__registrar { font-weight: 600; color: rgb(41 37 36); } .mir-domain-setup__records { display: grid; grid-template-columns: 1fr; gap: 0.875rem; padding-left: 2.625rem; } .mir-domain-setup__records--flush { padding-left: 0; } .mir-domain-record-card { min-width: 0; border: 1px solid rgb(231 229 228); border-radius: 0.75rem; background: rgb(255 255 255); padding: 0.875rem 1rem 1rem; } .mir-domain-record-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem; } .mir-domain-record-card__step { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(120 113 108); } .mir-domain-record-card__title { margin: 0.125rem 0 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: rgb(28 25 23); } .mir-domain-record-card__type { flex-shrink: 0; border-radius: 0.5rem; background: rgb(245 245 244); padding: 0.2rem 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: rgb(68 64 60); } .mir-domain-record-card__fields { display: flex; flex-direction: column; gap: 0.625rem; } .mir-domain-record-card__field { display: flex; flex-direction: column; gap: 0.3rem; } .mir-domain-record-card__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: rgb(120 113 108); } .mir-domain-record-card__value-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .mir-domain-record-card__value { display: block; min-width: 0; flex: 1; overflow-x: auto; white-space: nowrap; border-radius: 0.625rem; border: 1px solid rgb(231 229 228); background: rgb(250 250 249); padding: 0.5rem 0.625rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.6875rem; line-height: 1.45; color: rgb(41 37 36); } .mir-domain-record-card__copy { flex-shrink: 0; align-self: center; border-radius: 0.625rem; border: 1px solid rgb(214 211 209); background: rgb(255 255 255); padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 600; font-family: inherit; line-height: 1.25rem; color: rgb(3 105 161); cursor: pointer; } .mir-domain-record-card__copy:hover { background: rgb(240 249 255); border-color: rgb(186 230 253); } .mir-domain-record-card__ttl { margin: 0.75rem 0 0; font-size: 0.6875rem; color: rgb(120 113 108); } .mir-domain-setup__verify { min-width: 0; flex: 1; } .mir-domain-setup__verify-action { margin-top: 1rem; padding: 1rem; border-radius: 0.75rem; border: 1px solid rgb(254 243 199); background: rgb(255 251 235); } .mir-domain-setup__check-form { width: 100%; margin: 0; } .mir-domain-setup__check-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; border: 0; border-radius: 0.75rem; background: rgb(3 105 161); padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: rgb(255 255 255); cursor: pointer; } .mir-domain-setup__check-btn:hover { background: rgb(7 89 133); } .mir-domain-setup__verify-hint { margin: 0.625rem 0 0; font-size: 0.75rem; line-height: 1.45; color: rgb(146 64 14); } .mir-domain-setup__loading { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.25rem 0; } .mir-domain-setup__loading-title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: rgb(28 25 23); } .mir-domain-setup__loading-copy { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.5; color: rgb(87 83 78); } .mir-domain-setup--auto .mir-domain-setup__auto-copy { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-size: 0.875rem; line-height: 1.5; color: rgb(4 120 87); } .mir-domain-setup__error { margin: 1rem 0 0; border-radius: 0.75rem; border: 1px solid rgb(254 202 202); background: rgb(254 242 242); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.45; color: rgb(185 28 28); } html.dark .mir-domain-setup { border-top-color: rgb(51 65 85); } html.dark .mir-domain-setup__step + .mir-domain-setup__step { border-top-color: rgb(51 65 85); } html.dark .mir-domain-setup__step-num { background: rgb(8 47 73); color: rgb(125 211 252); } html.dark .mir-domain-setup__step-title { color: rgb(241 245 249); } html.dark .mir-domain-setup__step-lead { color: rgb(148 163 184); } html.dark .mir-domain-setup__registrar { color: rgb(226 232 240); } html.dark .mir-domain-record-card { border-color: rgb(51 65 85); background: rgb(15 23 42); } html.dark .mir-domain-record-card__step { color: rgb(100 116 139); } html.dark .mir-domain-record-card__title { color: rgb(241 245 249); } html.dark .mir-domain-record-card__type { background: rgb(30 41 59); color: rgb(203 213 225); } html.dark .mir-domain-record-card__label { color: rgb(100 116 139); } html.dark .mir-domain-record-card__value { border-color: rgb(51 65 85); background: rgb(2 6 23); color: rgb(226 232 240); } html.dark .mir-domain-record-card__copy { border-color: rgb(51 65 85); background: rgb(15 23 42); color: rgb(56 189 248); } html.dark .mir-domain-record-card__copy:hover { background: rgb(8 47 73); border-color: rgb(12 74 110); } html.dark .mir-domain-record-card__ttl { color: rgb(100 116 139); } html.dark .mir-domain-setup__verify-action { border-color: rgb(120 53 15 / 0.45); background: rgb(69 26 3 / 0.35); } html.dark .mir-domain-setup__check-btn { background: rgb(14 165 233); color: rgb(2 6 23); } html.dark .mir-domain-setup__check-btn:hover { background: rgb(56 189 248); } html.dark .mir-domain-setup__verify-hint { color: rgb(253 230 138); } html.dark .mir-domain-setup__loading-title { color: rgb(241 245 249); } html.dark .mir-domain-setup__loading-copy { color: rgb(148 163 184); } html.dark .mir-domain-setup--auto .mir-domain-setup__auto-copy { color: rgb(110 231 183); } html.dark .mir-domain-setup__error { border-color: rgb(127 29 29 / 0.5); background: rgb(69 10 10 / 0.35); color: rgb(252 165 165); } @media (prefers-reduced-motion: reduce) { .mir-domain-setup__step-num { transition: none; } } @media (max-width: 767px) { .mir-domain-setup__records { padding-left: 0; } .mir-domain-record-card__value-row { flex-direction: column; align-items: stretch; } .mir-domain-record-card__copy { align-self: flex-start; } } /* Dashboard site cards — quiet staggered entrance (see .mir-rise-list) */ .mir-dash-spark__bar { transition: height 0.35s ease-out; } @media (prefers-reduced-motion: reduce) { .mir-dash-spark__bar { transition: none; } } /* ── Floating site chat (site_chat_enabled add-on) ───────────────────────── */ .mir-site-chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; pointer-events: none; } .mir-site-chat__bubble, .mir-site-chat__panel { pointer-events: auto; } .mir-site-chat__bubble { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; border: none; background: rgb(3 105 161); color: white; box-shadow: 0 10px 25px -5px rgb(3 105 161 / 0.45), 0 4px 6px -4px rgb(15 23 42 / 0.2); cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease; } .mir-site-chat__bubble:hover { background: rgb(7 89 133); transform: translateY(-1px); } .mir-site-chat__bubble:focus-visible { outline: 2px solid rgb(56 189 248); outline-offset: 3px; } .mir-site-chat__panel { display: flex; flex-direction: column; width: min(24rem, calc(100vw - 2rem)); height: min(32rem, calc(100vh - 6rem)); overflow: hidden; border-radius: 1.25rem; border: 1px solid rgb(231 229 228); background: white; box-shadow: 0 25px 50px -12px rgb(15 23 42 / 0.25), 0 0 0 1px rgb(15 23 42 / 0.03); } .mir-site-chat--fullscreen .mir-site-chat__panel { position: fixed; inset: 0.75rem; width: auto; height: auto; max-width: none; border-radius: 1rem; } .mir-site-chat--open .mir-site-chat__bubble, .mir-site-chat--fullscreen .mir-site-chat__bubble { display: none; } .mir-site-chat__header { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid rgb(231 229 228); background: rgb(250 250 249); } .mir-site-chat__icon-btn, .mir-site-chat__text-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0.35rem 0.5rem; border-radius: 0.65rem; border: none; background: transparent; color: rgb(120 113 108); font-size: 0.75rem; font-weight: 500; cursor: pointer; } .mir-site-chat__icon-btn:hover, .mir-site-chat__text-btn:hover { background: rgb(231 229 228); color: rgb(28 25 23); } .mir-site-chat__turns { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; } .mir-site-chat__empty { margin: auto; max-width: 16rem; text-align: center; font-size: 0.875rem; line-height: 1.45; color: rgb(120 113 108); } .mir-site-chat__turns:has(.mir-chat-turn) .mir-site-chat__empty { display: none; } .mir-site-chat__composer { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem; border-top: 1px solid rgb(231 229 228); background: white; } .mir-site-chat__composer-actions { display: flex; align-items: center; gap: 0.35rem; } .mir-site-chat__attach-status { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: rgb(120 113 108); } .mir-site-chat__input { width: 100%; resize: none; border-radius: 0.85rem; border: 1px solid rgb(214 211 209); padding: 0.65rem 0.75rem; font-size: 0.875rem; line-height: 1.4; background: white; color: rgb(28 25 23); } .mir-site-chat__input:focus { outline: none; border-color: rgb(14 165 233); box-shadow: 0 0 0 3px rgb(14 165 233 / 0.15); } .mir-site-chat__send { margin-left: auto; border-radius: 0.75rem; border: none; background: rgb(3 105 161); color: white; font-size: 0.8125rem; font-weight: 550; padding: 0.45rem 0.9rem; cursor: pointer; } .mir-site-chat__send:hover { background: rgb(7 89 133); } .mir-chat-turn { display: flex; flex-direction: column; gap: 0.5rem; } .mir-chat-bubble { max-width: 92%; border-radius: 1rem; padding: 0.65rem 0.8rem; } .mir-chat-bubble--user { align-self: flex-end; background: rgb(3 105 161); color: white; border-radius: 1rem; border-bottom-right-radius: 0.375rem; } .mir-chat-bubble--assistant { align-self: flex-start; background: rgb(245 245 244); color: rgb(28 25 23); border-radius: 1rem; border-bottom-left-radius: 0.375rem; } .mir-chat-bubble__label { margin: 0 0 0.25rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; } .mir-chat-bubble__status { margin-left: 0.35rem; font-weight: 500; text-transform: uppercase; opacity: 0.7; } .mir-chat-bubble__body { margin: 0; white-space: pre-wrap; font-size: 0.875rem; line-height: 1.45; } .mir-chat-bubble__body--md { white-space: normal; } .mir-chat-bubble__body--md > *:first-child { margin-top: 0; } .mir-chat-bubble__body--md > *:last-child { margin-bottom: 0; } .mir-chat-bubble__body--md p, .mir-chat-bubble__body--md ul, .mir-chat-bubble__body--md ol, .mir-chat-bubble__body--md pre, .mir-chat-bubble__body--md blockquote { margin: 0.4em 0; } .mir-chat-bubble__body--md ul, .mir-chat-bubble__body--md ol { padding-left: 1.25rem; } .mir-chat-bubble__body--md code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8125rem; padding: 0.1em 0.3em; border-radius: 0.25rem; background: rgb(28 25 23 / 0.06); } .mir-chat-bubble__body--md pre { overflow-x: auto; padding: 0.6rem 0.75rem; border-radius: 0.75rem; background: rgb(28 25 23 / 0.06); } .mir-chat-bubble__body--md pre code { padding: 0; background: transparent; } html.dark .mir-chat-bubble__body--md code, html.dark .mir-chat-bubble__body--md pre { background: rgb(148 163 184 / 0.12); } .mir-chat-bubble__images { display: flex; flex-wrap: wrap; gap: 0.35rem; } .mir-chat-activity { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: rgb(87 83 78); font-style: italic; } html.dark .mir-chat-activity { color: rgb(168 162 158); } .mir-chat-tools { margin: 0 0 0.5rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; } .mir-chat-tools li { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 0.75rem; background: rgb(254 243 199); color: rgb(146 64 14); font-size: 0.7rem; padding: 0.2rem 0.55rem; } .mir-chat-tools__name { font-weight: 600; } .mir-chat-tools__path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.85; } html.dark .mir-site-chat__panel { border-color: rgb(30 41 59); background: rgb(15 23 42); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55); } html.dark .mir-site-chat__header { border-bottom-color: rgb(30 41 59); background: rgb(2 6 23 / 0.85); } html.dark .mir-site-chat__composer { border-top-color: rgb(30 41 59); background: rgb(15 23 42); } html.dark .mir-site-chat__attach-status { color: rgb(148 163 184); } html.dark .mir-site-chat__input { border-color: rgb(51 65 85); background: rgb(2 6 23); color: rgb(226 232 240); } html.dark .mir-site-chat__icon-btn, html.dark .mir-site-chat__text-btn { color: rgb(148 163 184); } html.dark .mir-site-chat__icon-btn:hover, html.dark .mir-site-chat__text-btn:hover { background: rgb(30 41 59); color: rgb(241 245 249); } html.dark .mir-chat-bubble--assistant { background: rgb(30 41 59); color: rgb(226 232 240); } html.dark .mir-site-chat__empty { color: rgb(148 163 184); } @media (max-width: 640px) { .mir-site-chat { right: 1rem; bottom: 1rem; } .mir-site-chat__panel { width: calc(100vw - 2rem); height: min(70vh, 32rem); } .mir-site-chat--fullscreen .mir-site-chat__panel { inset: 0; border-radius: 0; } } /* Activity day stamps — label + hairline between day groups */ .mir-activity-days { display: flex; flex-direction: column; gap: 2.75rem; } .mir-activity-day { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.25rem; } .mir-activity-day__label { flex-shrink: 0; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; color: rgb(120 113 108); /* stone-500 */ } html.dark .mir-activity-day__label { color: rgb(148 163 184); /* slate-400 */ } .mir-activity-day__rule { display: block; height: 1px; flex: 1 1 auto; min-width: 2rem; background: rgb(231 229 228); /* stone-200 */ } html.dark .mir-activity-day__rule { background: rgb(30 41 59); /* slate-800 */ } /* Activity timeline spine — vertical rail through day groups */ .mir-activity-spine { position: relative; list-style: none; margin: 0; padding: 0; } .mir-activity-spine__item { padding-bottom: 2.5rem; /* space between events */ } .mir-activity-spine__item:last-child { padding-bottom: 0; } .mir-activity-spine__body { display: flex; flex-direction: column; gap: 0.375rem; /* title/meta block → Show changes */ } .mir-activity-spine__copy { display: flex; flex-direction: column; gap: 0.125rem; /* title → MW · time — tight */ } .mir-activity-spine__copy p { margin: 0; } .mir-activity-spine__item:not(:last-child)::before { content: ""; position: absolute; left: 1.2rem; /* center of size-10 icon well */ top: 2.75rem; bottom: 0; width: 1px; background: rgb(231 229 228); /* stone-200 */ } html.dark .mir-activity-spine__item:not(:last-child)::before { background: rgb(30 41 59); /* slate-800 */ } .mir-activity-spine__band { position: relative; } .mir-activity-spine__band:not(:last-child)::before { content: ""; position: absolute; left: 1.2rem; top: 1.25rem; bottom: 0; width: 1px; background: rgb(231 229 228); } html.dark .mir-activity-spine__band:not(:last-child)::before { background: rgb(30 41 59); } .mir-activity-spine__dot { display: block; width: 0.5rem; height: 0.5rem; margin-left: 0.95rem; margin-right: 0.25rem; border-radius: 9999px; background: rgb(214 211 209); /* stone-300 */ } html.dark .mir-activity-spine__dot { background: rgb(51 65 85); /* slate-700 */ } .mir-activity-icon { display: inline-flex; width: 2.5rem; height: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgb(214 211 209); /* stone-300 */ } .mir-activity-icon svg[data-slot="icon"] { width: 1.35rem; height: 1.35rem; stroke-width: 2; } .mir-activity-icon--action { background: rgb(224 242 254); /* sky-100 */ color: rgb(7 89 133); /* sky-800 */ box-shadow: inset 0 0 0 1px rgb(186 230 253); /* sky-200 */ } .mir-activity-icon--assist { background: rgb(224 242 254); color: rgb(3 105 161); /* sky-700 */ box-shadow: inset 0 0 0 1px rgb(186 230 253); } .mir-activity-icon--success { background: rgb(209 250 229); /* emerald-100 */ color: rgb(6 95 70); /* emerald-800 */ box-shadow: inset 0 0 0 1px rgb(167 243 208); /* emerald-200 */ } .mir-activity-icon--caution { background: rgb(254 243 199); /* amber-100 */ color: rgb(120 53 15); /* amber-900 */ box-shadow: inset 0 0 0 1px rgb(253 230 138); /* amber-200 */ } .mir-activity-icon--danger { background: rgb(255 228 230); /* rose-100 */ color: rgb(190 18 60); /* rose-700 */ box-shadow: inset 0 0 0 1px rgb(254 205 211); /* rose-200 */ } .mir-activity-icon--neutral { background: rgb(231 229 228); /* stone-200 */ color: rgb(41 37 36); /* stone-800 */ box-shadow: inset 0 0 0 1px rgb(214 211 209); /* stone-300 */ } html.dark .mir-activity-icon--action, html.dark .mir-activity-icon--assist { background: rgb(8 47 73); /* sky-950 */ color: rgb(125 211 252); /* sky-300 */ box-shadow: inset 0 0 0 1px rgb(7 89 133); /* sky-800 */ } html.dark .mir-activity-icon--success { background: rgb(2 44 34); /* emerald-950 */ color: rgb(110 231 183); /* emerald-300 */ box-shadow: inset 0 0 0 1px rgb(6 95 70); /* emerald-800 */ } html.dark .mir-activity-icon--caution { background: rgb(69 26 3); /* amber-950 */ color: rgb(253 230 138); /* amber-200 */ box-shadow: inset 0 0 0 1px rgb(146 64 14); /* amber-800 */ } html.dark .mir-activity-icon--danger { background: rgb(76 5 25); /* rose-950 */ color: rgb(253 164 175); /* rose-300 */ box-shadow: inset 0 0 0 1px rgb(159 18 57); /* rose-800 */ } html.dark .mir-activity-icon--neutral { background: rgb(30 41 59); /* slate-800 */ color: rgb(226 232 240); /* slate-200 */ box-shadow: inset 0 0 0 1px rgb(51 65 85); /* slate-700 */ } .mir-activity-details__summary { list-style: none; } .mir-activity-details__summary::-webkit-details-marker { display: none; } .mir-activity-details__panel { background: rgb(250 250 249); /* stone-50 */ border-color: rgb(231 229 228); /* stone-200 */ } html.dark .mir-activity-details__panel { background: rgb(15 23 42); /* slate-900 */ border-color: rgb(30 41 59); /* slate-800 */ } .mir-activity-diff { overflow: hidden; border-radius: 1rem; /* rounded-2xl */ } .mir-activity-diff__body { overflow-x: auto; background: rgb(250 250 249); /* stone-50 */ } html.dark .mir-activity-diff__body { background: rgb(2 6 23); /* slate-950 */ } .mir-activity-diff__line { display: flex; gap: 0.5rem; padding: 0.05rem 0.75rem; white-space: pre-wrap; word-break: break-word; } .mir-activity-diff__gutter { flex-shrink: 0; width: 0.75rem; text-align: center; user-select: none; opacity: 0.7; } .mir-activity-diff__line--add { background: rgb(220 252 231); /* emerald-100 */ color: rgb(6 95 70); /* emerald-800 */ } .mir-activity-diff__line--del { background: rgb(255 228 230); /* rose-100 */ color: rgb(159 18 57); /* rose-800 */ } .mir-activity-diff__line--eq { color: rgb(87 83 78); /* stone-600 */ } .mir-activity-diff__line--info { color: rgb(120 113 108); /* stone-500 */ font-style: italic; } html.dark .mir-activity-diff__line--add { background: rgb(2 44 34 / 0.7); /* emerald-950 */ color: rgb(167 243 208); /* emerald-200 */ } html.dark .mir-activity-diff__line--del { background: rgb(76 5 25 / 0.7); /* rose-950 */ color: rgb(254 205 211); /* rose-200 */ } html.dark .mir-activity-diff__line--eq { color: rgb(148 163 184); /* slate-400 */ } html.dark .mir-activity-diff__line--info { color: rgb(100 116 139); /* slate-500 */ } /* Public schedule picker (standalone Calendly-style booking) */ .mir-schedule-shell { background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgb(224 242 254 / 0.55), transparent 55%), linear-gradient(180deg, rgb(245 245 244), rgb(231 229 228)); } html.dark .mir-schedule-shell { background-image: none; } .mir-schedule-stage-enter { animation: mir-auth-rise 0.35s ease-out both; } @media (prefers-reduced-motion: reduce) { .mir-schedule-stage-enter, .mir-schedule-glow { animation: none !important; } } /* Generic tab strip (e.g. Domains / Blocked senders on the Inbox Domains page) */ .mir-tabs { display: inline-flex; gap: 0.25rem; border-radius: 0.85rem; background: rgb(245 245 244); padding: 0.25rem; } html.dark .mir-tabs { background: rgb(15 23 42 / 0.6); } .mir-tabs__tab { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 0.65rem; border: 0; background: transparent; padding: 0.5rem 0.9rem; font-size: 0.8125rem; font-weight: 500; color: rgb(87 83 78); cursor: pointer; } .mir-tabs__tab:hover { color: rgb(28 25 23); } .mir-tabs__tab--active { background: white; color: rgb(3 105 161); box-shadow: 0 1px 2px rgb(28 25 23 / 0.06); } html.dark .mir-tabs__tab { color: rgb(148 163 184); } html.dark .mir-tabs__tab:hover { color: rgb(241 245 249); } html.dark .mir-tabs__tab--active { background: rgb(30 41 59); color: rgb(56 189 248); } /* Block-sender fire control + transparent flame overlay */ .mir-block-fire-btn:hover svg[data-slot="icon"] { transform: translateY(-0.5px) scale(1.06); transition: transform 0.2s ease; } .mir-block-fire-btn svg[data-slot="icon"] { transition: transform 0.2s ease; } /* Rise → settle → slow jitter → fade. translateY stays >= 0 (base never above card bottom). */ @keyframes mir-burn-sheet { 0% { opacity: 1; transform: translate3d(0, 110%, 0); } 16% { opacity: 1; transform: translate3d(0, 0%, 0); } 26% { opacity: 1; transform: translate3d(0, 14%, 0); } 40% { opacity: 1; transform: translate3d(0, 0%, 0); } 54% { opacity: 1; transform: translate3d(0, 12%, 0); } 68% { opacity: 1; transform: translate3d(0, 0%, 0); } 80% { opacity: 1; transform: translate3d(0, 8%, 0); } 100% { opacity: 0; transform: translate3d(0, 24%, 0); } } .mir-burn__stage { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; border-radius: inherit; } .mir-burn__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; width: 100%; aspect-ratio: 1024 / 148; max-height: 100%; background-position: center bottom; background-repeat: no-repeat; background-size: 100% 100%; animation: mir-burn-sheet 1.55s cubic-bezier(0.4, 0.05, 0.2, 1) both; } @media (prefers-reduced-motion: reduce) { .mir-burn__stage { display: none; } }