/* Autoposter UI — Dark theme matching login */
:root{
  --bg:#0b1220; --bg-2:#0e1730; --card:#0f1a33; --border:#253455; --text:#e7ecf6; --muted:#9fb0d0; --accent:#4c7fff; --accent-2:#87aaff; --danger:#ff6b6b;
}
*, *::before, *::after{ box-sizing:border-box; }
html, body{ min-height:100%; }
html{ background: var(--bg); }
body{
  margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: transparent;
}
/* Single, fixed gradient layer to avoid seams on long pages */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(19,32,68,.9) 0%, rgba(19,32,68,0) 55%),
    radial-gradient(1000px 900px at 110% 110%, rgba(14,25,56,.9) 0%, rgba(14,25,56,0) 52%),
    linear-gradient(180deg, #0b1220 0%, #090f1a 100%);
  background-repeat: no-repeat;
  will-change: transform;
  transform: translateZ(0);
}

/* Layout */
.container{ width:min(1120px, 100%); margin:0 auto; padding:28px 16px 40px; }
header.app{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap }
@media (max-width: 860px){ header.app{ flex-direction:column; align-items:flex-start; gap:8px } }
.brand{ display:flex; align-items:center; gap:10px; }
.badge{ width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:grid; place-items:center; font-weight:800; color:#0b1220; }
h1, h2, h3{ margin:0 0 10px; letter-spacing:.2px; }
p, small{ color:var(--muted); }

/* Cards */
article, .card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border:1px solid var(--border);
  border-radius:14px; padding:18px; box-shadow: 0 10px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  margin:14px 0;
}

/* Forms */
label{ display:block; color:#cbd6ee; font-size:13px; margin:.35rem 0; }
input[type="text"], input[type="datetime-local"], input[type="email"], input[type="password"], input[type="file"], input[type="number"], input[type="tel"], input[type="url"], select, textarea{
  width:100%; max-width:100%; display:block; padding:11px 12px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg-2); color:var(--text);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  font-size: 16px; /* Prevents iOS zoom on focus */
}
textarea{ resize: vertical; }
input::placeholder, textarea::placeholder{ color:#7d8fb5; }
input:focus, select:focus, textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(76,127,255,.18);
}

/* Buttons */
button, .btn{
  appearance:none; border:0; border-radius:10px; cursor:pointer; font-weight:700;
  background:linear-gradient(135deg, var(--accent), #2e6bff); color:white;
  box-shadow: 0 6px 18px rgba(76,127,255,.35); padding:11px 14px;
}
button.secondary, .btn.secondary{
  background:transparent; color:var(--accent-2); border:1px solid var(--border);
  box-shadow:none;
}
button.outline, .btn.outline{ background:transparent; border:1px solid var(--border); color:var(--text); }
button:hover, .btn:hover{ filter:brightness(1.05); }
button:active, .btn:active{ transform: translateY(1px); }
button:disabled{ opacity:.7; cursor:not-allowed; }
.inline-btn{ font-size:.9rem; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text); }
.mini-btn{ font-size:12px; padding:4px 8px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer }
.mini-btn.outline{ background:transparent; border:1px solid var(--border); color:var(--accent-2) }

/* Links */
a{ color:var(--accent-2); text-decoration:none; }
a:hover{ text-decoration:underline; }
nav a{ color:var(--accent-2); }

/* Grid */
.grid{ display:grid; gap:1rem; }
@media (min-width: 760px){ .grid{ grid-template-columns:1fr 1fr; } }

