/* ==========================================================================
   SCRIPT WRITER – MOBILE RESPONSIVE STYLES
   Targets ≤ 768 px. Desktop layout is untouched.
   ========================================================================== */

@media (max-width: 768px) {

  /* ── 1. Script Writer view wrapper ────────────────────────────────────── */

  #script-writer-view .content-header {
    /* already handled by global mobile.css but keep SW specific reset */
    padding-top: var(--space-2);
    margin-bottom: var(--space-2);
  }

  /* ── 2. Main chat container – fix height for top-bar + bottom-nav ─────── */

  .script-chat-container {
    height: calc(100dvh - 60px - 80px - 110px);
    /* 60px top-bar | 80px bottom-nav | ~110px content header */
    min-height: 400px;
    border-radius: var(--radius-md);
  }

  /* ── 3. Profile selector header ───────────────────────────────────────── */

  .profile-header-selector {
    gap: var(--space-2);
    margin-right: 0;
  }

  .profile-channel-thumb {
    width: 34px;
    height: 34px;
  }

  .profile-channel-name {
    font-size: 13px;
  }

  /* Profile dropdown – prevent off-screen overflow */
  .profile-dropdown {
    right: 0;
    left: auto;
    width: calc(100vw - 2 * var(--space-4));
    max-width: 320px;
  }

  /* ── 4. Chat messages area ────────────────────────────────────────────── */

  .chat-messages {
    padding: var(--space-3) var(--space-2);
  }

  .chat-message {
    max-width: 100%;
  }

  .message-bubble {
    max-width: 92%;
  }

  /* Disable horizontal shift that is only relevant on wide screens */
  .chat-message-ai.sources-active,
  .chat-interface.refining .chat-message-ai.sources-active,
  .chat-interface.refining .chat-message-ai {
    transform: translateX(0) !important;
    max-width: 100%;
    width: 100%;
  }

  /* ── 5. Script editor – header & content ─────────────────────────────── */

  /* Remove the desktop right-margin that reserves space for the sidebar */
  .message-script-header {
    margin-right: 0 !important;
  }

  /* Nav + action buttons: allow wrapping on very narrow screens */
  .message-script-nav,
  .message-script-actions {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .message-script-content {
    padding: var(--space-4);
    border-radius: 16px;
  }

  /* ── 6. Script body – sidebar panels go below the editor on mobile ────── */

  .message-script-body {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Script content fills full width */
  .message-script-content-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
  }

  /* ── 7. Integrated refinement panel ──────────────────────────────────── */

  .integrated-refine-container {
    width: 100%;
    position: static; /* No sticky on mobile */
  }

  .refine-suggestions-box,
  .refine-input-box {
    border-radius: 16px;
    padding: var(--space-4);
  }

  /* ── 8. Integrated sources panel ─────────────────────────────────────── */

  .integrated-sources-container {
    width: 100%;
    position: static;
  }

  .sources-panel-box {
    border-radius: 16px;
    padding: var(--space-4);
    max-height: 40vh;
  }

  /* ── 9. Floating refinement bar (refine-sidebar overlay) ─────────────── */

  .refine-sidebar {
    width: 100%;
    top: auto;
    bottom: 0;
    height: 55vh;
    /* Slide up from bottom instead of right */
    transform: translateY(100%);
    border-left: none;
    border-top: 1px solid var(--color-border-light);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  }

  .refine-sidebar.active {
    transform: translateY(0);
  }

  /* ── 10. Floating text-selection bar ─────────────────────────────────── */

  .selection-refine-bar {
    left: var(--space-3) !important;
    right: var(--space-3) !important;
    bottom: 90px !important; /* stay above bottom nav */
    width: auto !important;
    border-radius: 16px;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }

  .selection-refine-input {
    width: 100%;
    min-width: 0;
    font-size: 15px; /* larger tap target */
  }

  /* ── 11. Refinement preview bar ───────────────────────────────────────── */

  .refinement-preview-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: 12px;
  }

  .refinement-preview-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* ── 12. Chat input area ─────────────────────────────────────────────── */

  .chat-input-container {
    padding: var(--space-3) var(--space-2);
  }

  .sw-chat-input-box {
    padding: var(--space-3) var(--space-4);
    border-radius: 20px;
  }

  /* Pills scroll horizontally instead of wrapping on small screens */
  .chat-input-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .chat-input-pills::-webkit-scrollbar {
    display: none;
  }

  /* Keep the send button and actions accessible */
  .sw-chat-input-bottom {
    gap: var(--space-2);
  }

  /* ── 13. Chat welcome / start screen ─────────────────────────────────── */

  .chat-initial-selection {
    padding: var(--space-4) var(--space-3);
    gap: var(--space-4);
  }

  .chat-welcome {
    margin-bottom: var(--space-4);
  }

  .chat-welcome h3 {
    font-size: 20px;
  }

  .chat-start-option {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }

  .chat-start-option .option-icon {
    width: 36px;
    height: 36px;
  }

  .chat-start-option h4 {
    font-size: var(--font-size-sm);
  }

  /* ── 14. Rules popover ───────────────────────────────────────────────── */

  .rules-popover {
    right: 0;
    left: auto;
    min-width: 260px;
    max-width: calc(100vw - var(--space-6));
  }

  /* ── 15. Time dropdown ───────────────────────────────────────────────── */

  .time-dropdown {
    left: auto;
    right: 0;
  }

  /* ── 16. Attach dropdown ─────────────────────────────────────────────── */

  .attach-dropdown {
    left: 0;
    right: auto;
  }

  .sw-attachment-chip {
    max-width: 140px;
  }

  .sw-attachment-chip-preview {
    width: 20px;
    height: 20px;
  }

}

/* ── Smaller phones (≤ 480 px) ──────────────────────────────────────────── */

@media (max-width: 480px) {

  .script-chat-container {
    height: calc(100dvh - 60px - 75px - 100px);
    min-height: 340px;
  }

  .message-script-content {
    padding: var(--space-3);
    border-radius: 12px;
  }

  .refine-sidebar {
    height: 60vh;
  }

  .chat-welcome h3 {
    font-size: 18px;
  }

  .chat-welcome p {
    font-size: var(--font-size-xs);
  }

  /* Script title text stays on one line and truncates */
  .message-script-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }

  /* Script action buttons – show icon only to save space */
  .script-action-btn span {
    display: none;
  }

  .script-action-btn {
    padding: var(--space-2);
  }
}