/* Phone layout. These rules apply only below 1280px.
   At 1280px and up the earlier stylesheets are the whole layout. */

.llm-phonebar,
.suggest-row,
.cam-btn,
.chats-drawer,
.jump-latest {
  display: none;
}

@media (max-width: 1279px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  html, body {
    max-width: 100%;
    overflow-x: clip;
  }
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .top {
    flex-wrap: wrap;
    padding:
      calc(12px + env(safe-area-inset-top))
      calc(16px + env(safe-area-inset-right))
      12px
      calc(16px + env(safe-area-inset-left));
  }
  .shell {
    max-width: 100%;
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
  }
  .frame {
    flex-direction: column;
    min-height: 100dvh;
  }
  .frame-main { min-width: 0; }
  body.has-tray .tray,
  body.tray-open .tray {
    position: sticky;
    top: 0;
    z-index: 25;
    flex-direction: row;
    align-items: center;
    width: 100%;
    flex-basis: auto;
    height: auto;
    max-height: none;
    padding: env(safe-area-inset-top) 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .tray-head { display: none; }
  .tray-nav,
  .tray-tools {
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 2px;
    border: 0;
    overflow: visible;
    flex: none;
  }
  .tray-nav a,
  .tray-tools button,
  body.tray-open .tray-nav a,
  body.tray-open .tray-tools button {
    width: auto;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    flex: 0 0 auto;
  }
  .tray-label,
  body.tray-open .tray-label {
    opacity: 1;
    max-width: 9.5rem;
    margin-left: 8px;
  }
  .tray-kicker { display: none; }
  .tray-foot {
    margin: 0 8px 0 auto;
    padding: 0;
    min-height: 44px;
    flex: none;
  }
  .tray-avatar,
  .tray-who,
  body.tray-open .tray-who { display: none; }
  .tray-signout,
  body.tray-open .tray-signout { display: flex; }
  .tray-foot button.linkish {
    min-height: 44px;
    padding: 0 10px;
    font-size: 16px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }
  textarea { min-height: 96px; }
  .composer textarea {
    min-height: 24px;
    max-height: 35vh;
    font-size: 16px;
  }
  button, .btn, .cell-edit, .bubble-option, summary {
    min-height: 44px;
  }
  .edit-bubble,
  .edit-bubble.wide {
    width: min(320px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }
  .toolbar,
  .toolbar-controls,
  .toolbar .filters,
  .filters { width: 100%; }
  .toolbar .filters label,
  .filters label { flex: 1 1 100%; }
  .toolbar .filters select,
  .toolbar .filters input,
  .filters select,
  .filters input { width: 100%; }
  .card-body,
  .table-wrap,
  .bench-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { max-width: 100%; }
  .sign-in { margin: 12px auto; }
  .sign-in button { width: 100%; }
  .fleet-switch {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .fleet-switch a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0 14px;
  }
  .site-grid,
  .tile-grid,
  .analytics-split,
  .publish .grid { grid-template-columns: 1fr; }
  .ticket-layout { grid-template-columns: minmax(0, 1fr); }
  .issue-head, .ticket-head { display: none; }
  .group-bar { width: 100%; }
  .group-bar .view-switch { flex: 1 1 100%; }
  .group-bar .view-option { flex: 1; white-space: nowrap; }
  .site-expand { flex: 1 1 calc(50% - 8px); }
  .site-summary { padding: 12px 14px; }
  .site-name { flex: 1 1 auto; font-size: 18px; }
  .issue-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main status"
      "qty site"
      "priority due";
    gap: 4px 12px;
    padding: 12px 14px;
    align-items: start;
  }
  .issue-main { grid-area: main; }
  .issue-row .status, .issue-status { grid-area: status; justify-self: end; }
  .issue-qty { grid-area: qty; }
  .issue-site { grid-area: site; }
  .issue-priority { grid-area: priority; }
  .issue-due { grid-area: due; justify-self: end; }
  .ticket-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "site status"
      "title title"
      "key priority"
      "module assignee"
      "reported reported";
    gap: 4px 12px;
    padding: 12px 14px;
    align-items: start;
  }
  .t-title { grid-area: title; }
  .t-status { grid-area: status; justify-self: end; }
  .t-priority { grid-area: priority; }
  .t-key { grid-area: key; }
  .t-site { grid-area: site; }
  .t-module { grid-area: module; }
  .t-assignee { grid-area: assignee; }
  .t-reported { grid-area: reported; }
  .field-line { grid-template-columns: 1fr; }
  .job-head h2, .ticket-heading, .ticket-title { font-size: 22px; }
  .manage-card { flex-direction: column; align-items: stretch; padding: 12px; }
  .manage-card button { width: 100%; }
  img, video, svg, pre, code { max-width: 100%; }
  pre, code { overflow-x: auto; }
  h1, h2, h3, p, td, th, .issue-main strong, .site-card h3 { overflow-wrap: anywhere; }

  body.llm-mode {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.llm-mode .frame {
    flex: none;
    height: var(--vv-height, 100dvh);
    min-height: 0;
    overflow: hidden;
    transform: translateY(var(--vv-offset, 0px));
  }
  body.llm-mode .frame-main {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  body.llm-mode .shell {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  body.llm-mode .llm {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .llm-phonebar,
  .llm-dock { flex: none; }
  .llm-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  body.llm-mode .tray-tools { display: none; }
  body.llm-mode .tray { border-bottom-color: rgba(255, 255, 255, 0.08); }
  .llm-phonebar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 8px;
    color: #ececec;
  }
  .llm-phonebar strong {
    flex: 1;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.02em;
  }
  .llm-phonebar .icon-btn {
    width: 44px;
    height: 44px;
    color: #ececec;
  }
  .llm-stage { -webkit-overflow-scrolling: touch; }
  .llm-thread {
    width: calc(100% - 24px);
    gap: 14px;
    padding-top: 8px;
  }
  .llm-empty h2 { font-size: 26px; }
  .llm-empty p { font-size: 16px; }
  .suggest-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    pointer-events: auto;
  }
  .suggest-row button {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #ececec;
    font-size: 16px;
  }
  .msg.user { max-width: 88%; font-size: 16px; }
  .msg-body { font-size: 16.5px; line-height: 1.5; }
  .msg-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .msg-body pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .tool-chip {
    width: fit-content;
    max-width: 100%;
    margin: 8px 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #d5d8de;
    font-size: 14px;
  }
  .tool-chip summary {
    min-height: 44px;
    padding: 0 14px;
    cursor: pointer;
    list-style: none;
  }
  .tool-chip summary::-webkit-details-marker { display: none; }
  .tool-chip a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px 8px;
    color: #c9d4ff;
  }
  .tool-chip.failed { color: #ffb4ae; }
  .chat-chart { max-width: 100%; }
  .chat-chart img { max-width: 100%; }
  .download-card { width: fit-content; max-width: min(440px, 100%); }
  .download-card-btn { min-height: 44px; padding: 0 16px; font-size: 16px; }
  .think summary { min-height: 44px; font-size: 15px; }
  .feedback .thumb {
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    font-size: 16px;
  }
  .feedback input {
    flex: 1 1 140px;
    min-height: 44px;
    font-size: 16px;
  }
  .jump-latest:not([hidden]) {
    display: inline-flex;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 6;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111;
    font-size: 15px;
    font-weight: 650;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
  .llm-dock {
    position: relative;
    z-index: 5;
    padding: 6px 0 calc(10px + env(safe-area-inset-bottom));
    background: #090a0c;
  }
  .llm-status-row,
  .editing,
  .attach-row,
  .composer {
    width: calc(100% - 20px);
  }
  .llm-status-row { flex-wrap: wrap; }
  .composer {
    border-radius: 22px;
    padding: 6px;
    align-items: flex-end;
  }
  .composer textarea {
    font-size: 16px;
    line-height: 1.4;
    margin: 10px 0;
  }
  .cam-btn.icon-btn,
  .composer .icon-btn,
  .composer .send {
    display: inline-flex;
    width: 48px;
    height: 48px;
    min-height: 48px;
  }
  .composer .send.stop { background: #c9372c; color: #fff; }
  .cam-btn[hidden] { display: none; }
  body.llm-mode .backdrop,
  body.llm-mode .drawer {
    position: absolute;
  }
  body.llm-mode .drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(86dvh, 100%);
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px 18px 0 0;
    transform: translateY(110%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.llm-mode .drawer.open { transform: translateY(0); }
  body.llm-mode .drawer::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.28);
  }
  body.llm-mode .drawer .fields { grid-template-columns: 1fr; }
  body.llm-mode .drawer input,
  body.llm-mode .drawer textarea,
  body.llm-mode .drawer select,
  #llm-model-slot select {
    font-size: 16px;
    min-height: 44px;
  }
  #llm-model-slot .model-pick { display: block; width: 100%; margin-bottom: 10px; }
  #llm-model-slot select { max-width: none; width: 100%; }
  .llm-saved-chats { display: none; }
  .chats-drawer {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 32;
    width: min(320px, calc(100% - 48px));
    flex-direction: column;
    background: rgba(16, 17, 20, 0.96);
    color: #ececec;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .chats-drawer.open { transform: translateX(0); }
  .chats-drawer .drawer-body { overflow: auto; }
  .chats-drawer .glass-btn,
  .chats-drawer .text-btn,
  .chats-drawer .chat-list button.load {
    min-height: 44px;
    font-size: 16px;
  }
  .chats-drawer #llm-new-phone { width: 100%; margin-bottom: 12px; }
  .fw-row, .older { grid-template-columns: 1fr; }
}