/* Idea Design studio (extracted from main.css) */

/* --- Design studio --- */
.design-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--navbar-height) - 48px);
    min-height: 620px;
    overflow: hidden;
}

.design-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-shrink: 0;
    padding-bottom: 18px;
}

.design-title-row,
.design-workspace-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.design-title-row h1 {
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -0.35px;
}

.design-page-header > div > p {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 14px;
}

.design-spark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    font-size: 15px;
}

.design-beta-badge {
    padding: 2px 7px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.design-mobile-session-picker {
    display: none;
    position: relative;
    z-index: 30;
    flex-shrink: 0;
}

.design-mobile-picker-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 40px;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 650;
    text-align: left;
}

.design-mobile-picker-trigger:hover,
.design-mobile-picker-trigger:focus-visible {
    border-color: var(--text-muted);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-mobile-picker-trigger:focus-visible,
.design-mobile-picker-link:focus-visible,
.design-mobile-picker-state button:focus-visible,
.design-mobile-picker-refresh-error button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.design-mobile-picker-label {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 14px;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.design-mobile-picker-current {
    overflow: hidden;
    min-width: 0;
    flex: 1;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-mobile-picker-chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform var(--transition-speed);
}

.design-mobile-picker-chevron.open {
    transform: rotate(180deg);
}

.design-mobile-picker-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 31;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-secondary);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.design-mobile-picker-links {
    display: flex;
    max-height: min(280px, 42dvh);
    padding: 5px;
    flex-direction: column;
    gap: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.design-mobile-picker-link {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 38px;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 14px;
}

.design-mobile-picker-link:hover,
.design-mobile-picker-link:focus-visible {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-mobile-picker-link.active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--text-primary);
}

.design-mobile-picker-link > span:last-child {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-mobile-picker-link.active .design-nav-session-dot {
    background: var(--accent);
    opacity: 1;
}

.design-mobile-picker-state,
.design-mobile-picker-refresh-error {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 8px;
    padding: 9px 11px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.35;
}

.design-mobile-picker-state.error,
.design-mobile-picker-refresh-error {
    color: var(--danger);
}

.design-mobile-picker-state > span:not(.design-nav-spinner),
.design-mobile-picker-refresh-error > span {
    overflow: hidden;
    min-width: 0;
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-mobile-picker-state button,
.design-mobile-picker-refresh-error button {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
}

.design-mobile-picker-state button:hover,
.design-mobile-picker-refresh-error button:hover {
    text-decoration: underline;
}

.design-mobile-picker-refresh-error {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.design-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.design-workbench-home {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.design-workbench-home .design-main-panel {
    display: flex;
    background: transparent;
}

.design-new-session-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.design-new-session-form label {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
}

.design-new-session-form input {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
}

.design-new-session-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.design-new-session-form input::placeholder,
.design-prompt-box textarea::placeholder {
    color: var(--text-muted);
}

.design-new-session-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 3px;
}

.design-new-session-actions .btn-primary {
    height: 34px;
    padding: 0 14px;
    font-size: 14px;
}

.design-new-session-actions .design-quiet-button {
    min-height: 34px;
}

.design-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 7, 18, 0.68);
    backdrop-filter: blur(4px);
}

.design-new-session-modal {
    width: min(430px, 100%);
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.design-new-session-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

.design-new-session-header h2 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.15px;
}

.design-new-session-header p {
    max-width: 330px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.design-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
}

.design-modal-close:hover:not(:disabled) {
    border-color: var(--border);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-modal-close:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.design-quiet-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 650;
    transition: border-color 150ms, background 150ms, color 150ms;
}

.design-quiet-button:hover {
    border-color: var(--text-muted);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-main-panel {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-primary);
}

.design-welcome,
.design-center-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
    flex-direction: column;
    color: var(--text-muted);
    text-align: center;
}

.design-welcome {
    max-width: 510px;
    margin: 0 auto;
    padding: 40px 24px;
}

.design-welcome.design-chat-home {
    width: var(--design-home-content-width);
    max-width: 760px;
    flex: 1;
    padding: 48px var(--design-home-content-gutter);
}

.design-welcome-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 16px;
    background: radial-gradient(circle at 35% 25%, rgba(96, 165, 250, 0.28), rgba(139, 92, 246, 0.1));
    box-shadow: 0 14px 34px rgba(79, 70, 229, 0.12);
    color: #c4b5fd;
    font-size: 25px;
}

.design-eyebrow {
    margin-bottom: 8px;
    color: #8b5cf6;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.design-welcome h2 {
    color: var(--text-primary);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 750;
    letter-spacing: -0.8px;
}

.design-chat-home h2 {
    margin-bottom: 34px;
    font-weight: 600;
}

.design-welcome > p {
    max-width: 450px;
    margin: 10px 0 22px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.65;
}

.design-chat-home > p {
    max-width: 560px;
    margin-bottom: 16px;
}

.design-capabilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: 34px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.design-capabilities span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 8px;
    color: var(--text-muted);
    font-size: 14px;
}

.design-capabilities span + span {
    border-left: 1px solid var(--border);
}

.design-capabilities b {
    color: var(--text-primary);
    font-size: 14px;
}

.design-center-state {
    gap: 8px;
    padding: 24px;
}

.design-center-state strong {
    color: var(--text-primary);
    font-size: 14px;
}

.design-center-state p {
    max-width: 430px;
    color: var(--text-muted);
    font-size: 14px;
}

.design-center-state.error strong,
.design-center-state.error p {
    color: var(--danger);
}

.design-center-state.compact {
    min-height: 190px;
}

.design-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    font-weight: 800;
}

.design-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: design-spin 0.75s linear infinite;
}

