@charset "utf-8";

.hvl-btn { display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); border: 1.5px solid rgba(36, 52, 71, 0.1); color: rgb(49, 70, 95); border-radius: 50px; padding: 9px 18px 9px 14px; font-size: 0.78rem; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: rgba(36, 52, 71, 0.18) 0px 2px 12px; transition: 0.2s; white-space: nowrap; position: relative; z-index: 10; }

.hvl-btn:hover { background: rgb(240, 248, 240); border-color: rgb(36, 52, 71); transform: translateY(-1px); box-shadow: rgba(36, 52, 71, 0.26) 0px 4px 18px; }

.hvl-btn:active { transform: translateY(0px); }

.hvl-btn-icon { width: 26px; height: 26px; background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }

.hvl-btn.hvl-kids { border-color: rgba(181, 167, 212, 0.45); color: rgb(90, 74, 138); }

.hvl-btn.hvl-kids .hvl-btn-icon { background: linear-gradient(135deg, rgb(188, 200, 180), rgb(122, 106, 176)); }

.hvl-btn.hvl-kids:hover { border-color: rgb(188, 200, 180); background: rgb(245, 242, 252); }

.hvl-btn.hvl-pmf { border-color: rgba(90, 110, 138, 0.35); color: rgb(61, 82, 104); }

.hvl-btn.hvl-pmf .hvl-btn-icon { background: linear-gradient(135deg, rgb(122, 150, 176), rgb(61, 82, 104)); }

.hvl-btn.hvl-pmf:hover { border-color: rgb(122, 150, 176); background: rgb(240, 244, 248); }

.hvl-btn.hvl-places { border-color: rgba(244, 169, 127, 0.4); color: rgb(176, 96, 48); }

.hvl-btn.hvl-places .hvl-btn-icon { background: linear-gradient(135deg, rgb(231, 201, 201), rgb(192, 104, 48)); }

.hvl-btn.hvl-places:hover { border-color: rgb(231, 201, 201); background: rgb(253, 245, 239); }

.hvl-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(4px); z-index: 99990; display: flex; align-items: flex-end; justify-content: center; padding: 0px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.hvl-overlay.open { opacity: 1; pointer-events: all; }

@media (min-width: 600px) {
  .hvl-overlay { align-items: center; padding: 20px; }
}

.hvl-panel { background: rgb(250, 250, 248); border-radius: 28px 28px 0px 0px; width: 100%; max-width: 560px; padding: 0 0 env(safe-area-inset-bottom,0); box-shadow: rgba(0, 0, 0, 0.18) 0px -8px 48px; transform: translateY(32px); transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1); max-height: 92vh; overflow-y: auto; }

.hvl-overlay.open .hvl-panel { transform: translateY(0px); }

@media (min-width: 600px) {
  .hvl-panel { border-radius: 24px; max-height: 88vh; }
}

.hvl-panel::-webkit-scrollbar { width: 0px; }

.hvl-handle { width: 38px; height: 4px; background: rgb(221, 216, 208); border-radius: 2px; margin: 14px auto 0px; }

.hvl-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }

.hvl-title-wrap { display: flex; align-items: center; gap: 10px; }

.hvl-title-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }

.hvl-title { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: rgb(43, 43, 43); line-height: 1.2; }

.hvl-section-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(36, 52, 71); display: block; margin-top: 1px; }

.hvl-close { background: rgb(240, 236, 230); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; cursor: pointer; color: rgb(91, 100, 112); flex-shrink: 0; transition: background 0.15s; }

.hvl-close:hover { background: rgb(232, 224, 216); }

.hvl-body { padding: 18px 22px 22px; }

.hvl-prompts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }

.hvl-prompt { background: rgb(255, 255, 255); border: 1.5px solid rgb(232, 224, 214); border-radius: 50px; padding: 5px 12px; font-size: 0.71rem; color: rgb(91, 100, 112); cursor: pointer; font-family: inherit; transition: 0.15s; white-space: nowrap; }

.hvl-prompt:hover { border-color: rgb(36, 52, 71); color: rgb(49, 70, 95); background: rgb(240, 248, 240); }

.hvl-rec-area { background: rgb(255, 255, 255); border: 1.5px solid rgb(232, 224, 214); border-radius: 18px; padding: 18px; margin-bottom: 16px; }

.hvl-mic-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.hvl-mic-btn { width: 52px; height: 52px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; transition: 0.2s; background: rgb(221, 229, 216); color: rgb(49, 70, 95); }

.hvl-mic-btn:hover { background: rgb(36, 52, 71); color: rgb(255, 255, 255); transform: scale(1.06); }

.hvl-mic-btn.hvl-listening { background: rgb(49, 70, 95); color: rgb(255, 255, 255); animation: 1.4s ease-in-out 0s infinite normal none running hvl-pulse; }

@keyframes hvl-pulse { 
  0% { box-shadow: rgba(74, 122, 78, 0.6) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(74, 122, 78, 0) 0px 0px 0px 14px; }
  100% { box-shadow: rgba(74, 122, 78, 0) 0px 0px 0px 0px; }
}

.hvl-rec-btns { display: flex; flex-direction: column; gap: 5px; }

.hvl-rec-status { font-size: 0.72rem; font-weight: 700; color: rgb(36, 52, 71); letter-spacing: 0.04em; }

.hvl-rec-hint { font-size: 0.68rem; color: rgb(160, 144, 128); }

.hvl-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 36px; margin-bottom: 12px; }

.hvl-bar { width: 3px; border-radius: 2px; background: rgb(216, 208, 200); transition: height 0.1s, background 0.15s; }

.hvl-bar.hvl-active { background: rgb(36, 52, 71); }

.hvl-transcript-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(160, 144, 128); margin-bottom: 6px; }

