/* Hermes Studio mobile adaptation — layered over the desktop renderer. */
:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-keyboard-lift: 0px;
  --mobile-visual-height: 100dvh;
}

html.hermes-mobile-web,
html.hermes-mobile-web body,
html.hermes-mobile-web #root {
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  overscroll-behavior: none;
}

html.hermes-mobile-web body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* Push all in-flow content below the Dynamic Island / status bar in both
     Safari tabs and home-screen standalone mode (viewport-fit=cover). */
  padding-top: var(--mobile-safe-top);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html.hermes-mobile-web button,
html.hermes-mobile-web [role='button'],
html.hermes-mobile-web input,
html.hermes-mobile-web textarea {
  touch-action: manipulation;
}

html.hermes-mobile-web textarea,
html.hermes-mobile-web input {
  font-size: max(16px, 1em);
}

/* Phone landscape (e.g. 874×402) is wider than 767px and used to drop every
   mobile rule (dock fell back to absolute, hidden file inputs became visible).
   Coarse pointer + short viewport re-enables the layer for phones in landscape
   while leaving desktop / tablets untouched. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
  html.hermes-mobile-web {
    /* Standalone/PWA: sit just above the home indicator.
       Surface bottom gap = this value + 10px (dock's inner spacing). */
    --mobile-composer-bottom: calc(var(--mobile-safe-bottom) + 0.25rem);
  }

  /* Safari's floating bottom toolbar overlaps the layout viewport in normal
     browser tabs. PWA/standalone mode uses env(safe-area-inset-bottom) only. */
  html.hermes-mobile-web.hermes-mobile-safari-browser {
    --mobile-composer-bottom: calc(var(--mobile-safe-bottom) + 2.625rem);
  }

  html.hermes-mobile-web [data-slot='composer-dock'] {
    /* fixed (not absolute): the body padding-top for the notch must not
       shrink the dock's bottom offset (measured -62px artefact). */
    position: fixed !important;
    bottom: calc(var(--mobile-composer-bottom) + var(--mobile-keyboard-lift)) !important;
    z-index: 65 !important;
    width: min(calc(100vw - 1rem), 42rem) !important;
  }

  html.hermes-mobile-web [data-slot='composer-bounds'] {
    padding-bottom: calc(var(--mobile-composer-bottom) + var(--mobile-keyboard-lift) + 11rem) !important;
  }

  html.hermes-mobile-web [data-slot='composer-surface'] {
    min-height: 3.25rem;
    box-shadow: 0 8px 28px rgb(17 50 92 / 18%);
  }

  html.hermes-mobile-web [data-slot='composer-rich-input'] {
    min-height: 2.625rem;
    max-height: min(8.5rem, calc(var(--mobile-visual-height) - 10rem));
    overflow-y: auto;
    font-size: 16px !important;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
  }

  html.hermes-mobile-web[data-mobile-hold-voice-layout] [data-slot='composer-surface'] {
    position: relative !important;
    height: var(--mobile-hold-surface-height) !important;
    min-height: var(--mobile-hold-surface-height) !important;
    max-height: var(--mobile-hold-surface-height) !important;
    overflow: hidden !important;
  }

  html.hermes-mobile-web[data-mobile-hold-voice-layout] [data-slot='composer-rich-input'] {
    position: absolute !important;
    inset: auto !important;
    left: var(--mobile-hold-editor-left) !important;
    top: var(--mobile-hold-editor-top) !important;
    width: var(--mobile-hold-editor-width) !important;
    height: var(--mobile-hold-editor-height) !important;
    min-height: var(--mobile-hold-editor-height) !important;
    max-height: var(--mobile-hold-editor-height) !important;
    overflow: hidden !important;
  }

  html.hermes-mobile-web[data-mobile-hold-voice-candidate] [data-slot='composer-rich-input'],
  html.hermes-mobile-web[data-mobile-hold-voice] [data-slot='composer-rich-input'] {
    caret-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Instant press feedback: the surface lights up the moment the thumb lands,
     before the hold threshold arms. */
  html.hermes-mobile-web[data-mobile-hold-voice-candidate] [data-slot='composer-surface'] {
    box-shadow: 0 0 0 2px color-mix(in srgb, #6ea3e3 60%, transparent), 0 8px 28px rgb(17 50 92 / 18%);
  }

  #hermes-mobile-tools {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin: 0 0 0.42rem 0.3rem;
    padding: 0.32rem;
    border: 1px solid color-mix(in srgb, var(--dt-composer-ring) 28%, transparent);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--dt-background) 91%, transparent);
    box-shadow: 0 6px 22px rgb(17 50 92 / 14%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .hermes-mobile-tool {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.28rem;
    padding: 0 0.66rem;
    border: 0;
    border-radius: 0.7rem;
    background: var(--ui-control-background, rgb(225 237 255 / 78%));
    color: var(--ui-text-primary, currentColor);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .hermes-mobile-tool:active {
    transform: scale(0.96);
    background: var(--ui-control-hover-background, rgb(205 224 252 / 90%));
  }

  .hermes-mobile-file-input {
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* The labelled mobile control proxies the original compact icon. */
  html.hermes-mobile-web:has(#hermes-mobile-tools) button[aria-label='语音听写'],
  html.hermes-mobile-web:has(#hermes-mobile-tools) button[aria-label='停止听写'],
  html.hermes-mobile-web:has(#hermes-mobile-tools) button[aria-label='正在转写听写'],
  html.hermes-mobile-web:has(#hermes-mobile-tools) button[aria-label='Voice dictation'],
  html.hermes-mobile-web:has(#hermes-mobile-tools) button[aria-label='Stop dictation'],
  html.hermes-mobile-web:has(#hermes-mobile-tools) button[aria-label='Transcribing dictation'] {
    display: none !important;
  }

  /* Keep the three useful phone entries: sessions, settings, right tools. */
  html.hermes-mobile-web button[aria-label="交换侧边栏位置"],
  html.hermes-mobile-web button[aria-label="Swap sidebar sides"],
  html.hermes-mobile-web button[aria-label="布局编辑器"],
  html.hermes-mobile-web button[aria-label="Layout editor"],
  html.hermes-mobile-web button[aria-label="HUD 模式"],
  html.hermes-mobile-web button[aria-label="HUD mode"],
  html.hermes-mobile-web button[aria-label^="关闭触感反馈"],
  html.hermes-mobile-web button[aria-label^="开启触感反馈"],
  html.hermes-mobile-web button[aria-label^="Mute haptics"],
  html.hermes-mobile-web button[aria-label^="Unmute haptics"] {
    display: none !important;
  }

  html.hermes-mobile-web {
    --titlebar-height: calc(3rem + var(--mobile-safe-top));
  }

  html.hermes-mobile-web [data-slot='sidebar-container'],
  html.hermes-mobile-web [data-sidebar='sidebar'] {
    max-width: min(88vw, 22rem);
  }

  html.hermes-mobile-web [data-slot='sidebar-inset'] {
    min-width: 0 !important;
  }

  /* Phone drawers are true overlays: they never reserve a layout track. The
     invisible edge rails own Safari's gesture from touchstart, before the
     browser can reinterpret it as back/forward navigation. */
  #hermes-mobile-drawer-backdrop {
    display: none;
    position: fixed;
    inset: var(--titlebar-height) 0 0;
    z-index: 1000;
    background: rgb(5 18 38 / 28%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    touch-action: none;
  }

  html.hermes-mobile-web[data-mobile-drawer] #hermes-mobile-drawer-backdrop {
    display: block;
  }

  html.hermes-mobile-web [data-mobile-drawer-panel] {
    position: fixed !important;
    top: var(--titlebar-height) !important;
    bottom: 0 !important;
    height: auto !important;
    z-index: 1001 !important;
    max-width: 86vw !important;
    touch-action: pan-y;
  }

  html.hermes-mobile-web [data-mobile-drawer-panel='left'] {
    left: 0 !important;
    right: auto !important;
  }

  html.hermes-mobile-web [data-mobile-drawer-panel='right'] {
    right: 0 !important;
    left: auto !important;
  }

  .hermes-mobile-drawer-edge {
    position: fixed;
    top: var(--titlebar-height);
    bottom: 0;
    z-index: 1002;
    width: 28px;
    background: transparent;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .hermes-mobile-drawer-edge[data-mobile-edge='left'] {
    left: 0;
  }

  .hermes-mobile-drawer-edge[data-mobile-edge='right'] {
    right: 0;
  }

  html.hermes-mobile-web[data-mobile-drawer] .hermes-mobile-drawer-edge {
    pointer-events: none;
  }

  html.hermes-mobile-web .titlebar-icon-button {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* Floating titlebar controls (they position via CSS vars set inline by the
     renderer) must clear the Dynamic Island / status bar. */
  html.hermes-mobile-web [style*='--titlebar-controls-top'] {
    --titlebar-controls-top: calc(var(--mobile-safe-top) + 5px) !important;
  }

  /* Touch-friendly tab bar: enlarge the new-session target and the tabs. */
  html.hermes-mobile-web [class*='group/pane-header'] {
    height: 2.375rem !important;
  }

  html.hermes-mobile-web [class*='group/pane-header'] [class*='group/tab'] {
    min-height: 2.375rem;
  }

  html.hermes-mobile-web [aria-label='新建会话标签'],
  html.hermes-mobile-web [aria-label='New session tab'] {
    min-width: 2.375rem;
    min-height: 2.375rem;
  }

  /* Bigger touch targets in the composer tool row. */
  html.hermes-mobile-web [data-slot='composer-dock'] button[aria-label='Add context'],
  html.hermes-mobile-web [data-slot='composer-dock'] button[aria-label^='模型'],
  html.hermes-mobile-web [data-slot='composer-dock'] button[aria-label='朗读回复'],
  html.hermes-mobile-web [data-slot='composer-dock'] button[aria-label^='唤醒词'],
  html.hermes-mobile-web [data-slot='composer-dock'] button[aria-label='停止'],
  html.hermes-mobile-web [data-slot='composer-dock'] button[aria-label='Model'],
  html.hermes-mobile-web [data-slot='composer-dock'] button[aria-label='Read aloud'],
  html.hermes-mobile-web [data-slot='composer-dock'] button[aria-label^='Wake word'],
  html.hermes-mobile-web [data-slot='composer-dock'] button[aria-label='Stop'] {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0 0.4rem;
    border-radius: 0.6rem;
  }

  /* The thread jump button must sit above the dock and stay tappable.
     Its absolute containing block overflows the padded body by safe-top,
     so compensate explicitly (verified: offset = +safe-top).
     --mobile-dock-height is kept in sync by the bridge; the fallback keeps the
     old static clearance when the variable is unavailable. */
  html.hermes-mobile-web .thread-jump-button {
    bottom: calc(var(--mobile-composer-bottom) + var(--mobile-keyboard-lift) + var(--mobile-dock-height, 13rem) + 2.5rem + var(--mobile-safe-top)) !important;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  html.hermes-mobile-web [data-pane='preview'],
  html.hermes-mobile-web [data-pane='terminal'] {
    position: fixed !important;
    inset: var(--titlebar-height) 0 0 0 !important;
    z-index: 70;
    width: 100vw !important;
    max-width: none !important;
    background: var(--dt-background);
  }

  html.hermes-mobile-web pre,
  html.hermes-mobile-web code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  html.hermes-mobile-web .prose {
    max-width: 100% !important;
  }

  html.hermes-mobile-web [data-radix-scroll-area-viewport] {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  #hermes-mobile-hold-voice {
    position: fixed;
    left: 50%;
    /* Must clear the whole dock (tools row + surface + inner padding ≈ 200px). */
    bottom: calc(var(--mobile-composer-bottom) + var(--mobile-keyboard-lift) + 13rem);
    z-index: 2600;
    display: grid;
    min-width: 10.5rem;
    place-items: center;
    gap: 0.25rem;
    padding: 1rem 1.35rem 0.9rem;
    transform: translateX(-50%);
    border: 1px solid rgb(111 157 218 / 38%);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--dt-background, #fff) 95%, #e8f2ff);
    color: var(--ui-text-primary, #10233f);
    box-shadow: 0 18px 58px rgb(5 24 55 / 30%);
    text-align: center;
    pointer-events: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .hermes-mobile-hold-voice-orb {
    display: grid;
    width: 3.3rem;
    height: 3.3rem;
    place-items: center;
    margin-bottom: 0.25rem;
    border-radius: 999px;
    background: #dcecff;
    font-size: 1.55rem;
  }

  #hermes-mobile-hold-voice strong {
    font-size: 0.98rem;
    font-weight: 750;
  }

  #hermes-mobile-hold-voice span {
    min-height: 1.15rem;
    color: var(--ui-text-secondary, #5a6c82);
    font-size: 0.76rem;
  }

  #hermes-mobile-hold-voice.is-recording .hermes-mobile-hold-voice-orb {
    animation: hermes-mobile-voice-pulse 1.05s ease-in-out infinite;
    background: #dff0ff;
  }

  #hermes-mobile-hold-voice.is-cancel .hermes-mobile-hold-voice-orb,
  #hermes-mobile-hold-voice.is-canceling .hermes-mobile-hold-voice-orb,
  #hermes-mobile-hold-voice.is-empty .hermes-mobile-hold-voice-orb {
    background: #ffe4e4;
  }

  #hermes-mobile-hold-voice.is-sent .hermes-mobile-hold-voice-orb,
  #hermes-mobile-hold-voice.is-canceled .hermes-mobile-hold-voice-orb {
    background: #ddf5e6;
  }

  @keyframes hermes-mobile-voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(40 120 208 / 12%); transform: scale(0.96); }
    50% { box-shadow: 0 0 0 0.65rem rgb(40 120 208 / 0%); transform: scale(1.05); }
  }

  #hermes-mobile-completion {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: grid;
    place-items: center;
    padding: max(1.25rem, var(--mobile-safe-top)) 1.25rem max(1.25rem, var(--mobile-safe-bottom));
    background: rgb(7 20 42 / 42%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .hermes-mobile-completion-card {
    width: min(100%, 22rem);
    padding: 1.35rem 1.25rem 1.2rem;
    border: 1px solid rgb(122 162 218 / 35%);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--dt-background, #fff) 96%, #eaf3ff);
    color: var(--ui-text-primary, #10233f);
    box-shadow: 0 20px 65px rgb(5 24 55 / 28%);
    text-align: center;
  }

  .hermes-mobile-completion-badge {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    margin: 0 auto 0.85rem;
    border-radius: 999px;
    background: #dff6e8;
    color: #16834c;
    font-size: 1.75rem;
    font-weight: 800;
  }

  #hermes-mobile-completion.is-error .hermes-mobile-completion-badge {
    background: #ffe8e8;
    color: #c83737;
  }

  .hermes-mobile-completion-card h2 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 750;
  }

  .hermes-mobile-completion-card p {
    margin: 0.65rem 0 1.05rem;
    color: var(--ui-text-secondary, #52657e);
    font-size: 0.9rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .hermes-mobile-completion-card button {
    width: 100%;
    min-height: 2.8rem;
    border: 0;
    border-radius: 0.8rem;
    background: #2878d0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .hermes-mobile-completion-card button:active {
    transform: scale(0.98);
    background: #1e65b5;
  }

  #hermes-mobile-push-setup {
    position: fixed;
    top: calc(var(--mobile-safe-top) + 4.6rem);
    left: 0.65rem;
    right: 0.65rem;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.68rem 0.72rem 0.68rem 0.82rem;
    border: 1px solid rgb(104 158 224 / 36%);
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--dt-background, #fff) 94%, #e4f1ff);
    color: var(--ui-text-primary, #10233f);
    box-shadow: 0 10px 32px rgb(16 52 98 / 18%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  #hermes-mobile-push-setup[data-state='enabled'] {
    border-color: rgb(60 169 112 / 38%);
    background: color-mix(in srgb, var(--dt-background, #fff) 94%, #e3f8ea);
  }

  #hermes-mobile-push-setup[data-state='error'] {
    border-color: rgb(213 91 91 / 38%);
    background: color-mix(in srgb, var(--dt-background, #fff) 94%, #fff0f0);
  }

  .hermes-mobile-push-text {
    display: grid;
    min-width: 0;
    gap: 0.16rem;
  }

  .hermes-mobile-push-text strong {
    font-size: 0.82rem;
    font-weight: 750;
  }

  .hermes-mobile-push-body {
    color: var(--ui-text-secondary, #52657e);
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .hermes-mobile-push-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.35rem;
  }

  .hermes-mobile-push-close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin: -0.35rem -0.35rem -0.35rem 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgb(18 40 68 / 8%);
    color: var(--ui-text-secondary, #52657e);
    font-size: 1.25rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .hermes-mobile-push-close:active {
    background: rgb(18 40 68 / 16%);
  }

  .hermes-mobile-push-actions button {
    min-height: 2.5rem;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 0.7rem;
    background: #2878d0;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .hermes-mobile-push-actions button:active {
    transform: scale(0.97);
    background: #1e65b5;
  }

  .hermes-mobile-push-actions button.is-secondary {
    background: rgb(222 233 248);
    color: #244665;
  }
}