/* ==========================================================================
   Nhật ký Tom Riddle — theme.css
   Nền giấy da, mực viết tay, cuốn sổ có linh hồn.
   Fonts (nạp qua <link> trong index.html):
     - Patrick Hand   -> chữ chủ nhân (.turn.user)
     - Dancing Script -> chữ cuốn sổ  (.turn.diary)
   ========================================================================== */

/* ---------- Biến & reset nhẹ ---------- */
:root {
  /* Bảng màu mực */
  --ink-user: #26314a;      /* mực xanh-đen của chủ nhân */
  --ink-diary: #7a1f1f;     /* mực đỏ-thẫm của cuốn sổ   */
  --ink-faint: #9a8b73;     /* mực nhạt (divider, gợi ý) */

  /* Giấy da */
  --paper-1: #f4e9d2;
  --paper-2: #e7d5b0;
  --paper-edge: #d8c39a;
  --line: rgba(122, 90, 45, 0.12);   /* đường kẻ ngang mờ */

  /* Overlay & card nhập key */
  --veil-bg: rgba(28, 20, 12, 0.72);
  --card-bg: #f6edd8;

  /* Kích thước cảm ứng */
  --tap: 48px;

  --radius: 14px;
  --shadow-book: 0 10px 40px rgba(40, 26, 10, 0.35);

  /* ---- Cỡ chữ & nhịp dòng kẻ (đổi CÙNG NHAU để chữ luôn khớp kẻ giấy) ---- */
  /* Mặc định = M (vừa) */
  --rhythm: 34px;        /* chu kỳ dòng kẻ + line-height */
  --font-user: 22px;     /* chữ chủ nhân */
  --font-diary: 24px;    /* chữ cuốn sổ */
  --font-entry: 20px;    /* ô nhập */
}

/* Cỡ chữ Nhỏ */
body[data-size='s'] {
  --rhythm: 30px;
  --font-user: 19px;
  --font-diary: 21px;
  --font-entry: 18px;
}

/* Cỡ chữ Lớn */
body[data-size='l'] {
  --rhythm: 40px;
  --font-user: 26px;
  --font-diary: 28px;
  --font-entry: 23px;
}

/* ==========================================================================
   Chế độ ĐÊM — giấy sẫm màu nến, mực sáng dịu, đỡ chói khi viết khuya
   ========================================================================== */
body[data-theme='dark'] {
  --ink-user: #c8d2ea;      /* mực xanh trăng */
  --ink-diary: #e8a87f;     /* mực hổ phách ấm */
  --ink-faint: #9a8a68;
  --paper-1: #2b2318;
  --paper-2: #1f1910;
  --paper-edge: #4a3d28;
  --line: rgba(235, 205, 150, 0.10);
  --veil-bg: rgba(8, 6, 3, 0.82);
  --card-bg: #2c2417;
}

/* TẮT lớp sheen trắng của bản sáng — thay bằng quầng nến ấm rất nhẹ */
body[data-theme='dark'] #book {
  background:
    radial-gradient(120% 90% at 72% 0%,
      rgba(255, 176, 88, 0.07) 0%, rgba(255, 176, 88, 0) 48%),
    linear-gradient(160deg, var(--paper-1) 0%, var(--paper-2) 100%);
}

/* Vignette đêm: tối dịu về mép, không tạo sương xám */
body[data-theme='dark'] #book::before {
  background:
    radial-gradient(120% 120% at 50% 50%,
      rgba(0, 0, 0, 0) 58%,
      rgba(0, 0, 0, 0.28) 88%,
      rgba(0, 0, 0, 0.5) 100%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.4);
}

/* Header/footer: bỏ dải sáng trắng, chỉ giữ đường kẻ ấm */
body[data-theme='dark'] header,
body[data-theme='dark'] footer {
  background: none;
}

/* Tiêu đề vàng nến thay vì cá hồi */
body[data-theme='dark'] header h1 {
  color: #d8b36a;
}

/* Nút bút: hết chói — nền gỗ tối, sáng lên khi active */
body[data-theme='dark'] footer #penBtn {
  background: radial-gradient(circle at 35% 30%, #3d3220, #2a2214);
  color: #d8c39a;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

body[data-theme='dark'] footer #entry {
  background: rgba(0, 0, 0, 0.28);
}
body[data-theme='dark'] #veil #keyInput,
body[data-theme='dark'] #veil #modelSel,
body[data-theme='dark'] #veil #sizeSel,
body[data-theme='dark'] #veil #themeSel {
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink-user);
}