/* Connections grid: responsive auto-fit cards */
.connections-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items:stretch }
@media (min-width: 420px){ .connections-grid{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.connections-grid .card.conn{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.connections-grid .card.conn .meta-line{ min-height:22px; margin-bottom:8px; display:flex; align-items:center; gap:6px; overflow:hidden }
.connections-grid .card.conn .meta-line .mono{ margin-left:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:100% }
.connections-grid .connect-btn{ width:100%; margin-top:auto }

/* Status pills */
.status{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.8rem; border:1px solid var(--border); background:rgba(255,255,255,.03); }
.draft{ color:#bfcbe7; background:rgba(159,176,208,.08); }
.scheduled{ color:#ffe7a3; background:rgba(254,243,199,.12); border-color:#524318; }
.publishing{ color:#b5d0ff; background:rgba(219,234,254,.1); border-color:#203a70; }
.published{ color:#b8f1c9; background:rgba(220,252,231,.08); border-color:#1b4d2c; }
.failed{ color:#ffb2b2; background:rgba(254,226,226,.08); border-color:#5c1b1b; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dot{ display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;background:#6b7280 }
.dot-green{ background:#22c55e }

/* Generic table */
table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
thead th{ text-align:left; font-size:.9rem; color:#cbd6ee; background:rgba(255,255,255,.02); }
th, td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:rgba(255,255,255,.02); }

/* Details */
details{ border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:rgba(255,255,255,.02); }
details[open]{ background:rgba(255,255,255,.04); }
summary{ cursor:pointer; color:var(--text); list-style:none; }
details > summary::-webkit-details-marker{ display:none }

/* Platform rows (settings) */
.plat-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.plat-row .left{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 }
.plat-row .meta{ opacity:.8; font-size:.9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted) }
.plat-settings{ display:none; padding:.5rem 0 0 1.25rem }
.plat-settings textarea{ width:100% }

/* Busy overlay */
#genOverlay{ position:fixed; inset:0; background:rgba(5,10,20,.6); display:none; align-items:center; justify-content:center; z-index:9999 }
#genOverlay .box{ background: var(--card); padding:1rem 1.25rem; border-radius:12px; border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.35); min-width:260px; text-align:center }
.spinner{ width:22px;height:22px;border:3px solid rgba(229,231,235,.2);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:spin 1s linear infinite;margin-right:.5rem;vertical-align:-5px }
@keyframes spin{to{transform:rotate(360deg)}}

/* Misc */
code{ background:rgba(255,255,255,.06); padding:.15rem .35rem; border-radius:6px; border:1px solid var(--border); color:#e7ecf6 }
.muted{ color:var(--muted); }

/* Posts list (mobile-first) */
/* Posts table (responsive) */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; border:1px solid var(--border); border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.table-wrap table{ border:0; margin:0; }
.posts-table{ min-width: 680px; table-layout: fixed; }
.posts-table thead th{ position: sticky; top: 0; z-index: 2; backdrop-filter: blur(4px); }
.posts-table .col-id{ width:68px; white-space:nowrap }
.posts-table .col-topic{ width: clamp(280px, 40%, 560px); }
.posts-table .col-when{ width:170px; white-space:nowrap }
.posts-table .col-status{ width:120px; white-space:nowrap }
.posts-table .topic-cell{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.pl-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.pl-badge{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.03); max-width:100%; overflow:hidden }
.pl-badge .mono{ max-width:8ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pl-badge .status{ white-space:nowrap }
.pl-badge .pl-link{ flex:0 0 auto }
.pl-badge .metrics-btn, .pl-badge .save-lib-btn{ flex:0 0 auto }
.pl-link{ color:var(--accent-2); white-space:nowrap }
.pl-error{ color:#ffb2b2; font-size:.85rem; word-break: break-word }
.pagination{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px }
.page-btn{ border:1px solid var(--border); padding:6px 10px; border-radius:8px; color:var(--text); text-decoration:none }
.page-btn[aria-disabled="true"]{ opacity:.6; pointer-events:none }
.page-info{ color:var(--muted) }
@media (max-width: 640px){
  .table-wrap{ overflow-x: visible; border:0; background: transparent; }
  .posts-table{ min-width: 0; table-layout: auto; display:block; }
  .posts-table thead{ display:none; }
  .posts-table tbody{ display:grid; gap:12px; }
  .posts-table tr{ display:block; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); padding:10px 12px; }
  .posts-table td{ display:grid; grid-template-columns: 100px 1fr; gap:8px; padding:6px 0; border-bottom:0; }
  .posts-table td + td{ border-top:1px solid var(--border); }
  .posts-table td::before{ content: attr(data-label); color:var(--muted); font-weight:600; }
  .posts-table .topic-cell{ white-space: normal; overflow: visible; text-overflow: initial; }
  .pl-badges{ gap:8px; }
  .pl-badge{ padding:6px 8px; }
}

/* Fix long content overflow within table cells */
.posts-table td{ overflow:hidden; }
.posts-table .col-platforms{ overflow:visible; }
/* Image instruction variants */
.ii-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ii-card{
  border:1px solid var(--border); border-radius:14px; padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  display:flex; flex-direction:column; gap:10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.ii-card header{ display:none }
.ii-row{ display:flex; align-items:center; gap:10px }
.ii-row-title{ justify-content:space-between }
.ii-row-type{ justify-content:space-between; margin-top:4px }
.ii-row-type .ii-type{ flex:1 1 auto }
.ii-row-type .ii-cog{ margin-left:auto }
.ii-cog{
  border:0; border-radius:12px; padding:8px 12px; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), #2e6bff); color:#fff;
  box-shadow: 0 6px 18px rgba(76,127,255,.35);
}
.ii-cog:hover{ filter:brightness(1.04) }
.ii-card textarea{ min-height:150px }
.ii-add{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--border); border-radius:12px; padding:20px;
  color:var(--accent-2); cursor:pointer; background:rgba(255,255,255,.02)
}
.ii-add:hover{ background:rgba(255,255,255,.04) }
.ii-pill{ display:inline-block; padding:3px 9px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.05); font-size:12px; color:var(--muted) }
/* Make the label input look like a compact pill and prevent it from stretching too wide */
.ii-label{ width:100%; flex:1 1 auto !important; min-width:0; max-width:none; padding:10px 12px; border-radius:12px; background:var(--bg-2); border:1px solid var(--border) }
.ii-actions{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap }
.ii-buttons{ display:flex; gap:6px; flex-wrap:wrap }

@media (max-width: 560px){
  .ii-grid{ grid-template-columns: 1fr; }
  .ii-actions{ flex-direction:column; align-items:stretch }
  .ii-buttons{ justify-content:flex-start }
}
/* Nicer mini buttons within the card without affecting global mini buttons */
.ii-card .mini-btn{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.03); border-color:var(--border) }
.ii-card .mini-btn.outline{ background:transparent }

#designModeForm[data-mode="image"] #agentOptions { /* JS controls visibility now */ }
/* Fallback: always respect aria-hidden on agent options */
#agentOptions[aria-hidden="true"] { display:none !important; }
#agentOptions[aria-hidden="false"] { display:block; }