/* ================================================================
   DENAI AI — Mobile Styles
   Seluruh rule ada di dalam media query ≤767px.
   Tidak ada satu pun rule yang mempengaruhi tampilan desktop (≥768px).
   ================================================================ */

/* Elemen khusus mobile — tersembunyi di desktop */
.call-mobile-transcript { display: none; }

/* ================================================================
   iPhone Safe Area (notch / Dynamic Island)
   viewport-fit=cover membuat konten extend ke bawah notch,
   env() memberi padding agar konten tidak tertutup.
   ================================================================ */
.flex.h-screen.overflow-hidden {
    padding-top: env(safe-area-inset-top);
}

/* ================================================================
   iOS Fix: Prevent auto-zoom on input focus
   iOS Safari zoom-in ketika input font-size < 16px.
   ================================================================ */
input, textarea, select {
    font-size: 16px !important;
}

@media (max-width: 767px) {

    /* ================================================================
       CALL MODE OVERLAY
       Masalah: layout flex-row dengan aside.w-80 (320px) membuat
       section visualizer hanya ~55px di layar 375px.
       Fix: sembunyikan panel transkrip, buat visualizer full-screen.
       ================================================================ */
    #callModeOverlay {
        flex-direction: column;
    }

    /* Sembunyikan panel transkrip kanan di mobile */
    #callModeOverlay > aside {
        display: none !important;
    }

    /* Visualizer mengisi seluruh layar */
    #callModeOverlay > section {
        width: 100%;
        flex: 1;
        padding-bottom: 2rem;
    }

    /* Kurangi padding waveform agar tidak terpotong */
    #audioVisualizer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        height: 10rem;
    }

    /* Kurangi margin atas call controls */
    .call-controls {
        margin-top: 2rem !important;
    }

    /* Kurangi jarak antar metadata call */
    #callModeOverlay .mt-14 {
        margin-top: 2rem;
    }

    /* Heading call mode lebih kecil */
    #callModeOverlay h2 {
        font-size: 1.75rem;
    }


    /* ================================================================
       LANDING PAGE
       ================================================================ */

    /* Heading utama terlalu besar (text-5xl = 3rem) di layar kecil */
    #landing h2 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    /* Kurangi margin landing input group */
    #landing .input-glow-group {
        margin-bottom: 1.25rem;
    }

    /* Padding landing input internal */
    #landing #landingInput {
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 0.9375rem;
    }

    /* Quick action cards: kurangi padding di HP kecil */
    #landing .grid button {
        padding: 0.875rem;
    }

    /* FAQ pills: kurangi gap */
    #landing .flex.flex-wrap {
        gap: 0.375rem;
    }

    /* Footer landing */
    #landing > div:last-child {
        padding-left: 1rem;
        padding-right: 1rem;
    }


    /* ================================================================
       HEADER
       ================================================================ */

    /* ================================================================
       DISCLAIMER — sembunyikan di chat mobile
       ================================================================ */
    .chat-disclaimer {
        display: none;
    }


    /* ================================================================
       iPhone Safe Area — BOTTOM
       Pastikan input area tidak tertutup home indicator iPhone.
       ================================================================ */
    .chat-input-area {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    }


    /* ================================================================
       HR STAT CARD — kecilkan angka besar di mobile
       ================================================================ */

    /* Angka utama (misal "1.354") dari 56px → 36px */
    .hr-stat-value {
        font-size: 36px !important;
    }

    .hr-stat-card-inner {
        padding: 14px 16px 0;
    }

    .hr-stat-label-text {
        font-size: 11px;
        margin-bottom: 5px;
    }


    /* ================================================================
       VISUALIZATION PANEL — kompres lebih kecil di mobile
       ================================================================ */

    .viz-offer-header {
        padding: 14px 16px 12px;
    }

    .viz-offer-title {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .viz-offer-subtitle {
        font-size: 11px;
        line-height: 1.4;
    }

    .viz-offer-eyebrow {
        font-size: 8px;
        padding: 2px 8px;
        margin-bottom: 6px;
    }

    .viz-section {
        padding: 10px 16px;
    }


    /* ================================================================
       CALL MODE — TOMBOL AKHIRI (icon only, no text)
       ================================================================ */

    /* Sembunyikan teks "Akhiri", biarkan hanya icon */
    .call-end-label {
        display: none;
    }

    /* Ubah jadi lingkaran merah */
    #endCallBtn {
        width: 60px;
        height: 60px;
        padding: 0;
        border-radius: 50%;
        gap: 0;
        justify-content: center;
        align-items: center;
    }

    /* Pill container: cukup tampung icon saja */
    .call-controls .flex {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }


    /* ================================================================
       CALL MODE — MOBILE MINI TRANSCRIPT
       ================================================================ */

    /* Tampilkan mini transcript di mobile (desktop: display:none via rule di bawah) */
    .call-mobile-transcript {
        display: block;
        width: calc(100% - 2rem);
        max-width: 320px;
        margin: 1.25rem auto 0;
        padding: 14px 16px;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 16px;
        border: 1px solid rgba(228, 190, 185, 0.2);
        min-height: 56px;
        text-align: center;
    }

    .call-mobile-hint {
        font-size: 13px;
        color: #5b403d;
        font-style: italic;
        margin: 0;
    }

    .call-mobile-msg .call-mobile-label {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: #5b403d;
        display: block;
        margin-bottom: 5px;
    }

    .call-mobile-msg .call-mobile-text {
        font-size: 14px;
        color: #191c1e;
        line-height: 1.45;
        margin: 0;
    }


    /* ================================================================
       VISUALIZATION — Fix "Not Recommended" badge terpotong
       ================================================================ */

    /* Sembunyikan label teks panjang, biarkan badge tampil utuh */
    .viz-section-lbl {
        display: none;
    }

    /* Pastikan badge tidak terpotong */
    .viz-section-badge {
        white-space: nowrap;
        flex-shrink: 0;
    }


    /* ================================================================
       SCHEMA MODAL — Mobile friendly
       ================================================================ */

    /* Nama tabel panjang: truncate dengan ellipsis */
    .schema-table-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 180px;
    }

    /* Table list item: pastikan icon & teks rata */
    .schema-table-left {
        overflow: hidden;
        min-width: 0;
    }

    /* Detail overlay: header lebih kompak */
    .schema-detail-header {
        padding: 14px 16px;
    }

    .schema-detail-icon {
        width: 38px;
        height: 38px;
    }

    .schema-detail-title {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 160px;
    }

    .schema-detail-subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 160px;
    }

    /* Sub-info strip: padding lebih kecil */
    .schema-detail-subinfo {
        padding: 10px 16px;
        gap: 8px;
    }

    /* Tabel detail: 2 kolom saja (Name + Type), sembunyikan Sample Value */
    .schema-detail-table th:nth-child(3),
    .schema-detail-table td:nth-child(3) {
        display: none;
    }

    .schema-detail-table th,
    .schema-detail-table td {
        padding: 10px 14px;
        font-size: 12px;
    }

    /* Kolom Name: lebih lebar */
    .schema-detail-table th:nth-child(1),
    .schema-detail-table td:nth-child(1) {
        width: 55%;
    }

    /* Kolom Type: sisanya */
    .schema-detail-table th:nth-child(2),
    .schema-detail-table td:nth-child(2) {
        width: 45%;
    }

    /* Footer detail: padding lebih kecil */
    .schema-detail-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .schema-detail-footer-info {
        font-size: 11px;
    }


    /* Kurangi padding kiri/kanan header */
    header.flex-shrink-0 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        gap: 0.5rem;
    }


    /* ================================================================
       MESSAGES / CHAT
       ================================================================ */

    /* Kurangi padding messages container */
    .messages-container {
        padding: 1rem 0.75rem;
    }

    /* User bubble: kecilkan font sedikit, pastikan tidak overflow */
    .msg.user-msg .bubble {
        font-size: 15px;
        max-width: 100%;
    }

    /* Bot bubble heading — sedikit lebih kecil di mobile */
    .msg.bot .bubble h1 { font-size: 19px; }
    .msg.bot .bubble h2 { font-size: 17px; }
    .msg.bot .bubble h3 { font-size: 15px; }

    /* Tabel di dalam bot bubble — wajib bisa di-scroll horizontal */
    .msg.bot .bubble table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Code block — scroll horizontal */
    .msg.bot .bubble pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Feedback text: sembunyikan di mobile jika terlalu panjang */
    .feedback-text {
        display: none;
    }

    /* Feedback footer: align right */
    .feedback-footer {
        justify-content: flex-end;
    }


    /* ================================================================
       CHAT INPUT AREA
       ================================================================ */

    .chat-input-area {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-bottom: 1.25rem;
        padding-top: 0.75rem;
    }


    /* ================================================================
       THINKING BUBBLE
       min-width: 300px bisa overflow di layar 320px.
       ================================================================ */
    .thinking-bubble {
        min-width: unset;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* ================================================================
       SESSION SIDEBAR ACTIONS
       Di touchscreen tidak ada hover state, jadi session-actions
       yang opacity:0 tidak pernah terlihat.
       ================================================================ */
    .session-actions {
        opacity: 1;
    }

    /* Session item sedikit lebih besar agar mudah di-tap */
    .session-item {
        padding: 11px 10px;
        margin-bottom: 6px;
    }

    /* Action button sedikit lebih besar untuk jari */
    .session-action-btn {
        width: 28px;
        height: 28px;
    }


    /* ================================================================
       SCHEMA MODAL
       ================================================================ */

    /* Backdrop: pastikan tidak bisa scroll keluar modal */
    .schema-modal {
        align-items: flex-end;
        padding: 0;
        overflow: hidden;
    }

    /* Container: full-width sheet dari bawah, max 90% tinggi layar */
    .schema-modal-container {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Body harus bisa scroll secara internal */
    .schema-modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    /* Footer selalu tampil di bawah */
    .schema-modal-footer {
        flex-shrink: 0;
    }

    /* Saat detail overlay terbuka, container tetap fit layar */
    .schema-modal-container.schema-detail-open {
        min-height: unset;
        height: 90vh;
    }


    /* ================================================================
       HR ANALYTICS / DATA RESULT
       ================================================================ */

    /* Wrapper tabel HR — aktifkan momentum scroll di iOS */
    .hr-table-wrapper-enhanced {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    /* Pastikan card tidak clip konten tabel saat scroll */
    .hr-table-card-enhanced {
        overflow: visible;
    }

    /* Padding header & cell lebih kecil di mobile agar kolom muat */
    .hr-table-header-enhanced,
    .hr-table-cell-enhanced {
        padding: 8px 10px;
        font-size: 13px;
    }

    /* SQL Inspector modal */
    .sql-inspector-content {
        max-width: calc(100vw - 2rem);
        max-height: 85vh;
        border-radius: 16px;
    }


    /* ================================================================
       VISUALIZATION CHART SELECTION (mobile only)
       Dari kartu besar vertikal → item horizontal kompak
       ================================================================ */

    /* Panel utama: kurangi radius & shadow */
    .viz-offer-panel {
        border-radius: 14px;
        margin: 8px 0;
    }

    /* Header: kurangi padding & font */
    .viz-offer-header {
        padding: 16px 18px 14px;
    }
    .viz-offer-title {
        font-size: 17px;
        margin-bottom: 2px;
    }
    .viz-offer-subtitle {
        font-size: 12px;
    }
    .viz-offer-eyebrow {
        font-size: 9px;
        padding: 3px 9px;
        margin-bottom: 8px;
    }

    /* Section body: kurangi padding */
    .viz-section {
        padding: 14px 18px;
    }
    .viz-section-hd {
        margin-bottom: 12px;
    }

    /* Grid: satu kolom, tiap card jadi baris horizontal */
    .viz-rec-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Card: layout horizontal — icon kiri, teks kanan */
    .viz-rec-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 10px;
    }

    /* Icon lebih kecil, tanpa margin-bottom */
    .viz-rc-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    .viz-rc-icon .material-symbols-outlined {
        font-size: 18px;
    }

    /* Teks dalam satu kolom di kanan icon */
    .viz-rc-title {
        font-size: 13px;
        margin-bottom: 2px;
    }
    .viz-rc-desc {
        font-size: 11px;
        line-height: 1.4;
    }

    /* Checkmark pojok */
    .viz-rc-chk {
        font-size: 15px;
        top: 8px;
        right: 8px;
    }

    /* Not-recommended grid juga satu kolom */
    .viz-not-rec-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .viz-nr-card {
        padding: 10px 12px;
        border-radius: 9px;
    }

    /* Footer: kurangi padding, sembunyikan hint teks */
    .viz-offer-footer {
        padding: 12px 18px;
        gap: 10px;
    }
    .viz-footer-hint {
        display: none;
    }
    .viz-btn-cancel,
    .viz-btn-primary {
        padding: 8px 14px;
        font-size: 12px;
    }

    /* Tabel reguler di dalam bot bubble */
    .msg.bot .bubble table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stat cards: pastikan tidak overflow */
    .hr-stat-card {
        min-width: 0;
        word-break: break-word;
    }

}


/* ================================================================
   TAMBAHAN: Layar sangat kecil (≤360px seperti Galaxy A series)
   ================================================================ */
@media (max-width: 360px) {

    /* Heading landing lebih kecil lagi */
    #landing h2 {
        font-size: 1.625rem;
    }

    /* Bubble font lebih kecil */
    .bubble {
        font-size: 14px;
    }

    /* Header search: sembunyikan jika sangat sempit */
    header .bg-surface-container-low {
        display: none;
    }

    /* Avatar sedikit lebih kecil */
    .avatar {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

}