/* kiara-layout.css — Layout principal */

/* ── App shell ────────────────────────────────────────────── */
.k-app{display:flex;min-height:100vh}

/* ── Sidebar ──────────────────────────────────────────────── */
.k-sidebar{width:var(--k-sidebar-w);background:var(--k-sidebar-bg);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:var(--k-z-sticky);transition:transform var(--k-t-slow);overflow-y:auto}
.k-sidebar-logo{padding:1.125rem 1.125rem .875rem;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.k-sidebar-logo img{width:34px;height:34px;border-radius:8px;object-fit:contain;background:rgba(255,255,255,.1);flex-shrink:0}
.k-sidebar-logo-text strong{display:block;color:#fff;font-size:.9375rem;font-weight:700}
.k-sidebar-logo-text span{font-size:.7rem;color:var(--k-sidebar-text);opacity:.65}
.k-sidebar-nav{flex:1;padding:.625rem 0;overflow-y:auto}
.k-sidebar-section{padding:.75rem 1rem .25rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(200,216,248,.35)}
.k-sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.5625rem 1rem .5625rem 1.125rem;color:var(--k-sidebar-text);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--k-t);position:relative;text-decoration:none}
.k-sidebar-link:hover{background:var(--k-sidebar-hover);color:#fff}
.k-sidebar-link.active{background:var(--k-sidebar-active);color:#fff}
.k-sidebar-link.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#fff;border-radius:0 2px 2px 0}
.k-sidebar-link .icon{font-size:.9375rem;width:17px;text-align:center;flex-shrink:0}
.k-sidebar-user{padding:.875rem 1.125rem;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:.625rem;flex-shrink:0}
.k-sidebar-avatar{width:32px;height:32px;border-radius:50%;background:var(--k-blue-600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0}
.k-sidebar-user-info{flex:1;min-width:0}
.k-sidebar-user-name{color:#fff;font-size:.8125rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-sidebar-user-role{font-size:.7rem;color:var(--k-sidebar-text);opacity:.6;text-transform:capitalize}
.k-sidebar-logout{display:inline-flex;align-items:center;gap:.35rem;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);cursor:pointer;color:#fca5a5;font-size:.75rem;font-weight:600;padding:.4rem .6rem;border-radius:var(--k-r-sm);transition:background var(--k-t),border-color var(--k-t),color var(--k-t),transform var(--k-t);flex-shrink:0;letter-spacing:.01em}
.k-sidebar-logout:hover{background:rgba(239,68,68,.9);border-color:rgba(239,68,68,.95);color:#fff;transform:translateY(-1px)}
.k-sidebar-logout:active{transform:translateY(0)}
.k-sidebar-logout:focus-visible{outline:2px solid rgba(239,68,68,.6);outline-offset:2px}

/* ── Main area ────────────────────────────────────────────── */
.k-main{flex:1;margin-left:var(--k-sidebar-w);min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
.k-topbar{height:var(--k-topbar-h);background:var(--k-surface);border-bottom:1px solid var(--k-border);display:flex;align-items:center;padding:0 1.5rem;gap:1rem;position:sticky;top:0;z-index:var(--k-z-sticky);box-shadow:var(--k-sh-sm);flex-shrink:0}
.k-topbar-title{font-weight:600;font-size:.9375rem;color:var(--k-gray-900);flex:1}
.k-topbar-actions{display:flex;align-items:center;gap:.5rem}
.k-sidebar-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--k-gray-600);font-size:1.125rem;padding:.25rem;flex-shrink:0}
.k-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:calc(var(--k-z-sticky) - 1)}

/* ── Content ──────────────────────────────────────────────── */
.k-content{flex:1;padding:1.625rem;max-width:1200px;width:100%;margin:0 auto}
.k-content-fluid{max-width:none}
.k-page-hd{margin-bottom:1.375rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.k-page-title{font-size:1.375rem;font-weight:700;color:var(--k-gray-900)}
.k-page-desc{font-size:.875rem;color:var(--k-gray-500);margin-top:.2rem}

/* ── Chat layout ──────────────────────────────────────────── */
.k-chat-wrap{display:flex;flex-direction:column;height:calc(100vh - var(--k-topbar-h));overflow:hidden}
.k-chat-msgs{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:.875rem;scroll-behavior:smooth}
.k-chat-bar{padding:.875rem 1.25rem;background:var(--k-surface);border-top:1px solid var(--k-border);display:flex;align-items:flex-end;gap:.625rem;flex-shrink:0}
.k-chat-bar textarea{flex:1;resize:none;border:1.5px solid var(--k-border);border-radius:var(--k-r-lg);padding:.5625rem .875rem;font-size:.875rem;outline:none;max-height:140px;line-height:1.5;background:var(--k-surface);color:var(--k-gray-800);transition:border-color var(--k-t)}
.k-chat-bar textarea:focus{border-color:var(--k-blue-400)}

/* ── Chat bubbles ─────────────────────────────────────────── */
.k-msg{display:flex;gap:.625rem;animation:k-fade-in .18s ease;max-width:84%}
.k-msg.user{margin-left:auto;flex-direction:row-reverse}
.k-msg-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.k-msg-av.bot{background:var(--k-blue-600);color:#fff}
.k-msg-av.user{background:var(--k-gray-700);color:#fff}
.k-bubble{padding:.6875rem .9375rem;border-radius:var(--k-r-lg);font-size:.875rem;line-height:1.6;max-width:100%;word-break:break-word}
.k-bubble.bot{background:var(--k-surface);border:1px solid var(--k-border);color:var(--k-gray-800);border-top-left-radius:4px}
.k-bubble.user{background:var(--k-blue-500);color:#fff;border-top-right-radius:4px}
.k-msg-time{font-size:.65rem;color:var(--k-gray-400);margin-top:.2rem}
.k-bubble.user+.k-msg-time,.k-msg.user .k-msg-time{text-align:right}
.k-typing{display:flex;gap:3px;align-items:center;padding:.6875rem .9375rem;background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--k-r-lg);border-top-left-radius:4px;width:fit-content}
.k-typing span{width:6px;height:6px;border-radius:50%;background:var(--k-gray-400);animation:k-pulse 1.2s infinite}
.k-typing span:nth-child(2){animation-delay:.15s}.k-typing span:nth-child(3){animation-delay:.3s}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:900px){
  .k-sidebar{transform:translateX(-100%)}
  .k-sidebar.open{transform:translateX(0)}
  .k-main{margin-left:0}
  .k-sidebar-toggle{display:flex}
  .k-sidebar-overlay.show{display:block}
  .k-content{padding:1.125rem}
}

/* ── Login page ───────────────────────────────────────────── */
.k-login-page{min-height:100vh;background:linear-gradient(135deg,var(--k-blue-900) 0%,var(--k-blue-700) 55%,var(--k-blue-500) 100%);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.k-login-card{background:var(--k-surface);border-radius:var(--k-r-xl);box-shadow:var(--k-sh-xl);padding:2.25rem 2rem;width:100%;max-width:400px}
.k-login-logo{text-align:center;margin-bottom:1.625rem}
.k-login-logo img{width:66px;height:66px;margin:0 auto .875rem;border-radius:var(--k-r-lg);display:block}
.k-login-logo h1{font-size:1.5rem;font-weight:800;color:var(--k-blue-800)}
.k-login-logo p{color:var(--k-gray-500);font-size:.875rem;margin-top:.2rem}

/* ── Split layout (edu) ───────────────────────────────────── */
.k-split{display:grid;grid-template-columns:240px 1fr;height:calc(100vh - var(--k-topbar-h));overflow:hidden}
.k-split-panel{border-right:1px solid var(--k-border);overflow-y:auto;display:flex;flex-direction:column}
.k-split-main{display:flex;flex-direction:column;overflow:hidden}

/* ── Waveform ─────────────────────────────────────────────── */
.k-wave{height:28px;display:flex;align-items:center;gap:2px;overflow:hidden}
.k-wave-bar{width:3px;border-radius:2px;background:var(--k-blue-400);flex-shrink:0;transition:height .07s ease}

/* ── CEFR level map ───────────────────────────────────────── */
.k-level-node{padding:.75rem 1rem;border-radius:var(--k-r-md);border:1.5px solid var(--k-border);text-align:center;min-width:68px;cursor:pointer;transition:all var(--k-t)}
.k-level-node:hover{border-color:var(--k-blue-400)}
.k-level-node.cur{border-color:var(--k-blue-500);box-shadow:0 0 0 3px rgba(45,91,227,.12)}
.k-level-node.done{background:var(--k-blue-50);border-color:#93c5fd}
.k-level-lv{font-weight:800;font-size:1.0625rem;color:var(--k-blue-500)}
.k-level-nm{font-size:.7rem;color:var(--k-gray-500);margin-top:2px}

/* ── Vocab pronunciation item ─────────────────────────────── */
.k-vocab-item{background:var(--k-surface);border:1.5px solid var(--k-border);border-radius:var(--k-r-md);padding:.9375rem 1.125rem;margin-bottom:.75rem;transition:border-color var(--k-t)}
.k-vocab-item.correct{border-color:var(--k-green);background:#f0fdf4}
.k-vocab-item.wrong{border-color:var(--k-red);background:#fff5f5}
.k-vocab-word{font-size:1.125rem;font-weight:700;color:var(--k-blue-700)}
.k-vocab-es{font-size:.875rem;color:var(--k-gray-500);margin-top:2px}
.k-vocab-phon{font-size:.8125rem;color:var(--k-gray-400);font-style:italic}
.k-vocab-ctrls{display:flex;align-items:center;gap:.5rem;margin-top:.625rem;flex-wrap:wrap}

/* ── Play / Record buttons ────────────────────────────────── */
.k-btn-play{display:flex;align-items:center;gap:.35rem;padding:.35rem .8125rem;border-radius:var(--k-r-full);border:1.5px solid var(--k-blue-400);background:var(--k-blue-50);color:var(--k-blue-700);font-size:.8125rem;font-weight:600;cursor:pointer;transition:all var(--k-t)}
.k-btn-play:hover{background:var(--k-blue-100)}.k-btn-play.on{background:var(--k-blue-500);color:#fff;border-color:var(--k-blue-500)}
.k-btn-rec{display:flex;align-items:center;gap:.35rem;padding:.35rem .8125rem;border-radius:var(--k-r-full);border:1.5px solid var(--k-border);background:var(--k-surface);color:var(--k-gray-600);font-size:.8125rem;font-weight:600;cursor:pointer;transition:all var(--k-t)}
.k-btn-rec:hover{border-color:var(--k-red);color:var(--k-red)}.k-btn-rec.on{background:var(--k-red);color:#fff;border-color:var(--k-red);animation:k-pulse 1s infinite}

/* ── Mode card (edu) ──────────────────────────────────────── */
.k-mode-card{padding:.75rem .625rem;border:1.5px solid var(--k-border);border-radius:var(--k-r-md);text-align:center;cursor:pointer;transition:all var(--k-t);background:var(--k-surface)}
.k-mode-card:hover{border-color:var(--k-blue-400);background:var(--k-blue-50)}
.k-mode-card.on{border-color:var(--k-blue-500);background:var(--k-blue-100)}
.k-mode-icon{font-size:1.375rem;margin-bottom:.35rem}.k-mode-lbl{font-size:.7rem;font-weight:600;color:var(--k-gray-700)}
.k-mode-card.on .k-mode-lbl{color:var(--k-blue-700)}

/* ── Session list item ────────────────────────────────────── */
.k-sess-item{padding:.5625rem .875rem;cursor:pointer;border-bottom:1px solid var(--k-border);transition:background var(--k-t)}
.k-sess-item:hover{background:var(--k-gray-50)}.k-sess-item.on{background:var(--k-blue-50);border-left:3px solid var(--k-blue-500)}
.k-sess-name{font-size:.875rem;font-weight:500;color:var(--k-gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-sess-meta{font-size:.7rem;color:var(--k-gray-400);margin-top:2px}