/* Phone workspace: keep the conversation and its visible result together.
   Every rule is scoped to the new edition and phone width; desktop is unchanged. */
body.mobile-redesign .mobile-progress,
body.mobile-redesign .mobile-project-navigation { display: none; }
body.mobile-redesign .mobile-conversation-history,
body.mobile-redesign .mobile-intro-line { display: none; }

@media (max-width: 700px) {
  body.mobile-redesign .faithful[data-view="overview"] .mobile-conversation-history,
  body.mobile-redesign .faithful[data-view="overview"] .mobile-voice-options { display: none; }
  body.mobile-redesign .faithful[data-view="inside"] .os-room-nav,
  body.mobile-redesign .faithful[data-view="inside"] .oc-filters,
  body.mobile-redesign .faithful[data-view="inside"] .oc-cards { scrollbar-width: none !important; }
  body.mobile-redesign .faithful[data-view="inside"] .os-room-nav::-webkit-scrollbar,
  body.mobile-redesign .faithful[data-view="inside"] .oc-filters::-webkit-scrollbar,
  body.mobile-redesign .faithful[data-view="inside"] .oc-cards::-webkit-scrollbar { display: none; }
  body.mobile-redesign .layer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    padding: 7px 10px;
  }
  body.mobile-redesign .layer-header .layer-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 0;
    letter-spacing: 0;
    min-height: 44px;
    min-width: 32px;
  }
  body.mobile-redesign .layer-header .layer-brand img {
    width: 28px;
    height: 28px;
  }
  body.mobile-redesign .layer-header nav {
    display: grid;
    grid-template-columns: .7fr 1.25fr 1fr .85fr;
    gap: 2px;
    width: auto;
    min-width: 0;
    flex: 1;
  }
  body.mobile-redesign .layer-header nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 5px 4px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  body.mobile-redesign .layer-sound-slot:empty { display: none; }
  body.mobile-redesign .site-header {
    gap: 8px;
    min-height: 60px;
    padding-block: 8px;
  }
  body.mobile-redesign .site-header .brand { font-size: 14px; gap: 5px; }
  body.mobile-redesign .site-header .brand svg { width: 27px; height: 27px; }
  body.mobile-redesign .site-header nav { gap: 8px; font-size: 11px; }
  body.mobile-redesign .site-header nav > a { display: flex; align-items: center; min-height: 44px; }
  body.mobile-redesign .site-header .nav-cta span { display: none; }
  body.mobile-redesign.layer-demo-page #content { padding-inline: 10px; }
  body.mobile-redesign.layer-demo-page .layer-page-intro { padding: 19px 4px 12px; }
  body.mobile-redesign.layer-demo-page .layer-page-intro h1 {
    font-size: 30px;
    margin: 0 0 7px;
    line-height: 1.1;
  }
  body.mobile-redesign.layer-demo-page .layer-page-intro > p {
    font-size: 14px;
    line-height: 1.45;
  }
  body.mobile-redesign.layer-demo-page .layer-page-intro > p:not(.mobile-intro-line) { display: none; }
  body.mobile-redesign.layer-demo-page .layer-page-intro > .mobile-intro-line { display: block; margin: 0; }
  body.mobile-redesign.layer-demo-page .faithful .oc-heading { display: none; }
  body.mobile-redesign .faithful.os-columns { padding: 22px 10px 32px; }
  body.mobile-redesign.layer-demo-page .faithful.os-columns { padding: 0 0 28px; }
  body.mobile-redesign .faithful { scroll-margin-top: 70px; }
  body.mobile-redesign .faithful .oc-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 3px 9px;
    letter-spacing: .04em;
  }
  body.mobile-redesign .faithful .preview-label { display: none; }
  body.mobile-redesign .faithful .preview-label small {
    max-width: 130px;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.3;
  }
  body.mobile-redesign .faithful .view-controls { gap: 4px; width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  body.mobile-redesign .faithful .oc-toolbar button {
    min-height: 44px;
    padding: 6px;
    font-size: 11px;
  }
  body.mobile-redesign .faithful .theme-controls { padding: 1px; }
  body.mobile-redesign .faithful .theme-controls button { padding: 6px 8px !important; }
  body.mobile-redesign .faithful .device-frame {
    border-radius: 14px;
    box-shadow: 0 12px 30px -23px #1c436f70;
  }

  /* Keep the full desktop overview available; these rules affect the entered view only. */
  body.mobile-redesign .faithful[data-view="inside"] .os-mast {
    padding: 12px 14px 3px;
    gap: 10px;
  }
  body.mobile-redesign .faithful[data-view="inside"] .os-mast strong { font-size: 13px; letter-spacing: .08em; }
  body.mobile-redesign .faithful[data-view="inside"] .os-top-state { font-size: 12px; font-weight: 600; letter-spacing: 0; }
  body.mobile-redesign .faithful[data-view="inside"] .os-atmosphere { height: 32px; }
  body.mobile-redesign .faithful[data-view="inside"] .os-presence {
    padding-top: 0;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: .15em;
  }
  body.mobile-redesign .faithful[data-view="inside"] .os-wave { height: 20px; }
  body.mobile-redesign .faithful[data-view="inside"] .os-room-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 2px 10px 9px;
    scrollbar-width: thin;
    scroll-padding-inline: 10px;
    overscroll-behavior-x: contain;
  }
  body.mobile-redesign .faithful[data-view="inside"] .os-room-nav button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 11px;
    font-size: 12px;
    white-space: nowrap;
  }
  body.mobile-redesign .faithful[data-view="inside"] .mobile-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    list-style: none;
    margin: 0 10px 9px;
    padding: 0;
    color: var(--os-muted);
    font-size: 11px;
    line-height: 1.3;
  }
  body.mobile-redesign .faithful[data-view="inside"] .mobile-progress li {
    padding: 4px 1px 6px;
    border-bottom: 2px solid var(--os-line);
  }
  body.mobile-redesign .faithful[data-view="inside"] .mobile-progress li[aria-current="step"] {
    border-color: #2c4a76;
    color: #2c4a76;
    font-weight: 700;
  }
  body.mobile-redesign .faithful[data-theme="night"][data-view="inside"] .mobile-progress li[aria-current="step"] {
    border-color: #35e0ff;
    color: #97dcf0;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-shell[data-room]:not([data-room="columns"]) .mobile-progress { display: none; }
  body.mobile-redesign .faithful[data-view="inside"] .oc-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 9px 10px;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-conversation {
    min-height: 0;
    padding: 13px 14px;
    border-radius: 10px;
    gap: 0;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-conversation > h3 {
    display: none;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-conversation .oc-kicker,
  body.mobile-redesign .faithful[data-view="inside"] .os-tagline,
  body.mobile-redesign .faithful[data-view="inside"] .os-composer,
  body.mobile-redesign .faithful[data-view="inside"] .oc-conversation > .oc-disclosure { display: none; }
  body.mobile-redesign .faithful[data-view="inside"] .oc-messages {
    min-height: 0;
    max-height: none;
    overflow: visible;
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.5;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-messages > div:not(:last-child) { display: none; }
  body.mobile-redesign .faithful[data-view="inside"] .oc-messages > div {
    padding-left: 9px;
    margin: 0;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-messages b { font-size: 11px; letter-spacing: 0; }
  body.mobile-redesign .faithful[data-view="inside"] .oc-messages p { margin: 3px 0 0; }
  body.mobile-redesign .faithful[data-view="inside"] .oc-context {
    display: none;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-action {
    margin-top: 10px;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px !important;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-projects { padding-top: 0; }
  body.mobile-redesign .faithful[data-view="inside"] .os-filter-label,
  body.mobile-redesign .faithful[data-view="inside"] .os-live { display: none; }
  body.mobile-redesign .faithful[data-view="inside"] .oc-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    margin: 0 0 8px;
    padding: 1px;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-filters button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 11px;
    font-size: 12px;
    white-space: nowrap;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-cards {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc(100% - 28px);
    align-items: stretch;
    gap: 9px;
    min-height: 0;
    overflow-x: auto;
    padding: 1px 1px 8px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #7193b7 transparent;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card,
  body.mobile-redesign .faithful[data-view="inside"] .oc-card:not([data-selected="true"]) {
    display: flex;
    scroll-snap-align: start;
    min-height: 224px;
    padding: 13px 14px;
    border-radius: 11px;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    min-height: 44px;
    max-width: 68%;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-objective {
    display: none;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-badge {
    font-size: 11px;
    line-height: 1.35;
    padding: 4px 6px;
    margin: 0 0 8px;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card dl { margin: 0; }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card dt {
    font: 600 11px/1.4 DM, Arial, sans-serif;
    letter-spacing: .02em;
    margin: 0 0 4px;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card dt:first-of-type { display: none; }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card dd {
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 8px;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card .oc-owner {
    top: 14px;
    right: 12px;
    font-size: 10px;
    line-height: 1.5;
    margin: 0;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card details {
    font-size: 13px;
    line-height: 1.5;
    padding-top: 0;
    margin-top: auto;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card summary {
    min-height: 44px;
    padding-block: 12px;
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card .oc-evidence {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--os-text);
  }
  body.mobile-redesign .faithful[data-view="inside"] .oc-card-foot {
    display: none;
  }
  body.mobile-redesign .faithful[data-view="inside"] .mobile-project-navigation {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 3px;
  }
  body.mobile-redesign .faithful[data-view="inside"] .mobile-project-navigation button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid var(--os-line);
    border-radius: 7px;
    background: var(--os-panel);
    color: var(--os-text);
    font-size: 12px;
  }
  body.mobile-redesign .faithful[data-view="inside"] .mobile-project-navigation button:disabled { opacity: .45; cursor: default; }
  body.mobile-redesign .faithful[data-view="inside"] .oc-bottom {
    padding: 2px 12px 11px;
    font-size: 10px;
    line-height: 1.45;
  }
  body.mobile-redesign .faithful .oc-outcome {
    margin: 8px 4px;
    min-height: 0;
    font-size: 12px;
    line-height: 1.45;
  }
  body.mobile-redesign .faithful .oc-outcome:empty { display: none; }
  body.mobile-redesign .mobile-conversation-history,
  body.mobile-redesign .mobile-voice-options {
    display: block;
    margin: 10px 0 0;
    padding: 0 12px;
    border: 1px solid #b3c4d6;
    border-radius: 9px;
    background: #f2f5f4;
    color: #344b63;
    font-size: 13px;
    line-height: 1.5;
  }
  body.mobile-redesign .mobile-conversation-history > summary,
  body.mobile-redesign .mobile-voice-options > summary {
    min-height: 44px;
    padding: 12px 0;
    cursor: pointer;
    font-weight: 600;
  }
  body.mobile-redesign .mobile-conversation-history p { color: inherit; font-size: 14px; }
  body.mobile-redesign .mobile-conversation-history > div { margin-bottom: 14px; }
  body.mobile-redesign .mobile-voice-options .voice-guide {
    margin: 0;
    padding: 0 0 12px;
    border: 0;
    background: transparent;
  }
  body.mobile-redesign .mobile-voice-options .voice-controls button { min-height: 44px; font-size: 12px; }
  body.mobile-redesign .faithful[data-theme="night"] .mobile-conversation-history,
  body.mobile-redesign .faithful[data-theme="night"] .mobile-voice-options {
    background: #142635;
    border-color: #496987;
    color: #d9e8f5;
  }
  body.mobile-redesign .faithful[data-theme="night"] .mobile-voice-options .voice-guide,
  body.mobile-redesign .faithful[data-theme="night"] .mobile-voice-options .voice-guide > small,
  body.mobile-redesign .faithful[data-theme="night"] .mobile-voice-options .voice-controls button {
    color: #d9e8f5;
  }
  body.mobile-redesign .faithful[data-view="inside"] :is(button, summary, a):focus-visible {
    outline: 3px solid #2c4a76;
    outline-offset: 2px;
  }
  body.mobile-redesign .faithful[data-theme="night"][data-view="inside"] :is(button, summary, a):focus-visible {
    outline-color: #35e0ff;
  }
  body.mobile-redesign .faithful[data-view="inside"] .unified-room {
    padding-inline: 9px;
    color: var(--os-text);
  }
  body.mobile-redesign .faithful[data-view="inside"] .unified-room .system-story,
  body.mobile-redesign .faithful[data-view="inside"] .unified-room #home-cameras {
    padding: 16px !important;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  body.mobile-redesign .faithful *,
  body.mobile-redesign .faithful *::before,
  body.mobile-redesign .faithful *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}