.hvl-transcript { width: 100%; min-height: 72px; background: rgb(250, 250, 248); border: 1.5px solid rgb(232, 224, 214); border-radius: 12px; padding: 10px 14px; font-size: 0.88rem; color: rgb(43, 43, 43); font-family: inherit; line-height: 1.6; resize: vertical; outline: none; transition: border-color 0.2s; box-sizing: border-box; }

.hvl-transcript:focus { border-color: rgb(36, 52, 71); }

.hvl-transcript::placeholder { color: rgb(192, 184, 176); font-style: italic; }

.hvl-tags-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(160, 144, 128); margin: 14px 0px 7px; }

.hvl-tags { display: flex; gap: 7px; flex-wrap: wrap; }

.hvl-tag { background: rgb(255, 255, 255); border: 1.5px solid rgb(232, 224, 214); border-radius: 50px; padding: 5px 13px; font-size: 0.73rem; font-weight: 600; color: rgb(91, 100, 112); cursor: pointer; font-family: inherit; transition: 0.15s; user-select: none; }

.hvl-tag:hover { border-color: rgb(36, 52, 71); color: rgb(49, 70, 95); }

.hvl-tag.hvl-tag-on { background: rgb(221, 229, 216); border-color: rgb(36, 52, 71); color: rgb(49, 70, 95); }

.hvl-dest-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(160, 144, 128); margin: 14px 0px 7px; }

.hvl-dest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.hvl-dest { background: rgb(255, 255, 255); border: 1.5px solid rgb(232, 224, 214); border-radius: 12px; padding: 10px 12px; font-size: 0.76rem; font-weight: 700; color: rgb(91, 100, 112); cursor: pointer; font-family: inherit; text-align: left; display: flex; align-items: center; gap: 7px; transition: 0.15s; }

.hvl-dest:hover { border-color: rgb(36, 52, 71); background: rgb(240, 248, 240); color: rgb(49, 70, 95); }

.hvl-dest.hvl-dest-on { background: rgb(221, 229, 216); border-color: rgb(36, 52, 71); color: rgb(49, 70, 95); }

.hvl-dest-icon { font-size: 1rem; flex-shrink: 0; }

.hvl-actions { display: flex; gap: 10px; margin-top: 18px; }

.hvl-save-btn { flex: 1 1 0%; background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 13px 20px; font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.2s; box-shadow: rgba(74, 122, 78, 0.3) 0px 3px 12px; }

.hvl-save-btn:hover { transform: translateY(-1px); box-shadow: rgba(74, 122, 78, 0.4) 0px 5px 18px; }

.hvl-save-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.hvl-cancel-btn { background: rgb(240, 236, 230); color: rgb(91, 100, 112); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 13px 20px; font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s; }

.hvl-cancel-btn:hover { background: rgb(232, 224, 216); }

.hvl-drawer-btn { position: fixed; bottom: calc(var(--nav-total,68px) + 16px); right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgb(255, 255, 255); border: 1.5px solid rgba(36, 52, 71, 0.1); box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; z-index: 99980; transition: 0.2s; color: rgb(49, 70, 95); }

.hvl-drawer-btn:hover { transform: scale(1.08); box-shadow: rgba(0, 0, 0, 0.16) 0px 4px 18px; }

.hvl-drawer-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.45); z-index: 99985; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.hvl-drawer-overlay.open { opacity: 1; pointer-events: all; }

.hvl-drawer { position: absolute; bottom: 0px; left: 0px; right: 0px; background: rgb(250, 250, 248); border-radius: 24px 24px 0px 0px; max-height: 72vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.34, 1.1, 0.64, 1); padding-bottom: env(safe-area-inset-bottom,0); }

.hvl-drawer.open { transform: translateY(0px); }

@media (min-width: 600px) {
  .hvl-drawer { max-width: 480px; left: auto; right: 16px; bottom: 16px; border-radius: 20px; max-height: 60vh; }
}

.hvl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); position: sticky; top: 0px; background: rgb(250, 250, 248); }

.hvl-drawer-title { font-family: Georgia, serif; font-size: 0.95rem; font-weight: 700; color: rgb(43, 43, 43); }

.hvl-drawer-close { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 1rem; color: rgb(91, 100, 112); cursor: pointer; padding: 4px; }

.hvl-log-list { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }

.hvl-log-entry { background: rgb(255, 255, 255); border: 1px solid rgb(236, 232, 226); border-radius: 14px; padding: 12px 14px; }

.hvl-log-entry-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }

.hvl-log-section-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 2px 9px; border-radius: 50px; background: rgb(221, 229, 216); color: rgb(49, 70, 95); }

.hvl-log-time { font-size: 0.62rem; color: rgb(160, 144, 128); }

.hvl-log-text { font-size: 0.82rem; color: rgb(43, 43, 43); line-height: 1.5; margin-bottom: 6px; }

.hvl-log-meta { font-size: 0.68rem; color: rgb(160, 144, 128); }

.hvl-log-empty { text-align: center; padding: 32px 20px; color: rgb(160, 144, 128); font-size: 0.85rem; }

.hvl-badge-places { background: rgb(242, 223, 223); color: rgb(176, 96, 48); }

.hvl-badge-journal { background: rgb(221, 229, 216); color: rgb(90, 74, 138); }

.hvl-badge-discover { background: rgb(232, 240, 245); color: rgb(26, 95, 122); }

.hvl-badge-kids { background: rgb(241, 239, 237); color: rgb(138, 98, 0); }

.hvl-badge-pmf { background: rgb(220, 232, 240); color: rgb(61, 82, 104); }

@media (max-width: 400px) {
  .hvl-dest-grid { grid-template-columns: 1fr; }
  .hvl-prompts { gap: 5px; }
}