/**
 * Mobile UX Layer — Team Chat Industrial UNIFIED V2.0
 * Berlaku eksklusif untuk viewport ≤ 768px (Chrome Android & sejenisnya).
 * JANGAN sentuh desktop rules. Semua token dari tokens.css.
 *
 * Revisi: 2026-09-12 · agy (Antigravity)
 */

/* =====================================================================
   0. DRAWER TRIGGER BUTTON — hanya tampil di mobile
   ===================================================================== */
#btn-sidebar-toggle {
  display: none; /* disembunyikan di desktop */
}

/* =====================================================================
   1. MOBILE BREAKPOINT — semua rules di bawah ini hanya aktif ≤ 768px
   ===================================================================== */
@media (max-width: 768px) {

  /* --- 1.0 HTML / Body reset untuk safe-area ----------------------- */
  html, body {
    overflow: hidden;
    /* Pastikan tidak ada zoom otomatis pada input */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* --- 1.1 App root: single-column stacking ----------------------- */
  #app-root {
    flex-direction: column;
    height: 100dvh; /* dynamic viewport height untuk keyboard mobile */
    position: relative;
  }

  /* --- 1.2 SIDEBAR: Drawer / Overlay pattern ---------------------- */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(300px, 85vw);
    height: 100dvh;
    z-index: 200;
    transform: translateX(-110%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }

  #sidebar.drawer-open {
    transform: translateX(0);
  }

  /* Overlay backdrop saat drawer terbuka */
  #sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(10, 13, 18, 0.7);
    z-index: 199;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  #sidebar-backdrop.visible {
    display: block;
  }

  /* --- 1.3 Main workspace: full-width tanpa margin sidebar -------- */
  #main-workspace {
    flex: 1;
    width: 100%;
    margin: 0;
    border-radius: 0;
    max-width: 100%;
    min-height: 0; /* flex shrink diizinkan */
    display: flex;
    flex-direction: column;
  }

  /* --- 1.4 Telemetry bar: compact, dengan tombol sidebar toggle --- */
  .telemetry-bar {
    height: 52px;
    padding: 0 12px 0 8px;
    position: relative;
    flex-shrink: 0;
  }

  /* Tombol drawer toggle di mobile */
  #btn-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-base);
    color: var(--text-med);
    cursor: pointer;
    touch-action: manipulation;
    flex-shrink: 0;
    margin-right: 4px;
  }

  #btn-sidebar-toggle:active {
    background-color: var(--surface-3);
    color: var(--text-high);
  }

  .partner-header {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .partner-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .partner-meta {
    display: none; /* sembunyikan subtitle di mobile untuk menghemat ruang */
  }

  /* Sembunyikan tombol Ctrl+K teks di mobile — gunakan ikon saja atau omit */
  #btn-quick-switch {
    display: none;
  }

  /* Compact ambient status */
  .ambient-status {
    gap: 8px;
  }

  /* Tombol Clear Chat di header */
  #btn-clear-chat {
    height: 36px !important;
    min-width: 44px;
    touch-action: manipulation;
  }

  /* --- 1.5 Message Feed ------------------------------------------ */
  #message-feed {
    padding: 16px 12px;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* --- 1.6 Chat Bubbles ------------------------------------------ */
  .message-row {
    max-width: 100%;
  }

  .message-bubble {
    /* Font ≥ 16px mencegah auto-zoom Chrome Android */
    font-size: max(16px, 1rem);
    line-height: 1.6;
    padding: 10px 14px;
    max-width: min(88%, 480px);
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .message-row.incoming .message-bubble {
    max-width: min(88%, 480px);
  }

  .message-row.outgoing .message-bubble {
    max-width: min(88%, 480px);
  }

  /* --- 1.7 Pre / Code block: no horizontal overflow -------------- */
  .message-bubble pre,
  .doc-body pre,
  .bubble-doc-content.raw-text,
  .inline-md-box pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-width: 100%;
    font-size: 13px;
  }

  .message-bubble code,
  .doc-body code {
    word-break: break-all;
    font-size: 13px;
  }

  /* --- 1.8 DELETE button: always visible on mobile (no hover) ---- */
  .btn-msg-action {
    /* Pada mobile, tombol hapus selalu tampil (tidak bergantung hover) */
    opacity: 0.6;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 13px;
    touch-action: manipulation;
  }

  .message-row:hover .btn-msg-action,
  .btn-msg-action:focus-visible,
  .btn-msg-action {
    opacity: 0.6;
  }

  .btn-msg-action.delete {
    color: var(--status-error);
    opacity: 0.7;
  }

  .message-header-actions {
    gap: 4px;
  }

  /* --- 1.9 Attachment Cards -------------------------------------- */
  .bubble-inline-img-card {
    max-width: 100%;
  }

  .bubble-img-wrapper {
    max-height: 260px;
  }

  .bubble-inline-img {
    max-height: 260px;
  }

  .attachment-name {
    max-width: 160px;
  }

  /* --- 1.10 Chat Input Composer (sticky bottom) ------------------ */
  .chat-input-zone {
    /* Sticky bottom — selalu di bawah layar */
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;

    /* Safe area inset untuk iPhone notch / Android nav bar */
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));

    /* Pastikan input tidak tertutup keyboard */
    background-color: var(--surface-2);
    box-shadow: 0 -1px 0 hsla(var(--base-h), 20%, 100%, 0.04), 0 -4px 16px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
  }

  /* Textarea auto-grow — sudah ada di app.js, tapi pastikan min-height OK */
  #chat-input {
    font-size: max(16px, 1rem); /* cegah auto-zoom iOS/Android */
    min-height: 44px;
    max-height: 140px;
    line-height: 1.5;
    padding: 10px 12px;
    resize: none;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
  }

  /* Input controls: tombol attach & send mudah dijangkau jempol */
  .input-controls {
    gap: 8px;
    align-items: flex-end;
  }

  /* Tombol Attach — touch target ≥ 44px */
  #btn-attach {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    touch-action: manipulation;
  }

  /* Tombol Kirim — touch target ≥ 44px */
  #btn-send {
    min-width: 64px;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    flex-shrink: 0;
    touch-action: manipulation;
  }

  /* Typing indicator: compact */
  .typing-indicator {
    font-size: 12px;
    min-height: 14px;
  }

  /* --- 1.11 Semua btn-icon dan tombol sidebar footer: ≥ 44px ------ */
  .btn-icon,
  .sidebar-footer .btn,
  #btn-logout,
  #btn-change-password,
  #btn-help-shortcuts,
  #btn-add-member {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    touch-action: manipulation;
  }

  /* Sidebar footer: horizontal scroll jika terlalu sempit */
  .sidebar-footer {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* --- 1.12 MODALS: scrollable, muat di layar kecil -------------- */

  /* Generic modal card yang sizenya fixed (400px, 480px) */
  #shortcut-modal > div,
  #create-member-modal > div,
  #change-password-modal > div,
  #edit-member-modal > div {
    width: min(92vw, 400px);
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto;
    padding: 20px 16px;
  }

  /* Command Palette */
  .palette-card {
    width: min(92vw, 480px);
    max-height: 75dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .palette-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none;
  }

  #command-palette {
    padding-top: 60px;
    align-items: flex-start;
  }

  /* Doc Inspector: full screen di mobile */
  .doc-inspector-card {
    width: 100%;
    max-width: 100%;
    height: 95dvh;
    border-radius: 0;
  }

  #doc-inspector {
    padding: 0;
    align-items: flex-end;
  }

  .doc-inspector-body {
    padding: 16px 16px;
  }

  /* Image modal: full screen */
  .image-modal-card {
    max-width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }

  .image-modal-backdrop {
    padding: 0;
  }

  .image-modal-display {
    max-height: calc(95dvh - 60px);
  }

  .image-modal-filename {
    max-width: 160px;
  }

  /* Image modal header buttons: ≥ 44px */
  .image-modal-actions .btn-icon,
  #btn-close-image-modal {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  /* --- 1.13 Doc inspector header: touch targets ≥ 44px ----------- */
  .doc-inspector-header {
    height: 56px;
    padding: 0 12px;
    flex-wrap: wrap;
    gap: 6px;
  }

  #btn-close-doc,
  .doc-inspector-header .btn {
    min-height: 40px;
    height: 40px;
    touch-action: manipulation;
  }

  /* --- 1.14 Contact list items: ≥ 44px touch target -------------- */
  .contact-item {
    min-height: 52px;
    padding: 10px 12px;
    touch-action: manipulation;
  }

  /* --- 1.15 Toast Undo: mobile position & safe area --------------- */
  #toast-undo {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    left: 12px;
    right: 12px;
    font-size: 13px;
  }

  /* --- 1.16 Dropzone: tidak blok input di mobile ----------------- */
  .dropzone-overlay {
    font-size: 13px;
  }

  /* --- 1.17 Login card: responsif di layar sempit ---------------- */
  .login-card {
    width: min(92vw, 380px);
    padding: 24px 20px;
  }

  /* --- 1.18 touch-action: manipulation untuk semua interaktif ----- */
  button, a, [role="button"], label, input, textarea, select {
    touch-action: manipulation;
  }

} /* END @media (max-width: 768px) */