/* Giao dien dien thoai - nap CUOI de ghi de cac file truoc */

/* ================= Giao dien dien thoai ================= */
.mobile-back-btn, .wi-mobile-open { display: none; }
@media (max-width: 760px) {
  #app-screen { height: 100dvh; }
  .sidebar { width: 100%; border-right: none; }
  .chat-panel { display: none; }
  body[data-shell-view="conversations"] .sidebar-hero {
    background: var(--bg-surface); color: var(--text-primary); box-shadow: none; padding: 0;
  }
  body[data-shell-view="conversations"] .sidebar-hero::before,
  body[data-shell-view="conversations"] .sidebar-hero::after { display: none; }
  body[data-shell-view="conversations"] .sidebar-header,
  body[data-shell-view="conversations"] .ai-trigger,
  body[data-shell-view="conversations"] .context-nav,
  body[data-shell-view="conversations"] .sidebar-scroll > .sidebar-section:first-child,
  body[data-shell-view="conversations"] #account-list,
  body[data-shell-view="conversations"] .conv-section > .section-title { display: none !important; }
  body[data-shell-view="conversations"] #shell-nav {
    display: flex; flex-direction: row; align-items: center; gap: 4px;
    width: 100%; height: 52px; padding: 0 8px; margin: 0; background: var(--ux-surface);
    border-bottom: 1px solid var(--ux-border);
  }
  body[data-shell-view="conversations"] #shell-nav button {
    width: 40px; height: 40px; padding: 8px; border: 0; border-radius: 10px;
    background: transparent; color: var(--ux-text-2); flex: 0 0 auto;
  }
  body[data-shell-view="conversations"] #shell-nav button span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  body[data-shell-view="conversations"] #shell-nav button.active {
    background: var(--ux-sel); color: var(--ux-link); box-shadow: inset 3px 0 0 var(--ux-sel-bar);
  }
  body[data-shell-view="conversations"] #shell-nav > .rail-z-btn {
    width: 32px; height: 32px; padding: 0; margin-right: 4px; border-radius: 9px; background: var(--ux-primary); color: var(--ux-on-primary); font-weight: 700;
    display: grid; place-items: center;
  }
  body[data-shell-view="conversations"] #shell-nav > .rail-z-btn span,
  #app-screen[data-view="overview"] #shell-nav > .rail-z-btn span {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  }
  body[data-shell-view="conversations"] #shell-nav #rail-utils { display: none; }
  body[data-shell-view="conversations"] .workspace { display: none !important; }
  body[data-shell-view="conversations"] .inbox-chrome {
    display: flex; flex-direction: column; gap: 6px; padding: 8px 12px;
  }
  body[data-shell-view="conversations"] .inbox-chrome-title,
  body[data-shell-view="conversations"] .compat-hidden { display: none !important; }
  body[data-shell-view="conversations"] .inbox-chrome .conv-toolbar,
  body[data-shell-view="conversations"] .conv-toolbar {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 0;
  }
  body[data-shell-view="conversations"] .conv-toolbar .select-wrap[data-cap] { flex-direction: column; align-items: stretch; gap: 2px; }
  body[data-shell-view="conversations"] .conv-toolbar .select-wrap[data-cap]::before { content: attr(data-cap); padding-left: 2px; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--ux-muted); }
  body[data-shell-view="conversations"] .conv-toolbar .select-wrap[data-cap] .select-chevron { top: 26px; }
  body.mobile-chat .sidebar { display: none; }
  body.mobile-chat .chat-panel { display: flex; min-width: 0; }
  body.mobile-wi .chat-panel { visibility: hidden; }
  .mobile-back-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; margin: 0 2px 0 -8px; border: none; border-radius: 50%; background: transparent; color: var(--primary); cursor: pointer;
  }
  .mobile-back-btn:focus-visible, .wi-mobile-open:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
  }
  body.mobile-chat .wi-mobile-open:not(.hidden) {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; padding: 6px 8px;
  }
  body.mobile-chat #chat-account-label {
    cursor: pointer; color: var(--ux-on-primary);
  }
  .chat-header { padding: 8px 10px; min-height: 56px; gap: 6px; }
  #chat-title { max-width: 42vw; }
  .chat-toolbar { flex-wrap: wrap; padding: 6px 8px; }
  .toolbar-hint { display: none; }
  .chat-input-row { padding: 6px 8px 10px; gap: 6px; }
  .chat-input-row button span { display: none; }
  .chat-input-row button { padding: 11px 13px; }
  /* chu 16px de iPhone khong tu phong to khi cham vao o nhap */
  #chat-input, #sidebar-search-input, #ai-input, .modal-box input, .modal-box textarea { font-size: 16px; }
  .info-panel, .ai-panel { width: 100vw !important; }
  .modal-box { width: calc(100vw - 20px) !important; max-height: 92dvh; overflow-y: auto; }
  .report-summary { grid-template-columns: repeat(2, 1fr); }
  .msg-voice { width: min(240px, 62vw); }
  .fmt-hint { display: none; }
}