/* sb-parent-chat.css — Khu phụ huynh: header gọn, sidebar thu gọn được, "Hỏi Buddy" chiếm trọn chiều cao còn lại.
   Nạp SAU sb-parent.css / sb-parent-home.css; chỉ áp cho parent.html. */

/* ── Header & thanh bên ─────────────────────────────────────────────────── */
.header{ height:56px !important; }
.side-toggle{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.14); color:#fff; font-size:18px; line-height:1; cursor:pointer; }
.side-toggle:hover{ background:rgba(255,255,255,.26); }
.side-toggle:focus-visible, .adv-mic:focus-visible, .send-btn:focus-visible, .adv-switch input:focus-visible,
.msg-speak:focus-visible, .adv-stop:focus-visible, .advisor-quick .qp:focus-visible{ outline:3px solid #0B5E55; outline-offset:2px; }
.child-card .cc-name{ font-size:16px !important; line-height:1.25 !important; overflow-wrap:anywhere; }
.child-card{ padding-right:30px !important; }
.link-details > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.link-details > summary::-webkit-details-marker{ display:none; }
.link-details > summary::after{ content:'▾'; font-size:13px; color:#5B7486; transition:transform .15s; }
.link-details:not([open]) > summary::after{ transform:rotate(-90deg); }
.link-details[open] > .link-box{ margin-top:8px; }

@media (min-width:761px){
  .layout{ grid-template-columns:264px minmax(0,1fr) !important; transition:grid-template-columns .18s; }
  body.side-collapsed .layout{ grid-template-columns:0 minmax(0,1fr) !important; }
  body.side-collapsed .sidebar{ display:none !important; }
  /* Hình trang trí cột trái không chiếm chỗ của điều hướng: chỉ hiện khi màn đủ cao và không ở khung chat */
  body[data-pv="advisor"] .side-tip{ display:none !important; }
}
@media (min-width:761px) and (max-height:900px){ .side-tip{ display:none !important; } }
@media (max-width:760px){ .side-toggle{ display:none; } }

/* ── Hỏi Buddy: toàn chiều cao, nội dung giữa có độ rộng dễ đọc ─────────── */
@media (min-width:761px){
  body[data-pv="advisor"] .main{ overflow:hidden; padding:12px 18px 14px; gap:10px; }
  body[data-pv="advisor"] .hero, body[data-pv="advisor"] #empty-state{ display:none !important; }
  body[data-pv="advisor"] #child-view:not([style*="none"]){ display:flex !important; flex-direction:column; flex:1 1 auto; min-height:0; gap:10px !important; }
  /* Tên con đã có ở tiêu đề khung chat + sidebar → bỏ dòng hồ sơ lặp lại để chat cao hơn */
  body[data-pv="advisor"] .pv-head{ display:none !important; }
  body[data-pv="advisor"] #pv-advisor:not([hidden]){ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
  body[data-pv="advisor"] .advisor-card{ flex:1 1 auto; min-height:0; margin:0; }
  body[data-pv="advisor"] .advisor-messages{ flex:1 1 auto; min-height:0; max-height:none; }
}
.advisor-card{ background:#fff; border:1px solid #DCEDE8 !important; border-radius:18px !important; box-shadow:0 2px 12px rgba(16,76,92,.06) !important; overflow:hidden; display:flex; flex-direction:column; }
.advisor-head{ display:flex !important; align-items:center; gap:12px; padding:10px 18px !important; background:#fff !important; border-bottom:1px solid #E5F1ED; }
.advisor-head .ah-ava{ width:38px; height:38px; object-fit:contain; flex:0 0 auto; }
.advisor-head .ah-text{ min-width:0; }
.advisor-head .ah-title{ margin:0; font:800 19px/1.15 'Baloo 2','Nunito',sans-serif !important; color:#0F3D3A !important; }
.advisor-head .ah-sub{ display:block !important; margin-top:1px; font:600 12.5px/1.35 'Nunito',Arial,sans-serif !important; color:#5B7486 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.advisor-head .ah-sub b{ color:#0E7C6E; }
.adv-stop{ margin-left:auto; border:1px solid #BFE3D8 !important; background:#F1FBF8 !important; color:#0B5E55 !important; box-shadow:none !important; min-height:36px; }

.advisor-messages{ background:#F7FBFA; padding:18px max(16px, calc((100% - 820px) / 2)) !important; gap:14px !important; scroll-behavior:smooth; overscroll-behavior:contain; }
.advisor-messages .msg-row .bubble{ max-width:min(680px, 86%) !important; font-size:14.5px; line-height:1.6; }
.advisor-messages .msg-row.ai .bubble{ background:#fff; border:1px solid #E3EFEB; box-shadow:none; }
.advisor-messages .msg-row.user .bubble{ background:#DDF5EE; color:#0E3B36; border:1px solid #C6EBDF; box-shadow:none; }
.advisor-messages .msg-row .avatar{ width:34px; height:34px; flex:0 0 auto; }
.advisor-messages .msg-row .avatar img{ width:100%; height:100%; object-fit:contain; }
.msg-speak{ display:inline-flex !important; align-items:center; gap:4px; min-height:30px; }

/* Cụm nhập: gợi ý (chỉ khi chưa hỏi gì) · trạng thái giọng nói · ô nhập · công tắc */
.adv-composer{ flex:0 0 auto; border-top:1px solid #E5F1ED; background:#fff; padding:10px max(14px, calc((100% - 860px) / 2)) 10px; }
.adv-composer .advisor-quick{ padding:0 0 8px !important; gap:6px; }
#pv-advisor.has-convo .advisor-quick{ display:none !important; }
.adv-composer .pv-make-plan{ margin:0 0 8px; }
.adv-composer .adv-status{ padding:0 2px 6px !important; min-height:0; font-size:13px; }
.adv-composer .adv-status:empty{ display:none; }
.adv-composer .advisor-input-row{ display:flex; align-items:flex-end !important; gap:8px; padding:6px !important; border:1.5px solid #CFE8E0 !important;
  border-radius:16px; background:#F7FCFA; }
.adv-composer .advisor-input-row:focus-within{ border-color:#1FB79A !important; background:#fff; box-shadow:0 0 0 3px rgba(31,183,154,.14); }
.adv-composer .advisor-input{ flex:1; min-width:0; min-height:40px; max-height:140px; border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:9px 6px !important; font-size:15px; }
.adv-composer .send-btn{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; }
.adv-composer .send-btn:disabled{ opacity:.5; cursor:not-allowed; }
.adv-mic{ position:relative; width:44px !important; height:44px !important; border-radius:12px !important; border:1.5px solid #CFE8E0 !important; background:#fff !important; }
.adv-mic:hover{ border-color:#1FB79A !important; }
.adv-mic.is-listening{ background:#E03E52 !important; border-color:#E03E52 !important; }
.adv-mic.is-busy{ opacity:.7; cursor:progress; }
.adv-mic.is-unsupported{ opacity:.45; }
.adv-level{ position:absolute; inset:-5px; border-radius:15px; border:3px solid rgba(224,62,82,.55); pointer-events:none;
  transform:scale(calc(1 + var(--lvl, 0) * .28)); transition:transform .08s linear; }
.adv-level[hidden]{ display:none; }
.adv-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; padding:7px 2px 0; font:700 12.5px 'Nunito',Arial,sans-serif; color:#4F6B7D; }
.adv-switch{ display:inline-flex; align-items:center; gap:6px; min-height:28px; cursor:pointer; user-select:none; }
.adv-switch input{ width:16px; height:16px; accent-color:#13A88F; }
.adv-live-hint{ flex:1 1 220px; font-size:12.5px; font-weight:700; color:var(--pv-muted,#5A6890); }
.adv-tools .pv-vol{ display:inline-flex !important; align-items:center; gap:6px; }
.adv-tools .pv-vol input{ width:84px; accent-color:#13A88F; }
.adv-info{ margin-left:auto; position:relative; }
.adv-info summary{ list-style:none; cursor:pointer; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1px solid #CFE8E0; color:#4F6B7D; }
.adv-info summary::-webkit-details-marker{ display:none; }
.adv-info p{ position:absolute; right:0; bottom:34px; width:min(360px, 80vw); margin:0; padding:10px 12px; background:#fff; border:1px solid #DCEDE8; border-radius:12px;
  box-shadow:0 10px 28px rgba(16,76,92,.16); font-weight:600; line-height:1.5; z-index:5; }
.adv-note{ display:none !important; }

/* ── Laptop thấp (≤ 800px chiều cao): bớt đệm để thấy nhiều tin nhắn hơn ─ */
@media (min-width:761px) and (max-height:800px){
  .header{ height:52px !important; }
  body[data-pv="advisor"] .main{ padding:8px 14px 10px; gap:8px; }
  .advisor-head{ padding:8px 16px !important; }
  .advisor-messages{ padding-top:12px !important; padding-bottom:12px !important; }
}

/* ── Điện thoại: ưu tiên hội thoại + ô nhập, công tắc gọn ─────────────── */
@media (max-width:760px){
  .advisor-card{ border-radius:14px !important; }
  .advisor-head{ padding:8px 12px !important; }
  .advisor-head .ah-ava{ width:30px; height:30px; }
  .advisor-head .ah-title{ font-size:16px !important; }
  .advisor-messages{ padding:12px !important; }
  .adv-composer{ padding:8px 10px max(8px, env(safe-area-inset-bottom)); }
  #advisor-quick{ flex-wrap:nowrap !important; overflow-x:auto; }
  .adv-tools{ gap:2px 12px; font-size:12px; }
  .adv-tools .pv-vol{ display:none !important; }
  .adv-composer .advisor-input{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){ .layout, .adv-level, .link-details > summary::after{ transition:none; } .advisor-messages{ scroll-behavior:auto; } }

/* Tablet: thanh bên hẹp hơn, gợi ý một hàng cuộn ngang */
@media (min-width:761px) and (max-width:1024px){
  .layout{ grid-template-columns:220px minmax(0,1fr) !important; }
  #advisor-quick{ flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:thin; }
  .adv-composer .advisor-quick .qp{ flex:0 0 auto; }
}
/* Điện thoại: bộ chọn con ở đầu trang đã cho biết đang hỏi về ai → bỏ thẻ hồ sơ lặp lại */
@media (max-width:760px){ body[data-pv="advisor"] .pv-head{ display:none !important; } }

/* ── Chuông thông báo phụ huynh (thay email báo cáo) ─────────────────── */
.pn-wrap{ position:relative; margin-left:auto; margin-right:10px; }
.pn-wrap + .parent-account-wrap{ margin-left:0 !important; }
.pn-bell{ position:relative; width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14);
  color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center; }
.pn-bell:hover{ background:rgba(255,255,255,.26); }
.pn-bell:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.pn-badge{ position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#E03E52; color:#fff;
  font:900 11px/19px 'Nunito',Arial,sans-serif; text-align:center; box-shadow:0 0 0 2px #13AE96; }
.pn-badge[hidden]{ display:none; }
.pn-panel{ position:absolute; right:0; top:48px; width:min(380px, calc(100vw - 24px)); max-height:min(520px, 70vh); display:flex; flex-direction:column;
  background:#fff; border:1px solid #DCEDE8; border-radius:16px; box-shadow:0 16px 40px rgba(16,76,92,.2); z-index:10020; overflow:hidden; }
.pn-panel[hidden]{ display:none; }
.pn-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid #E5F1ED; color:#0F3D3A; font-size:15px; }
.pn-all{ border:0; background:none; color:#0E7C6E; font:800 12.5px 'Nunito',Arial,sans-serif; cursor:pointer; padding:10px 4px; margin:-6px -4px; min-height:36px; }
.pn-list{ overflow:auto; flex:1 1 auto; min-height:0; }
.pn-push{ flex:none; padding:0 12px; }
.pn-push:not(:empty){ padding-bottom:12px; border-top:1px solid #E5F1ED; }
.pn-push .sb-push{ margin-top:10px; }
.pn-item{ display:flex; gap:10px; width:100%; text-align:left; border:0; border-bottom:1px solid #F0F6F4; background:#fff; padding:11px 14px; cursor:pointer; font-family:'Nunito',Arial,sans-serif; }
.pn-item:hover{ background:#F6FBF9; }
.pn-item.is-new{ background:#EEFAF6; }
.pn-item.is-new b::after{ content:''; display:inline-block; width:8px; height:8px; margin-left:6px; border-radius:50%; background:#13A88F; vertical-align:middle; }
.pn-ic{ font-size:20px; line-height:1.2; }
.pn-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pn-txt b{ color:#0F3D3A; font-size:13.5px; }
.pn-txt span{ color:#4F6B7D; font-size:13px; line-height:1.4; }
.pn-txt small{ color:#8A9BB0; font-size:11.5px; }
.pn-empty{ margin:0; padding:18px 16px; color:#5B7486; font:600 13px/1.5 'Nunito',Arial,sans-serif; }
@media (max-width:760px){ .pn-wrap{ margin-right:6px; } .pn-bell{ width:38px; height:38px; } .pn-panel{ position:fixed; left:12px; right:12px; top:60px; width:auto; } }

/* Nút xem gói khi tính năng chưa có trong gói hiện tại (vd Voice phụ huynh = Premium) */
.pv-upgrade-btn{ display:inline-flex; align-items:center; min-height:40px; margin-top:8px; padding:0 16px; border:none; border-radius:12px; background:linear-gradient(135deg,#1FCBA6,#11917A); color:#fff; font:inherit; font-weight:900; cursor:pointer; box-shadow:0 3px 0 rgba(17,145,122,.3); }