.design-spinner.large {
    width: 22px;
    height: 22px;
}

@keyframes design-spin {
    to { transform: rotate(360deg); }
}

.design-workspace {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
}

.design-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 10px 15px 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.design-workspace-title h2 {
    overflow: hidden;
    max-width: min(38vw, 480px);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-workspace-title > span:last-child {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 650;
    text-transform: capitalize;
}

.design-status-dot {
    width: 6px;
    height: 6px;
    margin-left: 3px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.design-workspace-header > div:first-child > p {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 14px;
}

.design-workspace-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.design-chat-panel,
.design-artifact-panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.design-chat-panel {
    /* The splitter occupies 32px, so subtract half at the 50:50 default. */
    flex: 0 0 calc(50% - 16px);
    background: var(--bg-primary);
}

.design-workspace-body.chat-only .design-chat-panel {
    flex: 1 1 100%;
    border: 0;
}

.design-workspace-body.chat-only .design-artifact-panel {
    display: none;
}

.design-splitter {
    --design-splitter-right-bg: #0b0d12;
    position: relative;
    z-index: 6;
    width: 32px;
    flex: 0 0 32px;
    cursor: col-resize;
    touch-action: none;
    background: linear-gradient(
        to right,
        var(--bg-secondary) 0 50%,
        var(--design-splitter-right-bg) 50% 100%
    );
}

.design-workspace-body.has-build .design-splitter {
    --design-splitter-right-bg: var(--bg-primary);
    background: var(--bg-primary);
}

.design-splitter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 1px;
    background: var(--border);
    transition: width 120ms ease, left 120ms ease, background 120ms ease;
}

.design-splitter:hover::before,
.design-splitter:focus-visible::before,
.design-splitter.dragging::before {
    left: 14px;
    width: 3px;
    background: var(--accent);
}

.design-splitter:focus-visible {
    outline: none;
}

.design-panel-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 39px;
    padding: 0 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.design-panel-label small {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 550;
    letter-spacing: 0;
    text-transform: none;
}

.design-message-list {
    flex: 1;
    min-height: 0;
    padding: 26px 18px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.design-chat-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 28px;
    flex-direction: column;
    color: var(--text-muted);
    text-align: center;
}

.design-chat-empty > span {
    margin-bottom: 10px;
    color: #a78bfa;
    font-size: 19px;
}

.design-chat-empty strong {
    color: var(--text-primary);
    font-size: 14px;
}

.design-chat-empty p {
    max-width: 260px;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.55;
}

.design-messages {
    display: flex;
    width: var(--msg-thread-max-width);
    margin: 0 auto;
    flex-direction: column;
    gap: var(--msg-thread-gap);
    padding: 0;
}

.design-message {
    --design-message-copy-font-size: 15px;
    display: flex;
    gap: 0;
    padding: 0;
    border-radius: 0;
}

.design-message.assistant {
    background: transparent;
}

.design-message-avatar {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 750;
}

.design-message.assistant .design-message-avatar {
    border-color: rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
}

.design-message-body {
    flex: 0 1 auto;
    min-width: 0;
    width: fit-content;
    max-width: var(--msg-max-width);
}

.design-message-meta {
    display: none;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.design-message-meta strong {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}

.design-message-meta time {
    overflow: hidden;
    max-width: 120px;
    color: var(--text-muted);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-message.user {
    justify-content: flex-end;
}

.design-message.user .design-message-body {
    width: fit-content;
    max-width: var(--msg-max-width);
    padding: var(--msg-user-padding);
    border: 1px solid var(--msg-user-border);
    border-radius: var(--msg-user-radius);
    background: var(--msg-user-bg);
    color: var(--msg-user-fg);
}

.design-message.assistant .design-message-body {
    width: fit-content;
    max-width: var(--msg-max-width);
    color: var(--msg-ai-fg);
}

.design-message.user.pending.failed .design-message-meta {
    display: flex;
    justify-content: flex-end;
}

.design-message.user.pending.failed .design-message-meta strong {
    display: none;
}

/* Landing first-turn shell reuses .design-workspace / .chat-only so the
   composer and bubble already match the post-navigate geometry. */
.design-welcome-session-shell {
    width: 100%;
}

.design-pending-messages {
    padding-top: 0;
}

.design-message.pending {
    /* Keep pending readable: only slight fade, not low-contrast washout. */
    opacity: 0.92;
}

.design-message.pending.failed {
    opacity: 1;
}

.design-message.assistant.streaming,
.design-message.assistant.partial {
    opacity: 1;
}

.design-message.assistant.streaming .design-streaming-copy::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -0.12em;
    background: var(--accent);
    animation: design-stream-caret 0.9s steps(1) infinite;
}

@keyframes design-stream-caret {
    50% { opacity: 0; }
}

.design-thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
}

.design-thinking-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: design-thinking-dot 1.1s ease-in-out infinite;
}

.design-thinking-dots i:nth-child(2) { animation-delay: 0.14s; }
.design-thinking-dots i:nth-child(3) { animation-delay: 0.28s; }

@keyframes design-thinking-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-3px); opacity: 1; }
}

