/* =========================================================
     AI CONTENT STUDIO — Create Post / Content Ideas / My AI Videos
     Built entirely on the app's existing design tokens (--purple-*, --ink-*,
     --card-bg, --page-bg, --border, --radius-*) so it follows light/dark
     theme automatically. The "Create with AI" surfaces intentionally use a
     fixed dark/gradient treatment (see bottom of file) to signal "this is
     AI-generated" — same idea as the rest of the app's --purple-600 accent,
     just turned up for that one surface.
  ========================================================= */

  .cs-grid > *{min-width:0;}
  @media (max-width:900px){ .cs-grid{grid-template-columns:minmax(0,1fr) !important;} }

  /* ---------- Connected-account chips (Create Post) ---------- */
  .cs-acct-row{display:flex; flex-wrap:nowrap; gap:6px;}
  @media (max-width:560px){ .cs-acct-row{flex-wrap:wrap;} .cs-acct{flex:1 1 calc(50% - 6px) !important;} }
  .cs-acct{
    display:flex; align-items:center; gap:6px; flex:1; min-width:0; cursor:pointer;
    border:1px solid var(--border); border-radius:16px; padding:5px 10px 5px 5px;
    transition:border-color .12s ease, background .12s ease;
  }
  .cs-acct:hover{border-color:var(--ink-300);}
  .cs-acct.active{border-color:var(--purple-500); background:var(--purple-50);}
  .cs-acct.disabled{opacity:.55;}
  .cs-acct-avatar{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .cs-acct-avatar svg{width:12px; height:12px;}
  .cs-acct-name{font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-900);}
  .cs-acct-connect{font-size:10.5px; color:var(--purple-600); font-weight:600;}

  /* ---------- Composer ---------- */
  .cs-composer-box{border:1px solid var(--border); border-radius:12px; overflow:hidden;}
  .cs-composer-box textarea{border:none; box-shadow:none;}
  .cs-composer-toolbar{display:flex; align-items:center; gap:4px; border-top:1px solid var(--border); padding:8px 10px;}
  .cs-tool-btn{
    display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:8px; border:none; background:none;
    cursor:pointer; font-size:12.3px; font-weight:600; color:var(--ink-500); font-family:inherit;
  }
  .cs-tool-btn svg{width:15px; height:15px;}
  .cs-tool-btn:hover{background:var(--ink-100);}
  .cs-tool-btn.ai{color:var(--purple-600);}
  /* .loading buttons now use the shared button loader (css/button-loading.css) */
  @keyframes csSpin{to{transform:rotate(360deg);}}

  /* Generic loading state for any AI-triggering button on these pages
     (Ideas "Generate ideas with AI", My AI Videos "Add to video queue",
     etc.) — same visual language as the compose caption spinner above,
     so every AI action in AI Studio feels consistent. */
  .cs-ai-video-btn.loading, #csAiGenerateBtn.loading, #csEmptyGenBtn.loading{opacity:.7; cursor:not-allowed; pointer-events:none;}

  .cs-ai-options{display:none; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);}
  .cs-ai-options.show{display:block;}
  .cs-field-label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500); margin-bottom:8px;}

  .cs-pill-row{display:flex; flex-wrap:wrap; gap:8px;}
  .cs-pill { border:1px solid var(--border); background:var(--card-bg); color:var(--ink-500); cursor:pointer; transition:all .12s ease; }
  .cs-pill:hover{border-color:var(--ink-300); color:var(--ink-900);}
  .cs-pill.active{background:var(--purple-600); border-color:var(--purple-600); color:#fff;}

  .cs-tone-row{display:flex; gap:2px; background:var(--ink-100); padding:3px; border-radius:16px; width:fit-content; margin-top:10px;}
  .cs-tone-opt{padding:5px 13px; border-radius:14px; font-size:12px; font-weight:600; color:var(--ink-500); cursor:pointer;}
  .cs-tone-opt.active{background:var(--card-bg); color:var(--ink-900); box-shadow:var(--shadow-sm); font-weight:700;}

  .cs-hashtag-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
  .cs-htag{font-size:12px; padding:4px 10px; border-radius:7px; background:var(--purple-50); color:var(--purple-600); font-weight:600; cursor:pointer;}
  .cs-htag:hover{background:var(--purple-100);}

  .cs-format-row{display:flex; gap:6px; margin-top:14px;}
  .cs-format-opt{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 6px;
    border-radius:10px; border:1px solid var(--border); font-size:12.3px; font-weight:600; color:var(--ink-500); cursor:pointer;
  }
  .cs-format-opt svg{width:15px; height:15px;}
  .cs-format-opt:hover{border-color:var(--ink-300);}
  .cs-format-opt.active{border-color:var(--purple-500); background:var(--purple-50); color:var(--purple-600);}

  .cs-format-notice{
    display:none; align-items:center; gap:7px; margin-top:10px; padding:8px 11px; border-radius:8px;
    background:var(--amber-50); color:var(--amber-600); font-size:11.8px;
  }
  .cs-format-notice.show{display:flex;}
  .cs-format-notice svg{width:14px; height:14px; flex-shrink:0;}

  .cs-dropzone{margin-top:14px; border:1.5px dashed var(--border); border-radius:12px; padding:22px; text-align:center; cursor:pointer; transition:all .12s ease;}
  .cs-dropzone:hover, .cs-dropzone.drag{border-color:var(--purple-500); background:var(--purple-50);}
  .cs-dropzone svg{width:22px; height:22px; color:var(--ink-500); margin-bottom:6px;}
  .cs-dropzone p{font-size:12.5px; color:var(--ink-500);}
  .cs-dropzone p b{color:var(--purple-600);}
  .cs-hint{font-size:11px; color:var(--ink-300); margin-top:2px;}

  .cs-thumb-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
  .cs-thumb{width:64px; height:64px; border-radius:8px; overflow:hidden; position:relative; border:1px solid var(--border); cursor:grab;}
  .cs-thumb img{width:100%; height:100%; object-fit:cover;}
  .cs-thumb-order{position:absolute; bottom:2px; left:2px; background:rgba(0,0,0,.6); color:#fff; font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px;}
  .cs-thumb-rm{position:absolute; top:2px; right:2px; width:16px; height:16px; background:rgba(0,0,0,.6); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer;}

  /* ---------- Schedule ---------- */
  .cs-radio-opt{flex:1; border:1px solid var(--border); border-radius:12px; padding:11px 12px; cursor:pointer; display:flex; align-items:center; gap:9px; transition:all .12s ease;}
  .cs-radio-opt:hover{border-color:var(--ink-300);}
  .cs-radio-opt.active{border-color:var(--purple-500); background:var(--purple-50);}
  .cs-radio-circle{width:16px; height:16px; border-radius:50%; border:1.5px solid var(--ink-300); flex-shrink:0; position:relative;}
  .cs-radio-opt.active .cs-radio-circle{border-color:var(--purple-600);}
  .cs-radio-opt.active .cs-radio-circle::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--purple-600);}
  .cs-schedule-fields{display:none;}
  .cs-schedule-fields.show{display:block;}

  /* ---------- Live preview ---------- */
  #csPreviewTabs.mkt-tabs{justify-content:center; padding:4px; background:var(--ink-100); border-radius:12px; overflow-x:visible;}
  #csPreviewTabs .mkt-tab{flex:1; justify-content:center; text-align:center;}
  #csPreviewTabs .mkt-tab.active{background:var(--card-bg); box-shadow:var(--shadow-sm);}
  #csPreviewTabs .mkt-tab.off{opacity:.45;}
  @media (max-width:560px){ #csPreviewTabs.mkt-tabs{overflow-x:auto;} #csPreviewTabs .mkt-tab{flex:0 0 auto;} }
  .cs-pv-card { border:1px solid var(--border); overflow:hidden; }
  .cs-pv-head{display:flex; align-items:center; gap:8px; padding:10px 12px;}
  .cs-pv-avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--purple-100),var(--purple-200)); flex-shrink:0;}
  .cs-pv-head b{font-size:13px;}
  .cs-pv-meta{font-size:11px; color:var(--ink-500);}
  .cs-pv-media{width:100%; aspect-ratio:1.3/1; background:var(--ink-100); display:flex; align-items:center; justify-content:center; color:var(--ink-300); font-size:12px; position:relative;}
  .cs-pv-media img{width:100%; height:100%; object-fit:cover;}
  .cs-pv-media.reel{aspect-ratio:9/16; max-width:200px; margin:0 auto; background:#111; border-radius:8px; overflow:hidden;}
  .cs-pv-media.reel img{opacity:.85;}
  .cs-pv-media.empty{color:var(--ink-300);}
  .cs-pv-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff;}
  .cs-pv-play svg{width:30px; height:30px;}
  .cs-pv-badge{position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px;}
  .cs-pv-caption{padding:8px 12px 14px; font-size:13px; line-height:1.5;}
  .cs-pv-gmb-btn{margin:0 12px 12px; padding:9px; text-align:center; border:1px solid var(--purple-500); color:var(--purple-600); border-radius:8px; font-size:12.3px; font-weight:700;}
  .cs-pv-wa-wrap{background:#E5DDD5; padding:16px;}
  .cs-pv-wa-bubble{background:#DCF8C6; border-radius:8px 8px 8px 2px; padding:8px 10px; font-size:13px; line-height:1.5; max-width:90%; color:#111;}

  /* ---------- Scheduled & Recent Posts ---------- */
  .cs-post-row{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; margin-bottom:10px;}
  .cs-post-thumb{width:56px; height:56px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--ink-100);}
  .cs-post-thumb-empty{display:flex; align-items:center; justify-content:center; color:var(--ink-300);}
  .cs-post-thumb-empty svg{width:22px; height:22px;}
  .cs-post-body{flex:1; min-width:0;}
  .cs-post-caption{font-size:13px; color:var(--ink-700); margin:6px 0 8px; line-height:1.45; word-break:break-word;}
  .cs-post-status-pill.draft{background:var(--ink-100); color:var(--ink-500);}
  .cs-post-status-pill.scheduled{background:var(--purple-50); color:var(--purple-600);}
  .cs-post-status-pill.queued_for_publish{background:var(--purple-50); color:var(--purple-600);}
  .cs-post-status-pill.published{background:var(--green-50,#ecfdf5); color:var(--green-600,#059669);}
  .cs-post-status-pill.failed{background:var(--red-50,#fef2f2); color:var(--red-600,#dc2626);}
  .cs-plat-chip-row{display:flex; flex-wrap:wrap; gap:6px;}
  .cs-plat-chip{font-size:11px; font-weight:600; padding:3px 9px; border-radius:8px; background:var(--ink-100); color:var(--ink-500);}
  .cs-plat-chip.success{background:var(--green-50,#ecfdf5); color:var(--green-600,#059669);}
  .cs-plat-chip.failed{background:var(--red-50,#fef2f2); color:var(--red-600,#dc2626); cursor:help;}
  .cs-plat-chip.pending{background:var(--ink-100); color:var(--ink-500);}
  .cs-post-actions{display:flex; flex-direction:column; gap:6px; flex-shrink:0;}
  .cs-post-actions .btn-secondary{margin:0; font-size:12px; padding:6px 12px; display:flex; align-items:center; gap:5px; white-space:nowrap;}
  .cs-post-actions .btn-secondary svg{width:13px; height:13px;}
  @media (max-width:560px){ .cs-post-row{flex-wrap:wrap;} .cs-post-actions{flex-direction:row; width:100%;} .cs-post-actions .btn-secondary{flex:1; justify-content:center;} }

  /* ---------- Calendar ---------- */
  .cs-cal-dow{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; font-weight:700; color:var(--ink-500); margin-bottom:6px;}
  .cs-cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
  .cs-cal-cell{min-height:92px; border:1px solid var(--border); border-radius:10px; padding:6px; background:var(--card-bg);}
  .cs-cal-cell.empty{border:none; background:transparent;}
  .cs-cal-cell.today{border-color:var(--purple-500);}
  .cs-cal-daynum{font-size:11px; font-weight:700; color:var(--ink-500); margin-bottom:4px;}
  .cs-cal-cell.today .cs-cal-daynum{color:var(--purple-600);}
  .cs-cal-chips{display:flex; flex-direction:column; gap:3px;}
  .cs-cal-chip{font-size:10.3px; font-weight:600; padding:3px 6px; border-radius:5px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--purple-50); color:var(--purple-600);}
  .cs-cal-chip.published{background:var(--green-50,#ecfdf5); color:var(--green-600,#059669);}
  .cs-cal-chip.failed{background:var(--red-50,#fef2f2); color:var(--red-600,#dc2626);}
  .cs-cal-chip.active{outline:2px solid var(--purple-500); outline-offset:1px;}
  @media (max-width:700px){ .cs-cal-dow{display:none;} .cs-cal-days{grid-template-columns:repeat(7,minmax(38px,1fr)); gap:3px;} .cs-cal-cell{min-height:60px; padding:3px;} .cs-cal-chip{font-size:9px; padding:2px 3px;} }

  /* ---------- Analytics ---------- */
  .cs-an-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
  .cs-an-card{padding:14px 16px; display:flex; flex-direction:column; gap:4px;}
  .cs-an-label{font-size:11.5px; color:var(--ink-500); font-weight:600;}
  .cs-an-value{font-size:22px;}
  .cs-an-top-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px;}
  .cs-an-top-item{display:flex; gap:10px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:10px;}
  @media (max-width:700px){ .cs-an-cards{grid-template-columns:repeat(2,1fr);} .cs-an-top-grid{grid-template-columns:1fr;} }
  .cs-pv-wa-time{font-size:10px; color:#4a4a4a; text-align:right; margin-top:4px;}

  /* ---------- Content Ideas ---------- */
  @media (max-width:720px){ #csIdeaGrid{grid-template-columns:1fr !important;} }
  .cs-idea-card{padding:16px;}
  .cs-idea-score{margin-left:auto; font-size:13px; font-weight:800; color:var(--green-600); font-variant-numeric:tabular-nums;}
  .cs-link{font-size:11.5px; color:var(--ink-300); cursor:pointer;}
  .cs-link:hover{color:var(--ink-700); text-decoration:underline;}
  .cs-dismiss-panel{display:none; margin-top:8px; padding-top:8px; border-top:1px solid var(--border);}
  .cs-dismiss-panel.show{display:block;}

  .modal-cs-script{max-width:600px;}
  .cs-hook-opt{border:1.5px solid var(--border); border-radius:10px; padding:11px 13px; cursor:pointer; transition:all .12s ease;}
  .cs-hook-opt:hover{border-color:var(--ink-300);}
  .cs-hook-opt.active{border-color:var(--purple-500); background:var(--purple-50);}

  /* ---------- "Create with AI" accent — intentionally distinct everywhere it appears ---------- */
  .cs-ai-video-btn{
    display:flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0;
    background:linear-gradient(120deg, var(--purple-50), var(--card-bg) 70%); border:1px solid var(--purple-100);
    color:var(--purple-600); font-size:12.6px; font-weight:700; padding:9px 14px; border-radius:11px; cursor:pointer;
  }
  .cs-ai-video-btn svg{width:14px; height:14px;}
  .cs-ai-video-btn:hover{background:var(--purple-50);}

  .cs-ai-modal .modal{ }
  .cs-ai-modal.modal-overlay .modal,
  .modal.cs-ai-modal{
    background:linear-gradient(180deg, #17151D 0%, #100E14 100%); color:#F4F2F7; border:1px solid rgba(255,255,255,.07);
    box-shadow:0 0 0 1px rgba(139,92,246,.14), 0 24px 60px rgba(0,0,0,.55);
  }
  .modal.cs-ai-modal .modal-close{background:rgba(255,255,255,.08); color:#DCD8E6;}
  .modal.cs-ai-modal .modal-close:hover{background:rgba(255,255,255,.16);}
  .cs-ai-modal-spark{
    width:16px; height:16px; display:inline-flex; flex-shrink:0;
    background:linear-gradient(135deg,#4DE8D1,#8B5CF6); -webkit-mask:none;
    color:transparent; background-clip:text; -webkit-background-clip:text;
  }
  .cs-ai-modal-spark svg{ width:16px; height:16px; }
  .modal.cs-ai-modal .cs-field-label{color:#9C97A8;}
  .modal.cs-ai-modal .cs-pill{background:#1E1B26; border-color:#2E2A38; color:#B6B0C4;}
  .modal.cs-ai-modal .cs-pill.active{background:linear-gradient(135deg,#4DE8D1,#8B5CF6); border-color:transparent; color:#100E14;}
  .modal.cs-ai-modal .btn-primary{background:linear-gradient(90deg,#4DE8D1,#8B5CF6 55%,#F472B6); box-shadow:0 10px 26px rgba(139,92,246,.35);}
  .modal.cs-ai-modal .btn-primary:disabled{background:#2A2732; box-shadow:none; color:#615C6E;}
  .modal.cs-ai-modal .empty-ic{color:#4DE8D1;}
  .modal.cs-ai-modal .empty-ic svg{width:30px; height:30px;}

  /* ---------- My AI Videos library ---------- */
  .cs-video-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  @media (max-width:900px){ .cs-video-grid{grid-template-columns:repeat(2,1fr);} }
  .cs-video-card{
    background:linear-gradient(180deg,#17151D,#100E14); border-radius:12px; overflow:hidden;
    border:1px solid rgba(255,255,255,.07); box-shadow:0 0 0 1px rgba(139,92,246,.08), 0 10px 24px rgba(0,0,0,.3);
  }
  .cs-video-thumb{aspect-ratio:9/16; background:linear-gradient(160deg,#241F2E,#100E14); display:flex; align-items:center; justify-content:center; position:relative; color:#F4F2F7;}
  .cs-video-thumb svg{width:24px; height:24px; opacity:.85;}
  .cs-video-status-badge{position:absolute; top:7px; left:7px; font-size:9.5px; font-weight:700; padding:3px 7px; border-radius:5px; background:rgba(0,0,0,.55); color:#DCD8E6; display:flex; align-items:center; gap:4px;}
  .cs-video-status-badge.pending{color:#C4B5FD;}
  .cs-video-status-badge.pending svg{width:10px; height:10px; animation:csSpin .8s linear infinite;}
  .cs-video-status-badge.failed{background:rgba(244,63,94,.28); color:#FDA4AF;}
  .cs-video-error{font-size:10px; color:#FDA4AF; margin-top:4px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; cursor:help;}
  .cs-video-badge{position:absolute; bottom:7px; left:7px; font-size:9px; font-weight:700; padding:3px 7px; border-radius:5px;}
  .cs-video-badge.used{background:rgba(77,232,209,.18); color:#4DE8D1;}
  .cs-video-title{font-size:12px; font-weight:700; color:#F4F2F7; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .cs-video-meta{font-size:10.3px; color:#8B869A; margin-top:4px;}
  .cs-video-actions{display:flex; gap:5px; margin-top:9px;}
  .cs-vbtn{flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#DCD8E6; border-radius:6px; padding:7px 0; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .cs-vbtn svg{width:14px; height:14px;}
  .cs-vbtn:hover{background:rgba(255,255,255,.12);}
  .cs-vbtn.danger:hover{background:rgba(244,63,94,.18); color:#FDA4AF;}