/* Phone layout only. Desktop styles stay in custom.css and components.css. */
.cfg-save-short, .cfg-tab-short { display: none; }
.chat-mobile-backdrop { display: none; }
.tr-mobile-toggle { display: none; }
.mobile-accordion-toggle { display: none; }
.sch-short-label { display: none; }
/* Scheduler keeps essential fields visible and folds optional settings. */
#page-scheduler #sch-panel-schedule { display: flex; flex-direction: column; }
#page-scheduler #sch-panel-schedule > .space-y-2 { order: 5; }
#page-scheduler .mobile-accordion > :first-child { display: flex; align-items: center; gap: 6px; }
#page-scheduler .mobile-accordion-closed > :not(:first-child) { display: none !important; }
#page-scheduler .mobile-accordion-closed > :first-child { margin-bottom: 0 !important; }
#page-scheduler .mobile-accordion-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; min-height: 28px; padding: 0; margin-left: auto; border: 0; border-radius: 5px; background: var(--bg2); color: var(--text2); cursor: pointer; }
#page-scheduler .mobile-accordion:not(.mobile-accordion-closed) .mobile-accordion-toggle svg { transform: rotate(180deg); }
#page-scheduler .sch-sec-title { flex: 1; margin-bottom: 0; }
#page-scheduler .mobile-accordion:not(.mobile-accordion-closed) > :first-child { margin-bottom: 8px; }
@media (max-width: 768px) {
  .account-item { flex-wrap:wrap; align-items:flex-start !important; }
  .account-item > div[style*="flex:1"] { flex:1 1 calc(100% - 50px) !important; min-width:0 !important; }
  .account-item > button { flex:1 1 auto; min-width:0; white-space:normal; }
  html, body, #app, #main { width: 100%; max-width: 100%; }
  body, #app { height: 100dvh; }
  #main, #content, .page, .card { min-width: 0; }
  #content { padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important; overscroll-behavior: contain; }
  .page.active { max-width: 100%; }

  #mobile-nav { display: none !important; }
  #mobile-nav > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 0 5px; }
  #mobile-nav .mobile-nav-item { min-width: 0; min-height: 48px; width: 100%; padding: 4px 2px; border: 0; background: transparent; font: inherit; font-size: 10px; line-height: 1.2; }
  #mobile-nav .mobile-nav-item.active { color: var(--primary); background: var(--accent-light); }
  #mobile-nav .mobile-nav-item .nav-icon { font-size: 17px; width: auto; }
  #mobile-nav .mobile-nav-item:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  #cw-fab, #cw-launcher { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 50% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; top: auto !important; left: auto !important; right: 10px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }

  .page .card, .page .card-body, .page .field, .page input, .page select, .page textarea { max-width: 100%; box-sizing: border-box; }
  .page input, .page select, .page textarea { font-size: 11px; }
  .page label, .page .card-title { font-size: 11px; line-height: 1.35; }
  .page .btn, .page button { font-size: 11px; }
  .page .btn, .page button { min-height: 30px; }
  .page .card { padding: 10px; margin-bottom: 6px; border-radius: 9px; }
  .page .card-header { padding-bottom: 8px; margin-bottom: 8px; }
  .page .grid-2, .page .grid-3, .page .grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .page .flex-between { align-items: stretch; }
  .page img, .page video { max-width: 100%; }
  .page table { max-width: 100%; }
  .page .card-title, .page .field label, .page .alert-info { white-space: normal; overflow-wrap: anywhere; }

  #page-content .content-platform-tabs { display: flex !important; gap: 4px !important; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; scroll-snap-type: x proximity; }
  #page-content > div:first-child p { display: none; }
  #page-content .content-platform-tabs::-webkit-scrollbar { display: none; }
  #page-content .cpt-tab { flex: 0 0 auto; white-space: nowrap; min-width: max-content; min-height: 36px; padding: 6px 10px; scroll-snap-align: start; }
  #page-content .cpt-tab span { white-space: nowrap; }
  #page-content #cpt-panel-files > div:first-child { gap: 8px !important; }
  #page-content #cpt-panel-files > div:first-child > div:first-child { min-width: 0 !important; width: 100%; }
  #page-content #cpt-panel-files input#content-search { height: 34px !important; }
  #page-content #cpt-panel-files button { height: 34px !important; flex-shrink: 0; }
  #page-content #content-list-container { min-height: 180px !important; }
  #page-content #content-list-container > div { max-width: 100%; box-sizing: border-box; }
  #page-content #content-list-container > div[style*="padding:60px"] { padding:28px 16px !important; }

  #page-publish .publish-shell { gap: 8px; }
  #page-publish .publish-nav { gap: 6px; padding-bottom: 7px; }
  #page-publish .publish-nav .publish-tab { min-width: 0; min-height: 36px; padding: 6px 8px; border-radius: 8px; font-size: 11px; }
  #page-publish .publish-nav .publish-tab .tab-label { display: inline; }
  #page-publish .publish-nav .publish-tab .tab-ico { font-size: 14px; }
  #page-publish .publish-nav .publish-tab .tab-label { font-size: 10.5px; white-space: normal; }
  #page-publish .publish-section-intro { display: none; }
  #page-publish .ai-generation-box { padding: 10px; margin-top: 12px; }
  #page-publish .ai-title { font-size: 12px; }
  #page-publish .input-with-button { gap: 5px; }
  #page-publish .input-with-button .btn { width: 34px; min-width: 34px; padding: 5px; display: inline-flex; justify-content: center; align-items: center; }
  #page-publish .input-with-button .pub-browse-btn span { display: none; }
  #page-publish .input-with-button .pub-browse-btn svg { margin-right: 0 !important; }
  #page-publish .ai-controls > * { max-width: 100%; }
  #page-publish .ai-generation-box textarea { line-height: 1.45; }

  /* Chat: the conversation uses the full screen; history opens as a drawer. */
  #page-chat.active { margin: -10px; width: calc(100% + 20px); height: calc(100dvh - 108px); min-height: 0; overflow: hidden; }
  #page-chat #chat-main-area { width: 100%; min-width: 0; }
  #page-chat #chat-sidebar { display: none; position: absolute; top: 0; bottom: 0; left: 0; width: min(85vw, 300px) !important; max-width: 100%; z-index: 32; }
  #page-chat.chat-sessions-open #chat-sidebar { display: flex; }
  #page-chat .chat-mobile-backdrop { display: none; }
  #page-chat.chat-sessions-open .chat-mobile-backdrop { display: block; position: absolute; inset: 0; background: rgba(15, 23, 42, .38); z-index: 31; }
  #page-chat #chat-navbar { position: relative; height: auto; min-height: 76px; padding: 4px 8px; gap: 3px; flex-wrap: wrap; align-content: center; }
  #page-chat #chat-navbar > div:first-child { order: 2; width: 100%; flex: 0 0 100%; gap: 4px; overflow: hidden; }
  #page-chat #chat-navbar > div:last-child { order: 1; width: 100%; justify-content: flex-end; gap: 6px; }
  #page-chat #chat-sidebar-toggle { position: absolute; top: 7px; left: 8px; z-index: 1; }
  #page-chat #chat-navbar > div:first-child > div { min-width: 0; width: 100%; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  #page-chat #chat-navbar > div:first-child > div::-webkit-scrollbar { display: none; }
  #page-chat #chat-navbar .chat-tab-btn { flex: 0 0 auto; padding: 4px 8px; font-size: 10px; white-space: nowrap; }
  #page-chat #chat-active-model { max-width: 160px; padding-left: 8px; padding-right: 20px; font-size: 10px; }
  #page-chat #chat-messages { padding: 10px; }
  #page-chat #chat-messages .max-w-4xl { gap: 12px; }
  #page-chat #chat-messages .max-w-4xl > div { min-width: 0; }
  #page-chat #chat-messages .max-w-4xl > div > div { max-width: 96%; }
  #page-chat #chat-messages .break-words { overflow-wrap: anywhere; font-size: 11.5px; padding: 8px 10px; }
  #page-chat #chat-empty > p { display: none; }
  #page-chat #chat-input { font-size: 11.5px; min-height: 36px; }
  #page-chat .chat-session-item .truncate { white-space: normal; overflow-wrap: anywhere; }

  /* Settings: keep labels short and controls in view. */
  #page-config .cfg-header-box { padding: 9px; gap: 6px; border-radius: 10px; }
  #page-config .cfg-header-box > div:first-child { gap: 8px; }
  #page-config .cfg-header-box h1 { font-size: 12px; }
  #page-config .cfg-header-box > div:first-child > div:first-child { width: 30px; height: 30px; }
  #page-config .cfg-header-description, #page-config .cfg-header-badge, #page-config .cfg-save-full, #page-config .cfg-tab-full { display: none; }
  #page-config .cfg-save-short, #page-config .cfg-tab-short { display: inline; }
  #page-config .config-nav { gap: 3px; padding: 3px; overflow-x: auto; }
  #page-config .config-nav .config-tab { flex: 0 0 auto; padding: 6px 8px; font-size: 10.5px; gap: 4px; }
  #page-config .cfg-card { padding: 10px; margin-bottom: 10px; }
  #page-config .cfg-header-box, #page-config .cfg-card, #page-publish .publish-nav .publish-tab, #page-publish .ai-generation-box { border-radius: 9px; }
  #page-config .cfg-card-title { font-size: 11.5px; white-space: normal; overflow-wrap: anywhere; }

  #page-transcribe > .grid { gap: 8px; }
  #page-transcribe > .grid > div { gap: 8px; }
  #page-transcribe .tr-mobile-collapsible { min-height: 0; margin-bottom: 0; border-radius: 9px; }
  #page-transcribe .tr-mobile-collapsed > :not(:first-child) { display: none !important; }
  #page-transcribe .tr-mobile-collapsible > :first-child { min-height: 28px; margin-bottom: 0; padding-bottom: 0; gap: 5px; }
  #page-transcribe .tr-mobile-collapsible:not(.tr-mobile-collapsed) > :first-child { margin-bottom: 8px; padding-bottom: 6px; }
  #page-transcribe .tr-mobile-collapsible > :first-child h3 { min-width: 0; font-size: 10px; line-height: 1.2; }
  #page-transcribe .tr-mobile-collapsible > :first-child > div:last-of-type { margin-left: auto; gap: 3px; flex-shrink: 0; }
  #page-transcribe .tr-mobile-collapsible > :first-child button:not(.tr-mobile-toggle) { min-height: 28px; padding: 4px 6px; }
  #page-transcribe .tr-mobile-collapsible > :first-child button:not(.tr-mobile-toggle) span { display: none; }
  #page-transcribe .tr-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 28px; padding: 0; margin-left: 4px; flex: 0 0 auto; border: 0; border-radius: 6px; background: var(--bg3); color: var(--text2); cursor: pointer; }
  #page-transcribe .tr-mobile-toggle svg { transition: transform .15s ease; }
  #page-transcribe .tr-mobile-collapsible:not(.tr-mobile-collapsed) .tr-mobile-toggle svg { transform: rotate(180deg); }

  .mobile-accordion.mobile-accordion-closed > :not(:first-child) { display: none !important; }
  .mobile-accordion.mobile-accordion-closed { height: auto !important; min-height: 0 !important; }
  .mobile-accordion-nested.mobile-accordion-closed > :first-child > :not(.cfg-card-header) { display: none !important; }
  .mobile-accordion > :first-child { display: flex; align-items: center; min-width: 0; gap: 5px; }
  .mobile-accordion-nested > :first-child { display: block; }
  .mobile-accordion-nested .cfg-card-header { display: flex; align-items: center; gap: 5px; }
  .mobile-accordion > :first-child .card-title, .mobile-accordion > :first-child .cfg-card-title { min-width: 0; flex: 1; overflow: visible; text-overflow: clip; white-space: normal; }
  .mobile-accordion.mobile-accordion-closed > :first-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
  .mobile-accordion-nested.mobile-accordion-closed .cfg-card-header { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
  .mobile-accordion-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 28px !important; padding: 0; margin-left: auto; flex: 0 0 auto; border: 0; border-radius: 6px; background: var(--bg3); color: var(--text2); cursor: pointer; }
  .mobile-accordion-toggle svg { transition: transform .15s ease; }
  .mobile-accordion:not(.mobile-accordion-closed) .mobile-accordion-toggle svg { transform: rotate(180deg); }

  #page-scheduler .sch-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #page-scheduler .sch-long-label { display: none; }
  #page-scheduler .sch-short-label { display: inline; }
  #page-scheduler .sch-form { padding: 9px; min-width: 0; }
  #page-scheduler .sch-card, #page-scheduler .sch-section-card { border-radius: 8px; }
  #page-scheduler .sch-section-card { padding: 8px; margin-bottom: 8px; }
  #page-scheduler .sch-sec-title { font-size: 10px; letter-spacing: 0; min-width: 0; flex: 1; margin-bottom: 0; }
  #page-scheduler .sch-section-card > :first-child { gap: 5px; margin-bottom: 7px; }
  #page-scheduler .sch-section-card > :first-child > div:last-of-type { gap: 4px; flex-shrink: 0; }
  #page-scheduler .sch-section-card > :first-child button:not(.mobile-accordion-toggle) { font-size: 10px; min-height: 28px; }
  #page-scheduler .sch-section-card > p, #page-scheduler .sch-section-card > .text-slate-400 { display: none; }
  #page-scheduler .sch-platform-options { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #page-scheduler .sch-platform-options .sch-plat-card:last-child { grid-column: auto; }
  #page-scheduler .sch-plat-card { padding: 7px 8px; border-radius: 6px; }
  #page-scheduler .sch-plat-card > div:first-child > span { display: none; }
  #page-scheduler .sch-plat-card label { font-size: 11px; }
  #page-scheduler .sch-form input, #page-scheduler .sch-form select, #page-scheduler .sch-form textarea { min-width: 0; font-size: 11px; padding: 6px 8px; }
  #page-scheduler .sch-tab-btn { font-size: 10px; padding: 5px 6px; white-space: normal; }
  #page-scheduler .sch-stat { padding: 8px; }
  #page-scheduler .sch-stat b { font-size: 17px; }
  #page-scheduler .sch-shell > div:first-child h1 { font-size: 12px; }
  #page-scheduler .sch-shell > div:first-child p { display: none; }
}

@media (max-width: 390px) {
  #page-content #cpt-panel-files > div:first-child > div:first-child { flex-wrap: wrap; }
  #page-content #cpt-panel-files > div:first-child > div:first-child > div { min-width: 0; max-width: none !important; }
}