/* Mực loang nhẹ ở dấu câu (mực đọng khi bút dừng) */
.ink-char.blot {
  text-shadow: 0 0 3px currentColor;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Patrick Hand', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink-user);
  /* Nền tối bao quanh cuốn sổ */
  background:
    radial-gradient(120% 90% at 50% 0%, #2a2118 0%, #17110b 100%);
  min-height: 100%;
  display: flex;
  justify-content: center;
  /* Tránh nội dung bị che bởi thanh trạng thái / gesture bar điện thoại */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ==========================================================================
   #book — khung cuốn sổ
   ========================================================================== */
#book {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 100vh;
  height: 100dvh;              /* chiều cao thực trên di động */
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Giấy da: gradient + vệt loang */
  background:
    radial-gradient(140% 120% at 20% 0%,
      rgba(255, 250, 235, 0.55) 0%, rgba(255, 250, 235, 0) 45%),
    linear-gradient(160deg, var(--paper-1) 0%, var(--paper-2) 100%);
  box-shadow: var(--shadow-book);
}

/* Vignette 4 mép — phủ trên toàn khung sổ */
#book::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(120% 120% at 50% 50%,
      rgba(60, 40, 15, 0) 60%,
      rgba(60, 40, 15, 0.18) 88%,
      rgba(40, 25, 8, 0.42) 100%);
  box-shadow:
    inset 0 0 60px rgba(60, 40, 15, 0.22),
    inset 0 0 12px rgba(60, 40, 15, 0.28);
}

/* ==========================================================================
   Header
   ========================================================================== */
header {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
    rgba(255, 250, 235, 0.35), rgba(255, 250, 235, 0));
}

header h1 {
  margin: 0;
  /* Dancing Script (Google Fonts) -> nếu không tải được, fallback Segoe Script có sẵn trên Windows */
  font-family: 'Dancing Script', 'Segoe Script', 'Bradley Hand', cursive;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ink-diary);
  line-height: 1.1;
}

header #today {
  margin: 0;
  font-size: 15px;
  color: var(--ink-faint);
  flex: 1 1 auto;
}

header #gear {
  margin-left: auto;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  border-radius: 50%;
  user-select: none;
  transition: transform 0.25s ease, color 0.2s ease;
}
header #gear:hover { color: var(--ink-diary); }
header #gear:active { transform: rotate(45deg) scale(0.92); }

/* ==========================================================================
   #stream — vùng transcript cuộn, có đường kẻ giấy
   ========================================================================== */
#stream {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* padding-top = 1 dòng kẻ trống để chữ khớp nhịp dòng kẻ */
  padding: var(--rhythm) 20px var(--rhythm);

  /* Đường kẻ ngang nhạt — chu kỳ = --rhythm, nét 1px ở đáy mỗi băng */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rhythm) - 1px),
    var(--line) calc(var(--rhythm) - 1px),
    var(--line) var(--rhythm)
  );
  background-attachment: local;
}

/* ---------- Lượt chữ chung — mọi thứ theo nhịp --rhythm để khớp dòng kẻ ---------- */
.turn {
  margin: 0 0 var(--rhythm);      /* cách nhau đúng 1 dòng kẻ trống */
  line-height: var(--rhythm);     /* khớp nhịp đường kẻ */
  white-space: pre-wrap;
  word-break: break-word;
}

/* Chủ nhân — mực xanh-đen, nét bút Itim (rõ ràng, đủ dấu tiếng Việt) */
.turn.user {
  font-family: 'Itim', 'Patrick Hand', cursive;
  color: var(--ink-user);
  font-size: var(--font-user);
}

/* Cuốn sổ — Dancing Script, mực đỏ-thẫm, hiện dần */
.turn.diary {
  font-family: 'Dancing Script', cursive;
  color: var(--ink-diary);
  font-size: var(--font-diary);
  font-weight: 600;
  letter-spacing: 0.2px;
  animation: diaryFade 0.9s ease both;
}

@keyframes diaryFade {
  from { opacity: 0; filter: blur(1.5px); transform: translateY(2px); }
  to   { opacity: 1; filter: blur(0);     transform: translateY(0); }
}

/* Mực "thấm vào giấy" — dùng khi trang cũ phai đi (nhanh gọn) */
.turn.fade-out {
  opacity: 0 !important;
  filter: blur(2.5px);
  transition: opacity 1.5s ease, filter 1.5s ease;
  animation: none;
}

/* Vanish CHẬM — riêng cho chữ của chủ nhân: đọng lại rồi tan từ từ vào giấy */
.turn.vanish-slow {
  opacity: 0 !important;
  filter: blur(3px);
  transition: opacity 3.2s ease-in, filter 3.2s ease-in;
  animation: none;
}

