:root {
  color-scheme: light;
  --ink: #1c1c1e;
  --muted: rgba(0, 0, 0, .62);
  --line: #e7e7e9;
  --accent: #3d8bff;
  --space-1: 5px;
  --space-2: 8px;
  --space-3: 13px;
  --space-4: 21px;
  --space-5: 34px;
  --space-6: 55px;
  --rule-panel-pad: 21px;
  --bako-viewport-height: 100dvh;
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
html { overflow: hidden; }
body { display: flex; flex-direction: column; height: var(--bako-viewport-height); overflow: hidden; background: #fff; font-size: 14px; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: none; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
[hidden] { display: none !important; }

.topbar {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 600px);
  margin: 0 auto;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-size: 16px; font-weight: 800; }
.top-link { font-size: 13px; }
.bako-face { display: inline-block; width: 29px; height: 29px; position: relative; border: 2px solid var(--accent); border-radius: 6px; background: #fff; flex: 0 0 auto; }
.bako-face i { position: absolute; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
.bako-face i:first-child { left: 7px; }
.bako-face i:nth-child(2) { right: 7px; }
.bako-face b { position: absolute; left: 7px; right: 7px; top: 17px; height: 2px; border-radius: 2px; background: var(--accent); }

.app-root { width: min(100%, 600px); min-height: 0; flex: 1 1 auto; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; }
.loading, .notice { margin: auto; padding: var(--space-4); color: var(--muted); text-align: center; }
.page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: var(--space-3); overflow: hidden; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; min-height: 34px; gap: var(--space-2); border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); }
.page-title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.page-actions { display: flex; align-items: center; gap: var(--space-2); }
.home-intro { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); width: min(100%, 420px); min-height: 220px; margin: auto; }
.home-lead { margin: 0 0 var(--space-2); text-align: center; font-size: 17px; font-weight: 700; line-height: 1.5; }
.home-inbox, .home-login { display: block; padding: 12px; border-top: 1px solid var(--line); text-align: center; font-weight: 700; }
.text-button { color: var(--accent); padding: 4px 2px; font-weight: 700; }
.primary-button, .secondary-button, .danger-button { min-height: 42px; border-radius: 8px; padding: 8px 13px; font-weight: 700; }
a.primary-button, a.secondary-button, a.danger-button {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
}
a.primary-button:hover, a.secondary-button:hover, a.danger-button:hover { text-decoration: none; }
.primary-button { color: #fff; background: var(--accent); }
.primary-button:disabled { opacity: .55; cursor: default; }
.secondary-button { border: 1px solid var(--line); color: var(--accent); background: #fff; }
.danger-button { border: 1px solid #d34a4a; color: #b52323; background: #fff; }
.full-width { width: 100%; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.line-top { border-top: 1px solid var(--line); }
.inline-status { min-height: 18px; margin: 0; color: var(--muted); font-size: 12px; }
.inline-status.error { color: #b52323; }

.box-page { gap: var(--space-2); padding-top: var(--space-2); }
.owner-card { display: grid; grid-template-columns: 55px minmax(0, 1fr); align-items: center; gap: var(--space-3); flex: 0 0 auto; min-height: 0; }
.owner-avatar, .owner-avatar-fallback { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; background: #f4f4f5; }
.owner-avatar-fallback { display: grid; place-items: center; }
.owner-avatar-fallback .bako-face { transform: scale(1.12); }
.owner-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.owner-handle { color: var(--muted); font-size: 12px; font-weight: 400; }
.owner-hello { margin: 3px 0 0; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.compose-box { flex: 0 0 auto; border-top: 1px solid var(--line); padding-top: var(--space-2); }
.owner-box-actions { flex: 0 0 auto; display: grid; gap: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-2); }
.owner-box-message { margin: 0; text-align: center; font-weight: 700; }
.owner-box-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.compose-label { display: block; margin: 0 0 var(--space-1); font-weight: 700; }
.question-input, .answer-input, .settings-input, .report-input {
  display: block; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; background: #fff; outline: none; resize: vertical;
}
.question-input { height: 94px; min-height: 72px; resize: none; }
.answer-input { min-height: 74px; max-height: 160px; }
.question-input:focus, .answer-input:focus, .settings-input:focus, .report-input:focus, select:focus { border-color: var(--accent); }
.compose-note { margin: var(--space-1) 0 var(--space-2); color: var(--muted); font-size: 11px; line-height: 1.3; }
.compose-submit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.box-closed { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; text-align: center; color: var(--muted); }
.answers-heading { display: flex; align-items: center; min-height: 29px; margin: var(--space-1) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); font-weight: 700; }
.answer-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 var(--space-2); }
.answer-card { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.bubble { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; }
.bubble-question { border-color: var(--accent); }
.bubble-question::before, .bubble-answer::before { content: ""; position: absolute; z-index: 0; top: 12px; width: 11px; height: 11px; background: #fff; transform: rotate(45deg); }
.bubble-question::before { left: -6px; border-left: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.bubble-answer::before { right: -6px; border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
.bubble-answer { margin: var(--space-2) 0 0 25px; }
.answer-bubble-row { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); }
.answer-bubble-row .bubble-answer { flex: 1 1 auto; min-width: 0; margin: 0 0 0 25px; }
.answer-bubble-row .answer-owner-avatar { flex: 0 0 25px; margin-top: 2px; }
.answer-owner-avatar-fallback { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; margin-top: 2px; border-radius: 50%; background: #f4f4f5; }
.answer-owner-avatar-fallback .bako-face { transform: scale(.72); }
.answer-by { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); margin-top: var(--space-1); color: var(--muted); font-size: 12px; }
.answer-by img { width: 25px; height: 25px; object-fit: cover; border-radius: 50%; }
.answer-by .answer-owner-avatar { width: 25px; height: 25px; object-fit: cover; border-radius: 50%; }
.clipboard-fallback { position: fixed; inset: 0 auto auto 0; width: 1px; height: 1px; opacity: 0; }
.answer-detail { display: grid; align-content: start; gap: var(--space-3); flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: var(--space-3); }
.answer-detail .bubble { padding: 13px; }
.answer-detail .answer-bubble-row .bubble-answer { margin-left: 34px; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
.detail-actions > * { display: grid; place-items: center; min-height: 42px; }
.page > .detail-actions { flex: 0 0 auto; margin: 0 0 env(safe-area-inset-bottom); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.load-more { flex: 0 0 auto; margin-top: var(--space-2); }
.sent-success { display: flex; flex-direction: column; align-items: stretch; justify-content: center; min-height: 185px; gap: var(--space-3); text-align: center; }
.sent-success strong { font-size: 20px; }

.my-page { padding-bottom: 0; }
.my-head { flex: 0 0 auto; }
.settings-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.my-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 38px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.tab-button { min-height: 39px; padding: 0 2px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 700; white-space: nowrap; }
.tab-button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
.question-list, .sent-list, .admin-list, .block-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.question-item, .sent-item, .report-item, .history-item, .block-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.question-item:first-child, .sent-item:first-child, .report-item:first-child { padding-top: var(--space-2); }
.question-item-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); }
.question-content-row { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.question-content-row .bubble { flex: 1 1 auto; min-width: 0; }
.question-content-row .select-check { flex: 0 0 19px; margin: 5px 0 0; }
.question-anon-face { flex: 0 0 29px; margin-top: 2px; }
.question-item .bubble { margin: 0; }
.question-menu { position: relative; }
.menu-button { width: 32px; height: 32px; color: var(--muted); font-size: 20px; line-height: 1; }
.menu-panel { position: absolute; z-index: 2; right: 0; top: 31px; width: 142px; padding: var(--space-1); border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.menu-panel button { display: block; width: 100%; padding: 8px; text-align: left; color: var(--ink); }
.menu-panel button:hover { background: #f6f6f8; }
.question-actions { display: flex; align-items: center; justify-content: space-between; min-height: 39px; margin-top: var(--space-1); }
.answer-open { padding: 5px 0; color: var(--accent); font-weight: 700; }
.answer-editor { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.answer-editor-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.check-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); }
.check-label input { accent-color: var(--accent); }
.select-check { width: 19px; height: 19px; accent-color: var(--accent); }
.bottom-nav { display: grid; grid-template-columns: repeat(3, 1fr); flex: 0 0 54px; border-top: 1px solid var(--line); background: #fff; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.bottom-nav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.settings-form { display: grid; gap: var(--space-3); flex: 0 0 auto; padding: var(--space-3) 0; }
.field-label { display: grid; gap: var(--space-1); font-weight: 700; }
.settings-input { min-height: 42px; }
.form-help { margin: -5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.settings-section { display: flex; flex-direction: column; padding-top: var(--space-3); }
.settings-section h2 { flex: 0 0 auto; margin: 0 0 var(--space-2); font-size: 15px; }
.block-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 50px; padding: var(--space-1) 0; border-bottom: 1px solid var(--line); }
.block-item .text-button { flex: 0 0 auto; min-height: 42px; padding: 8px 4px; }
.block-list { flex: 0 0 auto; min-height: 0; overflow: visible; }
.block-item p { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.share-dialog { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 21px; background: rgba(0,0,0,.3); }
.share-panel { width: min(100%, 420px); padding: 21px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.share-panel h2 { margin: 0 0 var(--space-3); font-size: 17px; }
.share-panel button, .share-panel a { display: block; width: 100%; margin-top: var(--space-2); padding: 10px; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.report-item h2, .history-item h2 { margin: 0 0 var(--space-2); font-size: 14px; }
.report-item p, .history-item p { white-space: pre-wrap; overflow-wrap: anywhere; }
.report-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.status-label { color: var(--muted); font-size: 12px; }
.settings-danger { flex: 0 0 auto; padding: var(--space-3) 0; }
.posting-rules-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; padding: var(--rule-panel-pad); background: rgba(0,0,0,.3); }
.posting-rules-panel { display: flex; flex-direction: column; width: min(100%, 520px); max-height: calc(var(--bako-viewport-height) - 2 * var(--rule-panel-pad)); overflow: hidden; padding: var(--rule-panel-pad); border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.posting-rules-panel h2 { margin: 0 0 var(--space-3); font-size: 18px; }
.posting-rules-panel p { line-height: 1.5; }
.posting-rules-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.posting-rules-list { display: grid; gap: var(--space-3); padding-left: 20px; line-height: 1.45; }
.posting-rules-list li strong, .posting-rules-list li span { display: block; }
.posting-rules-actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--rule-panel-pad); padding-top: var(--rule-panel-pad); border-top: 1px solid var(--line); background: #fff; }
.posting-rules-actions button { min-height: 42px; }
.posting-rules-error { color: #b52323; }
.admin-switch-row { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.admin-list { padding-top: var(--space-2); }
.section-heading { margin: var(--space-2) 0; font-size: 15px; }
.history-panel { flex: 0 0 auto; max-height: 46%; min-height: 0; overflow-y: auto; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.history-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.history-heading .section-heading { margin: 0; }

/* Dialogs and edit panels use the same header / scrollable body / fixed actions frame. */
.answer-editor-overlay, .report-editor-overlay, .settings-panel-overlay, .onboarding-gate-overlay {
  position: fixed; inset: 0; z-index: 15; display: grid; place-items: center;
  padding: 0; background: rgba(0,0,0,.3);
}
.answer-editor-panel, .report-editor-panel, .settings-panel, .onboarding-gate-panel {
  display: flex; flex-direction: column; width: min(100%, 600px); height: var(--bako-viewport-height);
  min-height: 0; overflow: hidden; padding: 0 var(--space-3); background: #fff;
}
.answer-editor-panel, .report-editor-panel, .onboarding-gate-panel { border: 1px solid var(--line); border-radius: 10px; height: min(700px, calc(var(--bako-viewport-height) - 26px)); }
.panel-header { flex: 0 0 auto; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; }
.panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) 0; }
.panel-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 58px; padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.answer-editor-body { display: flex; flex-direction: column; gap: var(--space-3); }
.answer-editor-body .answer-input { flex: 1 1 auto; min-height: 90px; resize: none; }
.answer-editor-actions { justify-content: space-between; }
.report-editor-body { display: flex; flex-direction: column; gap: var(--space-3); }
.report-editor-body .report-input { flex: 1 1 auto; min-height: 120px; resize: none; }
.settings-panel-overlay { padding-top: 0; }
.settings-panel { padding-bottom: env(safe-area-inset-bottom); }
.settings-panel-body { padding: var(--space-3) 0; }
.settings-panel-actions { min-height: 58px; }
.settings-index { display: grid; align-content: start; }
.settings-link { min-height: 55px; padding: var(--space-3) 0; text-align: left; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.settings-hello { min-height: 95px; resize: none; }
.settings-form { gap: var(--space-3); }
.block-list { display: grid; align-content: start; gap: var(--space-2); overflow: visible; }
.block-item { flex: 0 0 auto; }
.block-item .secondary-button { flex: 0 0 auto; min-width: 60px; }
.onboarding-gate-panel { justify-content: center; gap: var(--space-4); padding: var(--space-4); }
.onboarding-gate-panel p { margin: 0; text-align: center; font-weight: 700; line-height: 1.5; }
.onboarding-gate-actions { display: grid; gap: var(--space-2); }
.onboarding-gate-actions button { min-height: 44px; }
.answer-detail .detail-actions { flex: 0 0 auto; }
.sent-list, .question-list { padding-bottom: var(--space-2); }
.load-more { min-height: 42px; }

@media (min-width: 601px) {
  .topbar { flex-basis: 54px; height: 54px; }
  .page { padding: var(--space-4) var(--space-3); }
  .box-page { padding-top: var(--space-3); }
  .question-input { height: 105px; }
}

@media (max-width: 600px) {
  :root { --rule-panel-pad: 13px; }
  .page { padding: var(--space-2); }
  .settings-form { gap: var(--space-2); padding: var(--space-2) 0; }
  .settings-input { min-height: 39px; }
  .form-help { margin-top: -3px; }
  .bottom-nav { flex-basis: 50px; }
  .posting-rules-panel { padding: var(--rule-panel-pad); }
  .posting-rules-actions { margin-top: var(--rule-panel-pad); padding-top: var(--rule-panel-pad); }
  .answer-editor-panel, .report-editor-panel, .settings-panel, .onboarding-gate-panel { border-radius: 0; width: 100%; height: var(--bako-viewport-height); max-height: var(--bako-viewport-height); padding-inline: var(--space-2); }
  .settings-panel { padding-bottom: env(safe-area-inset-bottom); }
}