.design-pending-state {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.design-pending-state-sr-only {
    /* Keep lifecycle updates available to assistive technology without
       restoring the visual status copy beside each optimistic message. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.design-message.pending.failed .design-pending-state {
    color: var(--danger);
}

.design-message-body p {
    color: inherit;
    font-size: var(--design-message-copy-font-size);
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.design-message.user .design-message-body p {
    color: var(--msg-user-fg);
}

.design-message.assistant .design-message-body p {
    color: var(--msg-ai-fg);
}

.design-message-markdown {
    color: var(--msg-ai-fg);
    font-size: var(--design-message-copy-font-size);
    line-height: 1.55;
    overflow-x: auto;
    overflow-wrap: anywhere;
}

.design-message-markdown > :first-child {
    margin-top: 0;
}

.design-message-markdown > :last-child {
    margin-bottom: 0;
}

.design-message-markdown p,
.design-message-markdown ul,
.design-message-markdown ol,
.design-message-markdown pre,
.design-message-markdown blockquote {
    margin: 0 0 8px;
    white-space: normal;
}

.design-message-markdown blockquote {
    color: var(--msg-ai-muted);
    border-left: 3px solid var(--border);
    padding-left: 12px;
}

.design-message-markdown ul,
.design-message-markdown ol {
    padding-left: 20px;
}

.design-message-markdown a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.design-message-markdown strong {
    color: var(--msg-ai-fg);
    font-weight: 650;
}

.design-message-markdown code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.design-message-markdown pre {
    overflow-x: auto;
    padding: 9px 10px;
    border-radius: 8px;
    background: var(--bg-primary);
}

.design-message-markdown pre code {
    padding: 0;
    background: transparent;
}

.design-message-markdown table {
    width: max-content;
    max-width: 100%;
    border-collapse: collapse;
}

.design-message-markdown th,
.design-message-markdown td {
    padding: 5px 7px;
    border: 1px solid var(--border);
    text-align: left;
}

.design-message-markdown img {
    max-width: 100%;
}

.design-message-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    margin-top: 7px;
}

.design-message-action {
    display: inline-grid;
    width: 28px;
    height: 28px;
    padding: 5px;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.design-message-action svg {
    width: 18px;
    height: 18px;
}

.design-message-action:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.design-message-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.design-message-action-notice {
    margin-right: 3px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
}

.design-message-body > p,
.design-message-markdown {
    font-size: var(--design-message-copy-font-size);
    line-height: 1.7;
}

.design-message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.design-message-attachment {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: 4px;
    padding: 4px 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-muted);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-message-image {
    display: block;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-primary);
}

.design-message-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 140ms ease;
}

.design-message-image:hover img {
    transform: scale(1.04);
}

.design-pending-image {
    cursor: default;
    opacity: 0.92;
}

.design-pending-image:hover img {
    transform: none;
}

.design-composer {
    flex-shrink: 0;
    padding: 9px 10px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

.design-workspace-body.chat-only .design-composer {
    width: min(780px, calc(100% - 36px));
    margin: 8px auto 20px;
    padding: 0;
    border-top: 0;
    background: transparent;
}

.design-workspace-body.chat-only .design-prompt-box {
    border-radius: 22px;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.14);
}

.design-workspace-body.chat-only .design-prompt-box textarea {
    min-height: 52px;
    padding: 14px 50px 12px;
    resize: none;
    font-size: 14px;
}

.design-home-composer {
    width: 100%;
    margin-top: 4px;
    padding: 0;
    border-top: 0;
    background: transparent;
    text-align: left;
}

.design-home-composer .design-prompt-box {
    border-radius: 20px;
    background: var(--bg-secondary);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.design-home-composer .design-prompt-box:focus-within {
    border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.09),
                0 20px 56px rgba(0, 0, 0, 0.2);
}

.design-home-composer .design-prompt-box textarea {
    min-height: 54px;
    max-height: 260px;
    padding: 15px 52px 12px;
    resize: none;
    font-size: 15px;
    line-height: 1.55;
}

.design-home-composer .design-upload-preview-row {
    padding-right: 18px;
    padding-left: 18px;
}

.design-home-composer .design-prompt-footer {
    min-height: 46px;
    padding: 0 12px 10px 14px;
}

.design-home-composer .design-prompt-footer > span {
    font-size: 14px;
}

.design-home-composer .design-attach-button {
    width: 34px;
    height: 34px;
}

.design-home-composer .design-send-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
}

.design-home-composer > .design-inline-error,
.design-home-composer > .design-attachment-status {
    padding: 0 5px;
    text-align: left;
}

.design-prompt-box {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-primary);
    transition: border-color 150ms, box-shadow 150ms;
}

.design-prompt-box.drag-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.design-drop-overlay {
    position: absolute;
    inset: 5px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px dashed color-mix(in srgb, var(--accent) 72%, var(--border));
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--accent));
    color: var(--text-primary);
    font-size: 14px;
    pointer-events: none;
}

.design-drop-overlay span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 17px;
}

.design-prompt-box:focus-within {
    border-color: rgba(59, 130, 246, 0.65);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08);
}

.design-prompt-box textarea {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-height: 52px;
    max-height: 150px;
    resize: none;
    padding: 14px 50px 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    field-sizing: content;
}

.design-file-input {
    display: none;
}

.design-upload-preview-row {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 7px;
    padding: 2px 9px 7px;
    overflow-x: auto;
}

.design-upload-preview {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.design-upload-preview img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.design-upload-preview button {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1;
}

.design-upload-preview button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.design-prompt-footer {
    display: contents;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 0 6px 5px 10px;
}

.design-prompt-footer > span {
    display: none;
}

.design-attach-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    border-radius: 50%;
    color: var(--text-muted);
}

.design-attach-button:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-send-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    z-index: 2;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
}

.design-send-button:hover:not(:disabled) {
    background: var(--accent-hover);
}

.design-send-button:disabled,
.design-attach-button:disabled,
.design-new-session-form button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.design-inline-error {
    margin-top: 6px;
    color: var(--danger);
    font-size: 14px;
    line-height: 1.4;
}

.design-artifact-panel {
    flex: 1 1 0;
    background: #0b0d12;
}

.design-artifact-panel-hidden {
    display: none !important;
}

.design-project-build-panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
    overflow: hidden;
    background: var(--bg-primary);
}

.design-project-build-state {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 280px;
    gap: 10px;
    padding: 32px;
    flex-direction: column;
    color: var(--text-secondary);
    text-align: center;
}

.design-project-build-state strong {
    color: var(--text-primary);
    font-size: 15px;
}

.design-project-build-state p {
    max-width: 460px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.design-project-build-state.error strong {
    color: var(--danger);
}

.design-project-build-state .btn-primary {
    min-width: 92px;
    margin-top: 5px;
}

.design-embedded-project-workspace {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.design-embedded-project-workspace > .embedded-project-workspace {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* The Idea Design page already owns the conversation column and surrounding
   shell. Embed only the mode-specific panel from the Project detail view. */
.embedded-project-workspace > .project-detail-header,
.embedded-project-workspace > .new-repo-banner,
.embedded-project-workspace > #tour-pipeline-strip,
.embedded-project-workspace > .deploy-credit-banner {
    display: none !important;
}

.embedded-project-workspace > .split-layout {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: row;
    overflow: hidden;
}

.embedded-project-workspace > .split-layout > .left-panel {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    background: var(--bg-primary);
}

.design-embedded-build-chat {
    display: block;
    min-width: 0;
    min-height: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    overflow: visible;
    background: transparent;
}

.design-embedded-build-chat > .embedded-build-chat-panel {
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    background: transparent;
}

.design-embedded-build-chat .chat-messages {
    min-height: 0;
    padding: 0;
    overflow: visible;
}

[data-theme="light"] .design-artifact-panel {
    background: #eceef2;
}

[data-theme="light"] .design-splitter {
    --design-splitter-right-bg: #eceef2;
}

.design-build-mode-page {
    z-index: 1120;
}

.design-build-mode-modal .new-project-mode-header p {
    max-width: 560px;
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
}

.design-build-mode-card:disabled {
    cursor: wait;
    opacity: 0.64;
}

.design-build-mode-error {
    margin-top: 18px;
}

.design-build-mode-progress {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 34px;
    gap: 8px;
    margin-top: 18px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 650;
}

.design-artifact-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 39px;
    padding: 0 11px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.design-artifact-navigation {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 13px;
}

.design-attachment-status {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 14px;
}

.design-artifact-tabs {
    display: flex;
    align-items: stretch;
    gap: 13px;
}

.design-artifact-tabs button {
    position: relative;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.design-artifact-tabs button:hover,
.design-artifact-tabs button.active {
    color: var(--text-primary);
}

.design-artifact-tabs button.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--accent);
}

.design-artifact-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.design-history-control {
    position: relative;
    display: flex;
    align-items: center;
}

.design-history-button {
    position: relative;
    z-index: 159;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 5px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 650;
}

.design-history-button:hover,
.design-history-button[aria-expanded="true"] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-version-history {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 160;
    display: flex;
    width: 150px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
    flex-direction: column;
    gap: 2px;
}

.design-history-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 8px;
    border-radius: 5px;
    color: var(--text-muted);
    font-size: 14px;
}

