/* Sidebar */
#sidebar{
  width:var(--sidebar-w); border-right:1px solid var(--border); background:var(--sidebar);
  display:flex; flex-direction:column; gap:12px; padding:16px;
  height: 100vh; position:relative; overflow:hidden;
}
#sidebar .sidebar-header{display:flex; align-items:center; gap:8px}
#sidebar h1{font-size:16px; margin:0; color:#0b1220; font-weight:700; letter-spacing:.2px}
#newPostBtn{margin-left:auto}

/* Brand */
.brand{display:flex; align-items:center; gap:10px; padding:4px 4px 8px 4px}
.brand-mark{width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, #8b5cf6, #22d3ee); color:white; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px}
.brand-name{font-weight:700; color:#111827}
.brand-badge{margin-left:auto; font-size:12px; color:#98a2b3; background:transparent; border:1px solid transparent; border-radius:8px; padding:6px 8px; cursor:pointer}
.brand-badge:hover{background:var(--soft); border-color:var(--border)}

#newPostBtn.primary.solid.plus{display:flex; width:100%; align-items:center; gap:10px; justify-content:center; border-radius:12px; border:1px solid #101828; background:#101828; color:#fff; padding:12px}
#newPostBtn .plus-sign{font-size:16px; line-height:1}
#newPostBtn:hover{background:#0b1220}

.section-label{margin:8px 6px 0; font-size:11px; letter-spacing:.16em; color:#9aa3b2}

/* Sidebar footer */
.sidebar-footer{display:flex; align-items:center; gap:10px; padding:12px; border-top:1px solid var(--border)}
.user-avatar{width:28px; height:28px; border-radius:999px; background:#eef2ff; display:flex; align-items:center; justify-content:center}
.user-meta{display:flex; flex-direction:column}
.user-name{font-weight:600}
.user-plan{font-size:12px; color:var(--muted)}
.user-plan-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.user-actions{display:flex; align-items:center; gap:8px}
.settings-btn{background:transparent; border:1px solid var(--border); box-shadow:none; padding:6px 8px; border-radius:8px}
.settings-btn:hover{background:var(--soft)}
.settings-btn:hover{background:var(--soft); border-color:var(--border)}

/* Post list */
#postList{list-style:none; padding:0; margin:8px 0 0 0; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0; overflow:auto; padding-right:6px}
#postList > *{flex: 0 0 auto}
.post-row{display:flex; align-items:center; gap:8px; transition: opacity .25s ease, transform .25s ease, max-height .3s ease; max-height:120px; overflow:hidden}
.post-row.deleting{opacity:0; transform:translateX(-30px); max-height:0; margin:0; padding:0}
.post-select{flex:1; border:1px solid var(--border); border-radius:14px; padding:12px; background:#ffffff; cursor:pointer; text-align:left; transition: box-shadow .18s ease, border-color .18s ease, background .18s ease; display:flex; flex-direction:column; min-width:0; position:relative; padding-right:52px}
.post-select:hover{box-shadow: var(--shadow)}
.post-select.active{border-color:#e9ddff; background:#faf7ff}
.post-title{display:block; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.post-date{display:block; color:var(--muted); font-size:12px; margin-top:4px}
.post-trash{width:42px; height:42px; border-radius:10px; border:1px solid transparent; background:transparent; color:transparent; box-shadow:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; position:absolute; right:6px; top:50%; transform:translateY(-50%)}
.post-select:hover .post-trash{color:#9aa3b2}
.post-trash:hover{color:#ef4444 !important; background:#fee2e2; border-color:#fecaca; transform:translateY(-50%)}
.post-select:focus-visible{outline:none; border-color:var(--accent); box-shadow: 0 0 0 3px rgba(124,58,237,.15)}

/* Main panel */
#mainPanel{flex:1; display:flex; flex-direction:column; min-width:0; overflow:auto}
#postHeader{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); background:var(--panel)}
.title-wrap{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.title-icon{width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#7c3aed; background:#f5f3ff}
#titleInput{flex:1; min-width:0; background:#ffffff; color:var(--text); font-size:20px; font-weight:700; padding:12px 14px; border-radius:12px; border:1px solid var(--border); outline:none; transition: border-color .18s ease, box-shadow .18s ease}
#titleInput:focus{border-color:var(--accent); box-shadow: 0 0 0 3px rgba(124,58,237,.15)}
#meta{color:var(--muted); font-size:12px}
.header-right{margin-left:auto}
.pill{display:inline-flex; align-items:center; gap:8px; border:1px solid #e6f4ea; background:#f6fef9; color:#14532d; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600}
.pill .dot{width:8px; height:8px; border-radius:50%; background:#34d399}

/* Content area */
#contentSection{padding:24px 28px; display:flex; flex-direction:column; gap:10px}
.transcript-card{background:#fff; border:1px solid var(--border); border-radius:28px; box-shadow: 0 10px 30px rgba(2,6,23,0.06); padding:28px}
.transcript-card{position:relative}
.transcript-label{letter-spacing:.22em; font-size:11px; color:#cbd5e1; text-align:center; margin-bottom:12px}
#contentArea{resize:none; min-height:0; width:100%; border-radius:14px; background:transparent; color:#334155; border:0; outline:none; padding:16px; line-height:1.9; font-size:18px; overflow:hidden}
#contentArea::placeholder{color:#64748b}

/* Prompt bar */
#promptBar{padding:16px 28px; display:flex; flex-direction:column; gap:8px}
.prompt-box{display:flex; align-items:center; gap:10px; border:1px solid var(--border); background:#fff; box-shadow: 0 10px 30px rgba(2,6,23,0.06); border-radius:18px; padding:10px 12px}
.search-icon{color:#cbd5e1}
#promptInput{flex:1; min-height:56px; /* auto-grow via JS */ background:transparent; color:#0b1220; border:0; outline:none; padding:10px 8px; line-height:1.6; font-size:16px; overflow:hidden}
#promptInput::placeholder{color:#64748b}
.send.icon{width:40px; height:40px; border-radius:999px; background:#f5f3ff; border:1px solid #ede9fe; color:#7c3aed; display:flex; align-items:center; justify-content:center}
.send.icon:hover{background:#ede9fe}
.prompt-meta{display:flex; gap:18px; padding:0 6px 2px; color:#94a3b8; font-size:13px}
.prompt-meta .link{color:#7c3aed; font-weight:700}

/* Responsive */
@media (max-width: 920px){
  #sidebar{display:none}
}

/* Collapsed sidebar */
body.menu-collapsed #sidebar{width: var(--sidebar-w-collapsed); padding:12px 10px}
body.menu-collapsed #sidebar .brand-name,
body.menu-collapsed #sidebar .section-label,
body.menu-collapsed #sidebar #postList,
body.menu-collapsed #sidebar .sidebar-footer{display:none}
body.menu-collapsed #newPostBtn{width:44px; height:44px; padding:0; border-radius:12px}
body.menu-collapsed #newPostBtn span:not(.plus-sign){display:none}
body.menu-collapsed #sidebar .brand{flex-direction:column; align-items:center; gap:6px}
body.menu-collapsed #sidebar .brand-mark{width:44px; height:44px; font-size:16px}
body.menu-collapsed #sidebar .brand-badge{width:44px; height:32px; display:flex; align-items:center; justify-content:center}
#mainPanel .tabs{display:flex; align-items:center; gap:12px; padding:12px 20px 10px; border-bottom:1px solid var(--border); background:var(--panel)}
.tab-btn{
  appearance:none; flex:1; text-align:center;
  border:1px solid var(--border); background:#fff; color:var(--muted);
  padding:14px 18px; border-radius:14px; font-weight:700; font-size:15px; cursor:pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .08s ease, border-color .18s ease, color .18s ease;
}
.tab-btn:hover{background:#f8fafc; color:var(--text); border-color:#e2e8f0}
.tab-btn:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(124,58,237,.18)}
.tab-btn.active{background:#fff; border-color:var(--accent); color:var(--text); box-shadow: var(--shadow), inset 0 -3px 0 var(--accent)}

/* Publications (Julkaisut) */
#publishSection .pub-tools{display:grid; grid-template-columns: 280px 1fr; gap:16px}
#publishSection .pub-list-wrap{border:1px solid var(--border); border-radius:12px; padding:12px; background:#fff}
#publishSection .pub-list-label{font-size:12px; color:var(--muted); letter-spacing:.12em; margin-bottom:8px}
#publishSection .pub-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto}
#publishSection .pub-item{display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#fff; cursor:pointer}
#publishSection .pub-item.active{border-color:#e9ddff; background:#faf7ff}
#publishSection .pub-item-title{font-weight:600; color:var(--text)}
#publishSection .pub-item-info{font-size:12px; color:var(--muted)}
#publishSection .pub-delete{width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:transparent; color:#9aa3b2; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
#publishSection .pub-item:hover .pub-delete{color:#ef4444}
#publishSection .pub-delete:hover{background:#fee2e2; border-color:#fecaca}

#publishSection .pub-compose{border:1px solid var(--border); border-radius:12px; padding:12px; background:#fff; display:flex; flex-direction:column; gap:10px}
#publishSection .pub-templates .pub-template-buttons{display:flex; gap:8px; flex-wrap:wrap}
#publishSection .pub-templates .pub-template{padding:8px 10px}
#publishSection #pubPromptInput{width:100%; min-height:68px; resize:vertical; border:1px solid var(--border); border-radius:10px; padding:10px; font-size:15px}

#publishSection .pub-result{margin-top:16px; border:1px solid var(--border); border-radius:12px; background:#fff}
#publishSection .pub-result-label{padding:10px 12px; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); letter-spacing:.12em}
#publishSection .pub-content{padding:14px; white-space:normal; font-size:16px; line-height:1.7}
#publishSection .pub-content[contenteditable="true"]{outline:none}
#publishSection .pub-content[contenteditable="true"]:focus{box-shadow: inset 0 0 0 2px rgba(124,58,237,.25); border-radius:6px}
#publishSection .pub-meta{margin-top:16px; border:1px solid var(--border); border-radius:12px; background:#fff}
#publishSection .pub-meta-label{padding:10px 12px; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); letter-spacing:.12em}
#publishSection .pub-prompt{padding:12px; white-space:pre-wrap; font-size:14px; color:#0b1220}

/* Publications loading overlay */
#pubLoading.pub-loading-overlay{
  position: fixed; inset: 0; 
  background: rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; 
  z-index: 1000; /* above app UI */
}
#pubLoading .spinner{width:32px; height:32px; border-width:3px}
#pubLoading .pub-loading-text{font-weight:700; color:#334155}

/* Haastattelu split layout */
#haastatteluLayout.split{display:grid; grid-template-columns: minmax(0, 1fr) 380px; gap:16px; align-items:start}
#haastatteluMain{min-width:0; display:flex; flex-direction:column}
#haastatteluSide{min-width:0; position:sticky; top:12px; align-self:start; padding-right:20px}

@media (max-width: 1200px){
  #haastatteluLayout.split{grid-template-columns: 1fr}
  #haastatteluSide{position:static; padding-right:0}
}