/* ---------- Divider ngày "— ngày —" (giữ nhịp dòng kẻ) ---------- */
.daydiv {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 4px var(--rhythm);
  height: var(--rhythm);
  line-height: var(--rhythm);
  color: var(--ink-faint);
  font-family: 'Dancing Script', cursive;
  font-size: 17px;
  text-align: center;
  white-space: nowrap;
}
.daydiv::before,
.daydiv::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--ink-faint), transparent);
  opacity: 0.6;
}

/* ---------- Dòng "đang lắng nghe" ---------- */
.thinking {
  font-family: 'Dancing Script', cursive;
  font-style: italic;
  font-size: 20px;
  line-height: var(--rhythm);
  color: var(--ink-faint);
  opacity: 0.85;
  margin: 0 0 var(--rhythm);
  animation: pulseFaint 1.8s ease-in-out infinite;
}
@keyframes pulseFaint {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}

/* ==========================================================================
   .toolbar
   ========================================================================== */
.toolbar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

/* Checkbox âm thanh trong màn cài đặt */
#veil .chk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--ink-faint);
  cursor: pointer;
  user-select: none;
}
#veil .chk input { width: 18px; height: 18px; accent-color: var(--ink-diary); }

/* Hàng nút sao lưu / khôi phục */
#veil .row2 {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
#veil .row2 button {
  flex: 1 1 0;
  min-height: var(--tap);
  border: 1px solid var(--paper-edge);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-user);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
#veil .row2 button:hover { background: rgba(122, 90, 45, 0.1); }

/* Nút xoá cuộc trò chuyện — nằm trong màn cài đặt, kiểu "nguy hiểm" kín đáo */
#veil #clearChat {
  width: 100%;
  min-height: var(--tap);
  margin-top: 10px;
  border: 1px dashed rgba(122, 31, 31, 0.45);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-diary);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
#veil #clearChat:hover { background: rgba(122, 31, 31, 0.08); }

.toolbar #modelLabel {
  margin-left: auto;
  color: var(--ink-faint);
  font-style: italic;
  opacity: 0.8;
}

/* ==========================================================================
   footer — ô nhập tâm sự + nút lông vũ
   ========================================================================== */
footer {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: linear-gradient(0deg,
    rgba(255, 250, 235, 0.5), rgba(255, 250, 235, 0));
}

footer #entry {
  flex: 1 1 auto;
  resize: none;                 /* tự cao theo nội dung, ui.js chỉnh height */
  min-height: var(--tap);
  max-height: 40vh;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  background: rgba(255, 252, 244, 0.7);
  color: var(--ink-user);
  font-family: 'Itim', 'Patrick Hand', cursive;
  font-size: var(--font-entry);
  line-height: 1.45;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(80, 55, 20, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
footer #entry::placeholder {
  color: var(--ink-faint);
  opacity: 0.75;
}
footer #entry:focus {
  border-color: var(--ink-diary);
  box-shadow: inset 0 1px 3px rgba(80, 55, 20, 0.12),
              0 0 0 2px rgba(122, 31, 31, 0.15);
}

footer #send {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a2626, #5e1616);
  color: #f6edd8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(94, 22, 22, 0.4);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
footer #send:hover { transform: translateY(-1px) rotate(-8deg); }
footer #send:active { transform: scale(0.9) rotate(-8deg); }
footer #send:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   #veil — màn nhập API key
   ========================================================================== */
#veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--veil-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: veilIn 0.3s ease both;
  /* Card dài hơn màn hình -> cuộn được thay vì cắt cụt đầu card (mất nút ✕) */
  overflow-y: auto;
}
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }

/* Ẩn hoàn toàn */
.hide { display: none !important; }

#veil .card,
#veil > div {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: var(--ink-user);
  /* margin auto: căn giữa khi lọt màn, tự dính mép trên (cuộn được) khi cao quá */
  margin: auto;
}

/* Nút đóng màn cài đặt */
#veil #closeVeil {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#veil #closeVeil:hover { color: var(--ink-diary); background: rgba(122, 31, 31, 0.08); }

#veil h2 {
  margin: 0 0 6px;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  color: var(--ink-diary);
  font-size: 24px;
}

#veil label {
  display: block;
  margin: 10px 0 5px;
  font-size: 15px;
  color: var(--ink-faint);
}

#veil #keyInput,
#veil #modelSel,
#veil #sizeSel,
#veil #themeSel {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--paper-edge);
  border-radius: 10px;
  background: rgba(255, 252, 244, 0.9);
  color: var(--ink-user);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  outline: none;
}
#veil #keyInput:focus,
#veil #modelSel:focus,
#veil #sizeSel:focus,
#veil #themeSel:focus {
  border-color: var(--ink-diary);
  box-shadow: 0 0 0 2px rgba(122, 31, 31, 0.15);
}