.design-history-option:hover,
.design-history-option.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-history-option span {
    color: #a78bfa;
    font-size: 14px;
    font-weight: 800;
}

.design-export-control {
    position: relative;
    flex-shrink: 0;
}

.design-export-dismiss {
    position: fixed;
    inset: 0;
    z-index: 158;
    background: transparent;
}

.design-export-button {
    position: relative;
    z-index: 159;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 26px;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
    color: #93c5fd;
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
    transition: border-color 140ms, background 140ms, color 140ms, opacity 140ms;
}

.design-export-button:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 75%, var(--border));
    background: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary));
    color: #dbeafe;
}

.design-export-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, white);
    outline-offset: 2px;
}

.design-export-button:disabled {
    cursor: wait;
    opacity: 0.58;
}

.design-export-icon {
    font-size: 14px;
    line-height: 1;
}

.design-export-chevron {
    margin-left: 1px;
    color: currentColor;
    font-size: 14px;
    line-height: 1;
    opacity: 0.72;
    transition: transform 140ms ease;
}

.design-export-button[aria-expanded="true"] .design-export-chevron {
    transform: rotate(180deg);
}

.design-export-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 160;
    display: flex;
    width: 190px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-secondary);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.36);
    flex-direction: column;
    gap: 2px;
}

.design-export-option {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 8px 9px;
    border-radius: 6px;
    color: var(--text-secondary);
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

.design-export-option:hover:not(:disabled),
.design-export-option:focus-visible {
    outline: none;
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-export-option strong {
    color: inherit;
    font-size: 14px;
    font-weight: 750;
}

.design-export-option span {
    color: var(--text-muted);
    font-size: 14px;
}

.design-export-option:disabled {
    cursor: wait;
    opacity: 0.5;
}

.design-export-error {
    margin: 0;
    padding: 6px 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
    background: color-mix(in srgb, var(--danger) 7%, var(--bg-secondary));
    color: var(--danger);
    font-size: 14px;
    line-height: 1.4;
}

.design-artifact-stage {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 14px;
}

.design-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 300px;
    flex-direction: column;
    border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 9px;
    color: var(--text-muted);
    text-align: center;
}

.design-preview-empty strong {
    color: var(--text-secondary);
    font-size: 14px;
}

.design-preview-empty p {
    max-width: 320px;
    margin-top: 5px;
    padding: 0 18px;
    font-size: 14px;
}

.design-preview-illustration {
    position: relative;
    width: 88px;
    height: 61px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-secondary);
    box-shadow: 7px 7px 0 rgba(139, 92, 246, 0.06);
}

.design-preview-illustration::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.design-preview-illustration span {
    position: absolute;
    top: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}

