/* Mobile-only overrides; desktop retains its existing sidebar and theme. */
@media (max-width:760px), (max-height:500px) and (pointer:coarse) {
  html,body {overscroll-behavior:none}
  .app {position:absolute;inset:var(--roxy-page-top,0px) 0 auto;width:100%;height:var(--roxy-visible-height,100dvh);min-height:0;overflow:hidden}
  .app main {width:100%;height:100%;min-height:0}
  body[data-widgets=standard] #sidebar {
    position:absolute;inset:0 0 0 auto;z-index:30;
    width:min(320px,86vw)!important;height:100%;max-height:100%;
    padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) 14px!important;
    border-right:0!important;border-left:1px solid var(--border);
    transform:translate3d(100%,0,0);visibility:hidden;
    transition:none!important;will-change:transform;backface-visibility:hidden;
    animation:none!important;overflow-y:auto;overscroll-behavior:contain;
  }
  body[data-widgets=standard] #sidebar.open {transform:translate3d(0,0,0);visibility:visible}
  body[data-drawer-active] #sidebar {visibility:visible;will-change:transform}
  body[data-widgets=standard] #sidebar[data-dragging] {transition:none!important}
  #shade {position:absolute;inset:0;z-index:29;background:rgba(0,0,0,.42);opacity:0;transition:none!important;touch-action:pan-y}
  .mobile-menu-open #shade {opacity:1}
  body[data-drawer-active] #shade[hidden] {display:block!important}
  body:has(#sidebar[data-dragging]) #shade {transition:none}
  body[data-widgets=standard] header {
    height:calc(56px + env(safe-area-inset-top))!important;min-height:calc(56px + env(safe-area-inset-top))!important;
    padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))!important;
  }
  #menu {display:grid;place-items:center;min-width:44px;min-height:44px;padding:10px;color:var(--text);flex-shrink:0}
  .header-left,.header-right {min-width:0;gap:8px}
  #header-subtitle {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .connection {display:none!important}
  body[data-widgets=standard] .composer-area {
    flex:0 0 auto;min-height:0;
    padding:6px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important;
  }
  body[data-widgets=standard] #prompt {font-size:16px!important;max-height:min(140px,24dvh)!important}
  input,textarea,select {font-size:16px!important}
  #chat-form:focus-within {transform:none!important}
  #scroll {overflow-y:auto!important;touch-action:auto; -webkit-overflow-scrolling:touch;scroll-behavior:auto;min-height:0;overscroll-behavior:contain;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  button,a,summary,[role=button] {-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  button {-webkit-appearance:none;appearance:none}
  #attach,#roxy-mic,#send {width:44px!important;height:44px!important;min-width:44px!important;flex-basis:44px!important}
  .chat-tools {scrollbar-width:none;overscroll-behavior-x:contain}
  .chat-tools::-webkit-scrollbar {display:none}
  .chat-tools button {min-height:40px!important;flex-shrink:0}
  .roxy-power-state {display:inline-flex!important;width:30px;justify-content:center;flex:0 0 30px}
  .roxy-power-state:empty::before {display:none}
  .roxy-ui-icon {display:block;width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .roxy-mode-icon .roxy-ui-icon,.roxy-power-icon .roxy-ui-icon {width:14px;height:14px;flex-basis:14px}
  .tool-icon {display:grid;place-items:center;min-width:20px}
}
@media (hover:none) and (max-width:760px) {
  #send:hover,#send:active,#attach:hover,#roxy-mic:hover,.roxy-power-tool:hover,
  #modes.roxy-mode-tools button:hover .roxy-mode-icon {transform:none!important;filter:none}
}
@media (min-width:761px) and (max-height:500px) and (pointer:coarse) {
  body[data-widgets=standard] header {height:44px!important;min-height:44px!important;padding-top:0!important}
  .disclaimer {display:none!important}
  #chat-form {padding:7px 10px!important}
  #prompt {min-height:26px!important}
  .compose-actions {margin-top:0!important}
}
@media (prefers-reduced-motion:reduce) {#sidebar,#shade {transition:none!important}}
@media (max-width:760px), (max-height:500px) and (pointer:coarse) {
  .chat-tools .roxy-power-tools {position:static;margin-left:4px!important;flex:0 0 auto;backdrop-filter:none}
  .roxy-power-tool .roxy-power-label {display:inline}
  .roxy-power-tool .roxy-power-state {display:none!important}
  .compose-actions #send,.compose-actions #stop {order:-1;margin:0 auto 0 0!important}
  .compose-actions #attach {order:2}
  .compose-actions #roxy-mic {order:3}
  .compose-actions #compose-hint {display:none!important}
  #drawer-close {display:grid;place-items:center;position:absolute;top:max(12px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:44px;height:44px;color:var(--text)}
  #sidebar .brand {margin-right:44px}
  .suggest-icon {display:grid;place-items:center}
  body[data-widgets=standard] #modes.roxy-mode-tools button {min-height:40px!important}
}
@media (min-width:761px) and (min-height:501px), (min-width:761px) and (pointer:fine) {#drawer-close {display:none}}
/* Focus and viewport panning must not change composer geometry or layout top. */
@media (max-width:760px), (max-height:500px) and (pointer:coarse) {
  body[data-widgets=standard] #chat-form,
  body[data-widgets=standard] #chat-form:focus-within {transform:none!important;transition:none!important;box-shadow:none!important}
  .app {transform:none;transition:none!important}
}