#veil #saveKey {
  width: 100%;
  min-height: var(--tap);
  margin-top: 18px;
  border: none;
  border-radius: 10px;
  background: radial-gradient(circle at 35% 20%, #8a2626, #5e1616);
  color: #f6edd8;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(94, 22, 22, 0.4);
  transition: transform 0.15s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
#veil #saveKey:hover { transform: translateY(-1px); }
#veil #saveKey:active { transform: scale(0.98); }

/* Cảnh báo bảo mật */
#veil .warn,
#veil small {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #8a5a2a;
  background: rgba(160, 100, 30, 0.1);
  border-left: 3px solid rgba(160, 100, 30, 0.5);
  padding: 8px 10px;
  border-radius: 6px;
}

/* ==========================================================================
   Thanh cuộn mảnh (tuỳ chọn, đẹp hơn trên desktop)
   ========================================================================== */
#stream::-webkit-scrollbar,
footer #entry::-webkit-scrollbar { width: 8px; }
#stream::-webkit-scrollbar-thumb,
footer #entry::-webkit-scrollbar-thumb {
  background: rgba(122, 90, 45, 0.3);
  border-radius: 8px;
}

/* ==========================================================================
   Responsive — điện thoại dọc (Samsung S23 Ultra ~ 412px)
   ========================================================================== */
@media (max-width: 480px) {
  header h1 { font-size: 28px; }
  header #today { font-size: 13px; }
  /* cỡ chữ giờ do người dùng chọn (S/M/L) — chỉ thu lề ngang */
  #stream { padding: var(--rhythm) 16px var(--rhythm); }
  footer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
}

/* Màn hình rất thấp (bàn phím ảo bật lên) — không để header/footer chiếm hết */
@media (max-height: 520px) {
  header { padding: 8px 16px 6px; }
  header h1 { font-size: 22px; }
}

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .turn.diary,
  #veil,
  .thinking { animation: none; }
  #book, header #gear, footer #send, #veil #saveKey { transition: none; }
}

/* ==========================================================================
   Chế độ VIẾT TAY (v2.0) — canvas mực, công cụ nét, nút bút, dòng OCR
   ========================================================================== */

/* Canvas mực — phủ đúng vùng trang (#stream); ink.js đặt top/left/width/height
   theo rect của anchor. touch-action:none để S Pen/ngón không cuộn trang. */
#inkpad {
  position: absolute;
  z-index: 4;
  touch-action: none;
  cursor: crosshair;
  background: transparent;
}

/* Cụm nút hoàn tác / xoá hết — cố định góc phải-trên vùng trang giấy */
#inkTools {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: 8px;
  top: 70px;
  right: 16px;
}
#inkTools button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--paper-edge);
  border-radius: 50%;
  background: rgba(216, 195, 154, 0.55);   /* giấy sẫm nhẹ, hoà vào trang */
  color: var(--ink-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(60, 40, 15, 0.18);
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
#inkTools button:hover {
  color: var(--ink-diary);
  background: rgba(216, 195, 154, 0.85);
}
#inkTools button:active { transform: scale(0.9); }

/* Nút bút ✍ — tròn 48px như #send nhưng nền trung tính giấy sẫm, chữ mực */
footer #penBtn {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--paper-edge);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ead9b6, #d8c39a);
  color: var(--ink-user);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(60, 40, 15, 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease,
              background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
footer #penBtn:hover { transform: translateY(-1px); }
footer #penBtn:active { transform: scale(0.9); }

/* Đang ở chế độ bút — nền đỏ-thẫm như #send, chữ màu giấy */
footer #penBtn.active {
  border-color: transparent;
  background: radial-gradient(circle at 35% 30%, #8a2626, #5e1616);
  color: #f6edd8;
  box-shadow: 0 3px 10px rgba(94, 22, 22, 0.4);
}

/* Ô gõ phím mờ đi khi đang viết tay */
#entry.pen-disabled {
  opacity: .45;
  pointer-events: none;
}

/* Nút tẩy đang bật — đỏ thẫm như penBtn.active */
#inkTools #inkEraser.active {
  border-color: transparent;
  background: radial-gradient(circle at 35% 30%, #8a2626, #5e1616);
  color: #f6edd8;
  box-shadow: 0 3px 10px rgba(94, 22, 22, 0.4);
}

/* Dòng "cuốn sổ đọc được: …" trên toolbar */
#ocrStatus {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 13px;
  margin-left: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer; /* chạm để bung/thu khi nội dung dài */
}

/* Bung ra nhiều dòng khi chạm (nội dung nhận diện dài) */
#ocrStatus.expanded {
  white-space: normal;
  overflow-y: auto;
  max-height: 30vh;
  text-overflow: clip;
}