.design-preview-illustration span:nth-child(1) { left: 6px; background: #ef4444; }
.design-preview-illustration span:nth-child(2) { left: 13px; background: #f59e0b; }
.design-preview-illustration span:nth-child(3) { left: 20px; background: #22c55e; }

.design-html-preview,
.design-pdf-preview {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.design-image-preview {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 12px;
}

.design-image-preview img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.26);
    object-fit: contain;
}

.design-code-view {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #080a0f;
    color: #cbd5e1;
    tab-size: 2;
    white-space: pre;
}

.design-code-view code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    line-height: 1.6;
}

[data-theme="light"] .design-code-view {
    background: #111827;
    color: #e5e7eb;
}

@media (max-width: 1180px) {
    .design-artifact-toolbar {
        min-height: 44px;
        padding: 4px 8px;
        flex-wrap: wrap;
        row-gap: 3px;
    }

    .design-artifact-navigation {
        min-width: 0;
        flex: 1 1 auto;
    }

    .design-artifact-toolbar > .design-session-header-actions {
        max-width: 100%;
        flex-wrap: wrap;
    }
}

/* Tablet and zoomed desktop: stack workbench + chat/artifact like projects
   (<=1024). Side-by-side split remains only above this breakpoint. */
@media (max-width: 1024px) {
    .design-page {
        height: auto;
        min-height: calc(100dvh - var(--navbar-height) - 48px);
        overflow: visible;
    }

    .design-workbench {
        display: flex;
        min-height: 720px;
        flex-direction: column;
        overflow: visible;
    }

    .design-main-panel {
        min-height: 660px;
    }

    .design-workspace-body {
        display: flex;
        min-height: 600px;
        flex-direction: column;
        overflow: visible;
    }

    .design-chat-panel {
        flex: none !important;
        flex-basis: auto !important;
        width: 100%;
        min-width: 0;
        min-height: 460px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .design-splitter {
        display: none;
    }

    .design-message-list {
        min-height: 230px;
        max-height: 360px;
    }

    .design-workspace-body.chat-only .design-message-list {
        max-height: none;
    }

    .design-artifact-panel,
    .design-project-build-panel {
        width: 100%;
        min-width: 0;
        min-height: 520px;
    }

    .design-project-build-panel {
        min-height: 560px;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    :root {
        --design-home-content-gutter: 4px;
    }

    .design-page {
        min-height: 0;
        /* Leave room for mobile bottom nav so the composer is not covered. */
        padding-bottom: 0;
    }

    .design-page-header {
        align-items: center;
        padding-bottom: 13px;
    }

    .design-title-row h1 {
        font-size: 19px;
    }

    .design-spark {
        width: 24px;
        height: 24px;
    }

    .design-page-header > div > p {
        display: none;
    }

    .design-mobile-session-picker {
        display: block;
        margin-bottom: 10px;
    }

    .design-workbench {
        min-height: 780px;
        border-radius: 10px;
    }

    .design-workbench-home {
        min-height: calc(100dvh - var(--navbar-height) - 150px);
        border-radius: 0;
    }

    .design-welcome.design-chat-home {
        padding: 36px var(--design-home-content-gutter);
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .design-chat-home h2 {
        font-size: clamp(23px, 7vw, 30px);
    }

    .design-home-composer .design-prompt-box {
        border-radius: 17px;
    }

    .design-home-composer .design-prompt-box textarea {
        min-height: 96px;
        padding: 15px 15px 7px;
        font-size: 14px;
    }

    .design-home-composer .design-prompt-footer > span {
        display: none;
    }

    .design-main-panel {
        min-height: 710px;
    }

    .design-workbench-home .design-main-panel {
        min-height: max(420px, calc(100dvh - var(--navbar-height) - 150px));
    }

    .design-workspace-header {
        align-items: flex-start;
        min-height: auto;
        flex-direction: column;
    }

    .design-workspace-title h2 {
        max-width: min(65vw, 100%);
        overflow-wrap: anywhere;
    }

    .design-messages {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .design-message-body {
        max-width: var(--msg-max-width);
    }

    .design-workspace-body.chat-only .design-composer {
        width: min(780px, calc(100% - 20px));
        margin-bottom: 12px;
    }

    .design-composer {
        padding: 8px 10px max(10px, env(safe-area-inset-bottom));
    }

    .design-artifact-toolbar {
        min-height: 44px;
        padding: 4px 8px;
        flex-wrap: wrap;
        row-gap: 3px;
    }

    .design-artifact-navigation {
        min-width: 0;
        flex: 1 1 auto;
        gap: 6px;
    }

    .design-artifact-actions {
        margin-left: auto;
        gap: 5px;
    }

    .design-export-button {
        min-width: 76px;
        padding: 0 6px;
    }

    .design-export-menu {
        width: min(190px, calc(100% - 32px));
    }

    .design-artifact-stage {
        min-height: 470px;
        padding: 9px;
    }

    .design-html-preview,
    .design-pdf-preview {
        min-height: 450px;
    }

    .design-modal-backdrop {
        align-items: flex-start;
        padding: max(16px, env(safe-area-inset-top)) 12px 16px;
        overflow-y: auto;
    }

    .design-new-session-modal {
        margin-top: 8vh;
        padding: 16px;
        max-width: calc(100% - 24px);
        box-sizing: border-box;
    }
}

/* Phone portrait (~390): kill residual horizontal scroll and keep bubbles readable. */
@media (max-width: 400px) {
    .design-page-header {
        gap: 10px;
    }

    .design-welcome.design-chat-home {
        padding: 28px 8px;
    }

    .design-message-list {
        padding-left: 8px;
        padding-right: 8px;
    }

    .design-messages {
        gap: 16px;
    }

    .design-workspace-body.chat-only .design-composer {
        width: calc(100% - 16px);
        margin-left: auto;
        margin-right: auto;
    }

    .design-home-composer .design-prompt-box textarea {
        min-height: 88px;
        padding: 12px 12px 6px;
    }

    .design-capabilities {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .design-spinner {
        animation-duration: 1.8s;
    }
}

/* Idea Design session controls - ChatGPT-style actions live in the session
   header. The previous Artifact-toolbar actions stay hidden during the markup
   migration so Preview/Code/History keep their established layout.
 */
.design-artifact-toolbar > .design-artifact-actions {
    display: none;
}

.design-artifact-toolbar > .design-session-header-actions {
    margin-left: auto;
}

.design-preview-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-muted);
}

.design-preview-close:hover {
    border-color: var(--border);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-preview-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.design-session-header-actions {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
}

.design-session-action {
    position: relative;
    z-index: 159;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 34px;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    transition: background 140ms, color 140ms, border-color 140ms, opacity 140ms;
}

.design-session-menu-icon,
.design-session-menu-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.design-session-action:hover:not(:disabled),
.design-session-action[aria-expanded="true"] {
    border-color: var(--border);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-session-action:focus-visible,
.design-session-menu button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.design-session-action:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.design-session-share {
    color: var(--text-primary);
}

.design-session-more {
    width: 36px;
    padding: 0;
    font-size: 14px;
    letter-spacing: 1px;
}

.design-session-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 160;
    display: flex;
    width: 190px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg-secondary);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
    flex-direction: column;
    gap: 2px;
}

.design-session-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: left;
}

.design-session-menu button > span:first-child {
    display: inline-grid;
    width: 18px;
    place-items: center;
    color: var(--text-muted);
    font-size: 14px;
}

.design-session-menu button:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-session-menu button.danger,
.design-session-menu button.danger > span:first-child {
    color: var(--danger);
}

.design-session-menu button:disabled {
    cursor: wait;
    opacity: 0.5;
}

.design-session-toast {
    position: fixed;
    top: calc(var(--navbar-height) + 14px);
    left: 50%;
    z-index: 420;
    max-width: min(440px, calc(100vw - 32px));
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 650;
    transform: translateX(-50%);
}

/* Public Idea Design share (outside the authenticated Dashboard shell). */
.shared-design-page {
    min-height: 100dvh;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.shared-design-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    padding: 0 clamp(18px, 4vw, 54px);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
    backdrop-filter: blur(14px);
    color: var(--text-muted);
    font-size: 14px;
}

.shared-design-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.shared-design-brand img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.shared-design-main {
    width: min(1500px, 100%);
    min-height: calc(100dvh - 58px);
    margin: 0 auto;
    padding: clamp(18px, 3vw, 38px);
}

.shared-design-workspace {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-secondary);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.shared-design-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    gap: 16px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
}

.shared-design-title > div {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

.shared-design-title h1 {
    overflow: hidden;
    font-size: 18px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared-design-title p {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 14px;
}

.shared-design-readonly {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.shared-design-content {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(420px, 1fr);
    min-height: min(720px, calc(100dvh - 174px));
}

.shared-design-chat {
    min-width: 0;
    border-right: 1px solid var(--border);
}

.shared-design-chat > h2,
.shared-design-preview-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.shared-design-messages {
    display: flex;
    max-height: calc(100dvh - 218px);
    padding: 13px;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.shared-design-message {
    padding: 10px 11px;
    border-radius: 9px;
}

.shared-design-message.assistant {
    background: var(--bg-tertiary);
}

.shared-design-message strong {
    font-size: 14px;
}

.shared-design-message p {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.shared-design-preview {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    background: #0b0d12;
}

[data-theme="light"] .shared-design-preview {
    background: #eceef2;
}

.shared-design-preview-label {
    background: var(--bg-secondary);
}

.shared-design-preview-label span {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.shared-design-preview-stage {
    display: flex;
    min-height: 0;
    flex: 1;
    padding: 14px;
}

.shared-design-preview-frame {
    display: block;
    width: 100%;
    min-height: 580px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
}

.shared-design-preview-image {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
}

.shared-design-preview-image img {
    max-width: 100%;
    max-height: 680px;
    border: 1px solid var(--border);
    border-radius: 9px;
    object-fit: contain;
}

.shared-design-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55dvh;
    gap: 10px;
    flex-direction: column;
    color: var(--text-muted);
    text-align: center;
}

.shared-design-state.compact {
    width: 100%;
    min-height: 300px;
}

.shared-design-state strong {
    color: var(--text-primary);
    font-size: 14px;
}

.shared-design-state p {
    max-width: 440px;
    font-size: 14px;
    line-height: 1.5;
}

.shared-design-state.error p {
    color: var(--danger);
}

@media (max-width: 880px) {
    .design-workspace-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .design-session-header-actions {
        width: 100%;
        flex-wrap: wrap;
        overflow: visible;
    }

    .shared-design-content {
        display: flex;
        flex-direction: column;
    }

    .shared-design-chat {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .shared-design-messages {
        max-height: 360px;
    }

    .shared-design-preview-frame {
        min-height: 520px;
    }
}
.workspace-pause-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f59e0b;
  background: #fffbeb;
  color: #78350f;
  font-size: 14px;
}

.workspace-pause-notice time {
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.workspace-pause-notice a {
  color: #92400e;
  font-weight: 600;
}

@media (max-width: 700px) {
  .workspace-pause-notice {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .workspace-pause-notice time {
    margin-left: 0;
  }
}

/* Admin account-pool capacity view */
.account-pool-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.account-pool-toolbar .btn {
  flex: 0 0 auto;
  margin-left: auto;
}

.account-pool-snapshot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.account-pool-snapshot-meta span {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.account-pool-table-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
}

.account-pool-table-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.account-pool-table-card h2,
.account-pool-table-card header span {
  margin: 0;
  font-size: 17px;
}

.account-pool-table-card header span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.account-pool-table-wrap {
  overflow-x: auto;
}

.account-pool-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.account-pool-table th,
.account-pool-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.account-pool-table tr:last-child td {
  border-bottom: 0;
}

.account-pool-table th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-pool-table th:nth-child(1),
.account-pool-table td:nth-child(1) {
  width: 9%;
}

.account-pool-table th:nth-child(2),
.account-pool-table td:nth-child(2) {
  width: 16%;
  overflow-wrap: anywhere;
}

.account-pool-table th:nth-child(3),
.account-pool-table td:nth-child(3) {
  width: 10%;
}

.account-pool-table th:nth-child(4),
.account-pool-table td:nth-child(4) {
  width: 9%;
}

.account-pool-table th.account-pool-col-cooldown,
.account-pool-table td.account-pool-col-cooldown {
  width: 18%;
  min-width: 140px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}

.account-pool-table th:nth-child(6),
.account-pool-table td:nth-child(6) {
  width: 12%;
}

.account-pool-table th:nth-child(7),
.account-pool-table td:nth-child(7) {
  width: 16%;
}

.account-pool-table th:nth-child(8),
.account-pool-table td:nth-child(8) {
  width: 10%;
}

.account-pool-provider {
  font-weight: 700;
}

.account-pool-health {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.account-pool-health.health-ready {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}

.account-pool-health.health-cooling {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
}

.account-pool-health.health-dead {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

.account-pool-detail {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.account-pool-windows {
  display: grid;
  gap: 5px;
}

.account-pool-windows span:first-child {
  white-space: nowrap;
}

.account-pool-windows .account-pool-detail {
  display: block;
}

/* --- Design Nav (sidebar navigation, extracted from main.css) --- */
.design-nav-row {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    border-radius: 8px;
    overflow: visible;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.design-nav-row:hover,
.design-nav-row.active {
    background: var(--bg-tertiary);
}

.design-nav-row.active::before,
.design-nav-new-chat.active::before,
.design-nav-session-row.active::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    content: "";
    transform: translateY(-50%);
}

.design-nav-row.active .nav-item {
    color: var(--text-primary);
}

.design-nav-row .nav-item {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    background: transparent;
}

.design-nav-row .nav-item:hover,
.design-nav-row .nav-item.active {
    background: transparent;
}

/* Parent group row: label grows, chevron sits on the far right. */
.design-nav-row .design-nav-group-toggle {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.design-nav-group-toggle .nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.design-nav-group-chevron {
    display: inline-flex;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    align-self: center;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    color: var(--text-muted);
    font-size: 0;
    line-height: 0;
    transition: color var(--transition-speed);
}

.design-nav-group-chevron::before {
    display: block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    /* Collapsed: points right. Expanded: points down. */
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform var(--transition-speed);
}

.design-nav-group-chevron.expanded::before {
    transform: rotate(45deg);
}

.design-nav-row:hover .design-nav-group-chevron,
.design-nav-group-toggle:focus-visible .design-nav-group-chevron,
.design-nav-group-chevron.expanded {
    color: var(--text-secondary);
    background: none !important;
    box-shadow: none !important;
}

.design-nav-group-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.sidebar.rail .design-nav-row .nav-item {
    /* Keep expanded left padding so icons do not jump when rail engages. */
    padding: 8px 12px;
    overflow: visible !important;
}

.sidebar.rail .design-nav-row {
    overflow: visible !important;
}

.sidebar.rail .design-nav-group-chevron {
    display: none !important;
}

.design-nav-submenu {
    display: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.design-nav-submenu.expanded {
    /* Expansion is intentionally immediate. Nested rows sit under a left rail
       so Pinned/Recents read as children of Idea Design / Imported Repos. */
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 2px 0 8px 10px;
    padding: 2px 0 2px 8px;
    border-left: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    overflow: visible;
}

.sidebar.rail .design-nav-submenu {
    display: none;
}

.design-nav-new-chat {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
    gap: 8px;
    margin-right: 2px;
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 650;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.design-nav-new-chat:hover,
.design-nav-new-chat:focus-visible {
    outline: none;
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-nav-import-repo.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.design-nav-new-chat-icon {
    display: grid;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1px solid color-mix(in srgb, #8b5cf6 38%, var(--border));
    border-radius: 5px;
    color: #a78bfa;
    font-size: 14px;
    line-height: 1;
    place-items: center;
}

.import-repo-more-toggle,
.design-nav-more-toggle {
    display: flex;
    width: 100%;
    min-height: 28px;
    align-items: center;
    gap: 7px;
    margin: 1px 0 0;
    padding: 4px 8px 4px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.import-repo-more-toggle:hover,
.import-repo-more-toggle:focus-visible,
.design-nav-more-toggle:hover,
.design-nav-more-toggle:focus-visible {
    outline: none;
    background: var(--bg-hover);
    color: var(--text-primary);
}

.import-repo-more-toggle:focus-visible,
.design-nav-more-toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--accent);
}

.import-repo-more-dots,
.design-nav-more-dots {
    min-width: 14px;
    color: var(--text-muted);
    font-weight: 750;
    letter-spacing: 0.5px;
}

.design-nav-history-section {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.design-nav-history-section + .design-nav-history-section {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.design-nav-history-toggle {
    display: flex;
    width: 100%;
    min-height: 28px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 4px 4px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition-speed), background var(--transition-speed);
}

.design-nav-history-toggle:hover,
.design-nav-history-toggle:focus-visible {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    outline: none;
}

.design-nav-history-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Shared chevron control for Pinned/Recents section headers. */
.design-nav-section-chevron {
    display: inline-flex;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    align-self: center;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    color: var(--text-muted);
    font-size: 0;
    line-height: 0;
    transition: color var(--transition-speed);
}

.design-nav-section-chevron::before {
    display: block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform var(--transition-speed);
}

.design-nav-section-chevron.expanded::before,
.design-nav-history-toggle[aria-expanded="true"] .design-nav-section-chevron::before {
    transform: rotate(45deg);
}

.design-nav-history-toggle:hover .design-nav-section-chevron,
.design-nav-history-toggle:focus-visible .design-nav-section-chevron,
.design-nav-section-chevron.expanded {
    color: var(--text-secondary);
    background: none !important;
    box-shadow: none !important;
}

/* Keep legacy class safe if any leftover markup still references it. */
.design-nav-history-chevron {
    display: inline-flex;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    align-self: center;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none !important;
    box-shadow: none !important;
    color: var(--text-muted);
    font-size: 0;
    line-height: 0;
}

.design-nav-history-items {
    display: none;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    padding: 1px 0 2px;
}

.design-nav-history-items.is-open {
    display: flex;
}

.design-nav-history-items .design-nav-session-link {
    padding-left: 10px;
}

.design-nav-history-items .design-nav-more-toggle,
.design-nav-history-items .import-repo-more-toggle {
    padding-left: 10px;
}

.design-nav-session-list {
    display: flex;
    max-height: none;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    overscroll-behavior: contain;
}

.design-nav-session-row {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 30px;
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.3;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.design-nav-session-row:hover,
.design-nav-session-row:focus-within {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.design-nav-session-row.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.design-nav-session-link {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 30px;
    flex: 1;
    padding: 5px 50px 5px 12px;
    border-radius: inherit;
    color: inherit;
}

.design-nav-legacy-project-link {
    padding-right: 8px;
}

.design-nav-session-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.design-nav-session-title {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-nav-session-actions {
    position: absolute;
    right: 3px;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
}

.design-nav-session-pin,
.design-nav-session-more {
    display: grid;
    width: 23px;
    height: 23px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    place-items: center;
    transition: background var(--transition-speed), color var(--transition-speed), opacity var(--transition-speed);
}

.design-nav-session-row:hover .design-nav-session-pin,
.design-nav-session-row:hover .design-nav-session-more,
.design-nav-session-row:focus-within .design-nav-session-pin,
.design-nav-session-row:focus-within .design-nav-session-more {
    opacity: 1;
}

.design-nav-session-pin:hover,
.design-nav-session-more:hover,
.design-nav-session-pin:focus-visible,
.design-nav-session-more:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
    color: var(--text-primary);
}

.design-nav-session-pin:focus-visible,
.design-nav-session-more:focus-visible {
    box-shadow: 0 0 0 2px var(--accent);
}

.design-nav-session-pin span,
.design-nav-session-more span,
.design-nav-session-menu button > span:first-child {
    display: flex;
    width: 15px;
    height: 15px;
}

.design-nav-session-pin svg,
.design-nav-session-more svg,
.design-nav-session-menu svg {
    width: 100%;
    height: 100%;
}

.design-nav-session-rename {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 24px 24px;
    gap: 2px;
    padding: 3px;
}

.design-nav-session-rename input {
    min-width: 0;
    height: 26px;
    padding: 4px 6px;
    border: 1px solid var(--accent);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
}

.design-nav-session-rename button {
    border-radius: 5px;
    color: var(--text-secondary);
    font-size: 14px;
}

.design-nav-session-rename button:hover,
.design-nav-session-rename button:focus-visible {
    outline: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.design-nav-session-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 209;
    /* Prefer inset over 100vw so a vertical scrollbar never forces horizontal scroll. */
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.design-nav-session-menu {
    position: absolute;
    top: calc(100% - 2px);
    right: 2px;
    z-index: 210;
    display: flex;
    width: 158px;
    padding: 5px;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-tertiary);
    box-shadow: 0 12px 32px rgb(0 0 0 / 24%);
}

.design-nav-session-menu.above {
    top: auto;
    bottom: calc(100% - 2px);
}

.design-nav-session-menu button {
    display: flex;
    width: 100%;
    min-height: 31px;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.design-nav-session-menu button:hover,
.design-nav-session-menu button:focus-visible {
    outline: none;
    background: var(--bg-hover);
}

.design-nav-session-menu button.danger {
    color: var(--danger);
}

.design-nav-session-menu-divider {
    height: 1px;
    margin: 4px 3px;
    background: var(--border);
}

.design-nav-session-notice {
    margin: 5px 3px 1px;
    padding: 6px 7px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--success) 10%, transparent);
    color: var(--success);
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.design-nav-session-notice.error {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.design-nav-state,
.design-nav-refresh-error {
    display: flex;
    align-items: center;
    min-height: 28px;
    gap: 6px;
    padding: 4px 7px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.35;
}

.design-nav-state.error,
.design-nav-refresh-error {
    color: var(--danger);
}

.design-nav-state button,
.design-nav-refresh-error button {
    margin-left: auto;
    color: var(--accent);
    font-size: 14px;
    font-weight: 650;
}

.design-nav-state button:hover,
.design-nav-refresh-error button:hover {
    text-decoration: underline;
}

.design-nav-spinner {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border: 1.5px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: design-nav-spin 0.75s linear infinite;
}

@keyframes design-nav-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .design-nav-submenu {
        transition: none;
    }

    .design-nav-spinner {
        animation-duration: 1.8s;
    }
}