.mobile-navigation { display: none; }

@media (max-width: 640px) {
  .topbar {
    height: 80px;
    padding: 16px;
    flex-shrink: 0;
  }
  .mobilebar .brand { gap: 6px; }
  .mobilebar .brand-logo { width: 48px; height: 48px; }
  .mobilebar .brand-wordmark { font-size: 13px; }
  .topbar .button {
    min-width: 74px;
    min-height: 46px;
    font-size: 13px;
  }
  .content { padding: 16px; }
  .mobile-navigation { display: block; margin-bottom: 22px; }
  .mobile-navigation select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fafbf8;
    color: var(--green);
    font-size: 16px;
  }
  .heading { flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
  .heading h1 { font-size: 26px; }
  .heading p { max-width: none; font-size: 13px; line-height: 1.5; }
  .heading .actions { padding: 0; }
  .heading .actions .button { font-size: 13px; }
  .button, .button.small, form .button.primary {
    min-height: 46px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .panel { border-radius: 10px; }
  .panelhead, .pad, .padded { padding: 19px; }
  .panelhead h2 { font-size: 17px; }
  .panelhead p, .row p { font-size: 13px; line-height: 1.5; }
  .row { padding: 19px; }
  .row strong { font-size: 14px; }
  .row > div, .row .actions { width: 100%; min-width: 0; }
  .row .actions { flex-wrap: wrap; }
  .field { font-size: 13px; }
  .field input, .field select, .field textarea, .search {
    min-height: 48px;
    font-size: 16px;
  }
  .field textarea { min-height: 110px; }
  .entrytabs {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 6px;
    margin-bottom: 18px;
  }
  .entrytabs button { padding: 8px 6px; font-size: 12px; white-space: normal; }
  .entrygrid, .grid2, .formgrid { grid-template-columns: minmax(0, 1fr); }
  .entrygrid > *, .grid2 > *, .formgrid > * { min-width: 0; }
  .formactions { align-items: stretch; }
  .formactions .button, .pad form > .button.primary { width: 100%; }
  .searchbar { gap: 8px; }
  .searchbar input { flex-basis: 100%; }
  .notice { font-size: 12px; line-height: 1.5; }
  .thread { padding: 18px 16px; }
  .thread strong { font-size: 14px; }
  .thread p { font-size: 13px; max-width: 100%; }
  .thread-phone { font-size: 12px; margin-top: 4px; }
  .thread .tags span { font-size: 11px; }
  .thread .avatar { width: 36px; height: 36px; }
  .inbox { min-height: 0; }
  .tablewrap table, .tablewrap tbody, .tablewrap tr { display: block; width: 100%; }
  .tablewrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tablewrap tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .tablewrap td {
    display: grid;
    grid-template-columns: minmax(74px, 30%) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    max-width: none;
    padding: 9px 16px;
    border: 0;
    white-space: normal;
    font-size: 13px;
  }
  .tablewrap td::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  .table-cell { min-width: 0; overflow-wrap: anywhere; }
  .table-cell .button { margin: 4px 0; max-width: 100%; }
  dialog {
    width: calc(100% - 32px);
    max-width: 520px;
    max-height: calc(var(--mobile-viewport, 100dvh) - 32px);
    padding: 20px;
    overflow-y: auto;
  }
  dialog .actions { align-items: stretch; }
  dialog .actions .button { flex: 1; }
  .toast { bottom: max(16px, env(safe-area-inset-bottom)); font-size: 13px; }
  .qa-answer { white-space: pre-wrap; }
  .mobile-chat { overflow: hidden; height: var(--mobile-viewport, 100dvh); }
  .mobile-chat .app, .mobile-chat .main { height: var(--mobile-viewport, 100dvh); }
  .mobile-chat .main { display: flex; flex-direction: column; }
  .mobile-chat .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  }
  .mobile-chat .mobile-navigation, .mobile-chat .heading,
  .mobile-chat .footnote, .mobile-chat #inbox-notice { display: none; }
  .mobile-chat #page-error:empty { display: none; }
  .mobile-chat #page-error { flex-shrink: 0; max-height: 50px; overflow: auto; }
  .mobile-chat #view { display: flex; flex: 1; min-height: 0; }
  .mobile-chat .inbox { display: flex; width: 100%; min-height: 0; border: 0; background: none; }
  .mobile-chat .inbox.showchat .chat {
    display: flex;
    flex: 1;
    min-height: 0;
    max-height: none;
    height: 100%;
    background: none;
  }
  .mobile-chat .chathead { padding: 0; border: 0; min-height: 0; flex-shrink: 0; }
  .mobile-chat .chathead > .flex { display: block; }
  .mobile-chat .chathead .inline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }
  .mobile-chat .chathead strong { font-size: 16px; overflow-wrap: anywhere; }
  .mobile-chat .chathead .badge { display: none; }
  .mobile-chat .chathead p { font-size: 11px; margin: 6px 0 10px; }
  .mobile-chat .statusline {
    flex-shrink: 0;
    max-height: 44px;
    overflow: auto;
    padding: 6px 10px;
    margin-bottom: 12px;
    border-radius: 5px;
  }
  .mobile-chat .messages {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
  }
  .mobile-chat .message { max-width: 92%; margin-bottom: 14px; }
  .mobile-chat .message .bubble { font-size: 14px; line-height: 1.5; border-radius: 8px; }
  .mobile-chat .message time { font-size: 10px; }
  .mobile-chat .pendingbox { flex-shrink: 0; max-height: 68px; padding: 6px 0; overflow-y: auto; }
  .mobile-chat .pendingbox:empty { display: none; }
  .mobile-chat .toast { top: 88px; bottom: auto; }
  .mobile-chat .composer { flex-shrink: 0; padding: 10px 0 0; border: 0; }
  .mobile-chat .composer-label { gap: 12px; margin: 0 0 6px; font-size: 12px; }
  .mobile-chat .composer-label button { min-height: 32px; }
  .mobile-chat .composebox { display: grid; gap: 8px; padding: 0; border: 0; }
  .mobile-chat .composebox textarea {
    height: 56px;
    min-height: 56px;
    max-height: 112px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fafbf8;
    padding: 12px;
    font-size: 16px;
    resize: vertical;
  }
  .mobile-chat .composefoot { display: block; }
  .mobile-chat .composefoot > span { display: none; }
  .mobile-chat .composefoot .button { width: 100%; min-height: 46px; }
  .mobile-chat .composer .error:empty { display: none; }
}

@media (max-width: 640px) and (max-height: 560px) {
  .mobile-chat .topbar { height: 60px; padding-top: 6px; padding-bottom: 6px; }
  .mobile-chat .content { padding-top: 8px; padding-bottom: 8px; }
  .mobile-chat .chathead p { display: none; }
  .mobile-chat .statusline { margin: 4px 0 6px; padding: 3px 8px; max-height: 28px; }
  .mobile-chat .composer { padding-top: 6px; }
}