:root {
  --bg: #eeeeee;
  --panel: #f2f2f2;
  --panel-2: #e6e6e6;
  --panel-3: #ededed;
  --line: #d5d5d5;
  --line-strong: #a0a0a0;
  --text: #181818;
  --muted: #555555;
  --subtle: #626262;
  --teal: #d90062;
  --teal-dark: #b90053;
  --rail: #e0e0e0;
  --surface: #ffffff;
  --surface-hover: #f4f4f4;
  --accent-soft: #fce1ec;
  --accent-text: #b90053;
  --choice-selected: #fff0f6;
  --success-soft: #e8f3ed;
  --warning-soft: #fff6de;
  --danger-soft: #fff0ee;
  --on-accent: #ffffff;
  --avatar-bg: #e3e3e3;
  --session-height: 48px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #202020;
  --surface: #303030;
  --surface-hover: #373737;
  --panel: #262626;
  --panel-2: #222222;
  --panel-3: #3b3b3b;
  --rail: #181818;
  --line: #444444;
  --line-strong: #777777;
  --text: #f2f2f2;
  --muted: #bdbdbd;
  --subtle: #aaaaaa;
  --teal: #db005f;
  --teal-dark: #bb0051;
  --accent-soft: #4c2636;
  --accent-text: #ff73af;
  --choice-selected: #442331;
  --amber: #e8bd75;
  --coral: #f29d90;
  --blue: #95c7ef;
  --danger: #ffaba6;
  --danger-soft: #482626;
  --success: #8ad9ac;
  --success-soft: #213b2f;
  --warning-soft: #3b3020;
  --on-accent: #ffffff;
  --avatar-bg: #454545;
  --shadow: 0 12px 28px #0005;
}
.session-controls {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: var(--session-height);
  padding: 4px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
body.community-app { --session-height: 0px; }
.community-app .session-controls {
  position: static;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.server-rail { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.server-rail > * { flex-shrink: 0; }
.server-footer { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; }
.server-rail .session-controls { flex-direction: column; gap: 12px; }
.server-rail .theme-picker { flex-direction: column; }
.server-rail .visible-logout button {
  display: inline-flex;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  background: var(--panel-2);
}
.server-rail .visible-logout button:hover { background: var(--accent-soft); }
.server-rail .visible-logout .ui-icon { width: 22px; height: 22px; }
.server-rail .visible-logout span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.drawer-session-slot { display: none; }
@media (max-width: 760px) {
  .drawer-session-slot { display: block; padding: 12px 16px 0; }
  .drawer-session-slot .session-controls { justify-content: space-between; gap: 12px; }
}
.theme-picker { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 6px; }
.theme-picker .icon-button { width: 30px; height: 30px; min-height: 30px; color: var(--muted); }
.theme-picker .is-selected { background: var(--accent-soft); color: var(--accent-text); }
.visible-logout { margin: 0; }
.visible-logout button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px; color: var(--text); white-space: nowrap; }
.visible-logout .ui-icon { width: 17px; height: 17px; }
:root[data-theme="dark"] .ui-icon { filter: brightness(0) invert(1) opacity(.85); }
:root[data-theme="dark"] .send-button .ui-icon { filter: brightness(0) invert(1); }
.app-shell, .timeline-column, .thread-rail { height: calc(100dvh - var(--session-height)); }
.channel-rail, .insight-rail, .server-rail { top: var(--session-height); height: calc(100dvh - var(--session-height)); }
.auth-shell { min-height: calc(100dvh - var(--session-height)); }
.sidebar-footer .mobile-account-settings { display: none; }
@media (max-width: 760px) {
  .sidebar-footer .mobile-account-settings { display: inline-flex; }
}
.auth-brand .brand-mark { width: 46px; height: 46px; aspect-ratio: 1; flex: 0 0 46px; object-fit: contain; border-radius: 8px; }
.privacy-note { color: var(--muted); font-size: 13px; line-height: 1.75; }
.nickname-form { display: flex; flex-direction: column; gap: 28px; }
.nickname-form > .primary-button { margin-top: 0; min-height: 48px; }
.nickname-card:has(input:checked) { border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 2px; }
.primary-button, .send-button, .approve-button { background: var(--teal); color: var(--on-accent); }
.primary-button:hover, .send-button:hover { background: var(--teal-dark); }
.brand { color: var(--accent-text); }
.avatar, .post-avatar { background: var(--avatar-bg); }
.timeline-column, .channel-header, .composer, .composer-readonly, .auth-panel, .public-profile-popover { background: var(--surface); }
.post-body, .comment-body { color: var(--text); }
.channel-link.is-active, .reaction-button.is-selected { background: var(--accent-soft); color: var(--accent-text); }
.post:hover { background: var(--surface-hover); }
.choice-card:has(input:checked), .nickname-card:has(input:checked) { background: var(--choice-selected); }
.welcome-hash { background: var(--accent-soft); color: var(--accent-text); }
.sidebar-search input { background: var(--bg); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.timeline-column, .channel-nav, .insight-rail { scrollbar-color: var(--line-strong) transparent; }
button, a, .choice-card, .nickname-card { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
button:active { filter: brightness(.94); }
.auth-panel, .timeline { animation: arrive 160ms ease-out; }
@keyframes arrive { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  body { padding-top: 0; }
  body.community-app { padding-top: 54px; }
  .community-app > .session-controls { position: fixed; left: 0; right: 0; top: 0; }
  .community-app > .app-shell { margin-top: var(--session-height); }
  .session-controls { padding-inline: 10px; }
  .mobile-header { top: var(--session-height); }
  .app-shell, .timeline-column, .channel-page .thread-rail { height: calc(100dvh - var(--session-height) - 54px); }
  .channel-rail { top: var(--session-height); height: calc(100dvh - var(--session-height)); }
  .auth-panel h1 { overflow-wrap: anywhere; }
}
.community-app .flash-stack { top: calc(var(--session-height) + 12px); }
.channel-tree { list-style: none; padding: 0; margin: 0; }
.channel-tree .channel-tree { padding-left: 12px; border-left: 1px solid var(--line); margin-left: 10px; }
.channel-tree-row { display: flex; min-height: 38px; align-items: center; border: 2px solid transparent; border-radius: 5px; }
.channel-tree-row .channel-link { flex: 1; min-width: 0; padding: 5px 4px; }
.channel-tree-row .channel-link > span:nth-child(2) { overflow-wrap: anywhere; }
.channel-collapse, .channel-collapse-space { flex: 0 0 20px; width: 20px; height: 28px; }
.channel-collapse { padding: 0; }
.channel-collapse .ui-icon { width: 16px; height: 16px; }
.channel-collapse[aria-expanded="false"] .ui-icon { transform: rotate(-90deg); }
.channel-layout-edit { width: 24px; flex: 0 0 24px; padding: 2px; }
.channel-layout-edit .ui-icon { width: 15px; height: 15px; }
.channel-tree-row[data-drop-placement="inside"] { background: var(--accent-soft); border-color: var(--teal); }
.channel-tree-row[data-drop-placement="before"] { border-top-color: var(--teal); }
.channel-tree-row[data-drop-placement="after"] { border-bottom-color: var(--teal); }
.channel-root-drop { padding: 16px 8px; border: 2px dashed var(--teal); color: var(--accent-text); }
.channel-layout-status { padding: 8px; font-size: 12px; overflow-wrap: anywhere; }
.child-impact { display: flex; gap: 8px; align-items: flex-start; white-space: normal; max-width: 280px; }
.child-impact input { width: auto; margin-top: 5px; }
form[data-mention-url] { position: relative; }
.mention-menu { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 25; max-height: 240px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px; background: var(--surface); box-shadow: var(--shadow); }
.mention-menu [role="option"] { padding: 8px; border-radius: 4px; cursor: pointer; overflow-wrap: anywhere; }
.mention-menu [aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
.mention-menu p { margin: 0; padding: 8px; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .community-app .flash-stack { top: calc(var(--session-height) + 64px); }
}
.send-feedback { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 12px; color: var(--muted); flex-wrap: wrap; overflow-wrap: anywhere; }
.send-feedback:has([data-send-status]:empty) { display: none; }
form[data-send-state="failed"] .send-feedback { color: var(--danger); }
form[data-send-state="sending"] .send-feedback::before { content: ""; flex: 0 0 12px; width: 12px; height: 12px; border: 2px solid var(--line-strong); border-top-color: var(--teal); border-radius: 50%; animation: sending-spin 700ms linear infinite; }
form[data-send-state="sending"] textarea { opacity: .7; }
.navigation-loading { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.navigation-loading[hidden] { display: none; }
.navigation-loading a { position: absolute; top: 10px; right: 12px; max-width: calc(100vw - 24px); padding: 8px 16px; font-size: 13px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: 4px; pointer-events: auto; }
.navigation-loading a[hidden] { display: none; }
.navigation-progress { display: block; height: 3px; width: 35%; background: var(--teal); animation: navigation-progress 1.1s ease-in-out infinite alternate; }
@keyframes navigation-progress { from { transform: translateX(0); } to { transform: translateX(180%); } }
.line-connect { max-width: 760px; }
.line-connect > p { margin: 24px 28px; }
.line-mobile-qr { display: block; width: 300px; height: 300px; max-width: 100%; object-fit: contain; background: #fff; image-rendering: pixelated; }
.line-qr-steps { padding-left: 24px; line-height: 1.9; }
.line-device-section p { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .line-connect { display: flex; flex-direction: column; }
  .line-connect > p { margin: 20px 18px; }
  .line-device-section { order: -1; }
}
@keyframes sending-spin { to { transform: rotate(360deg); } }
@keyframes loading-pulse { to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Keep account entry actions readable on both desktop and narrow screens. */
.line-login-actions { display: grid; gap: 12px; margin-top: 24px; }
.line-login-actions button { width: 100%; white-space: normal; }
.line-action { display: inline-grid; grid-template-columns: 44px minmax(0, 1fr); align-items: stretch; max-width: 100%; min-height: 48px; margin: 6px 0; padding: 0; border: 0; border-radius: 6px; background: #06c755; color: #fff; font-size: 16px; font-weight: 700; line-height: 24px; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; }
.line-action:hover { background: #05b34c; color: #fff; text-decoration: none; }
.line-action:active { background: #048b3b; filter: none; }
.line-action:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.line-action-icon { display: grid; align-items: center; justify-items: center; border-right: 1px solid rgb(0 0 0 / 8%); }
.line-action-icon img { display: block; width: 32px; height: 32px; max-width: none; object-fit: contain; }
.line-action-label { padding: 12px 24px; white-space: nowrap; }
.line-action:disabled { background: #fff; color: rgb(30 30 30 / 20%); border: 1px solid rgb(229 229 229 / 60%); opacity: 1; cursor: not-allowed; }
.line-action:disabled .line-action-icon { border-color: rgb(229 229 229 / 60%); }
.line-action:disabled img { filter: brightness(0); opacity: .2; }
.receipt-unavailable:disabled { background: #737373; color: #fff; border-color: #737373; filter: grayscale(1); opacity: .7; cursor: not-allowed; }
.receipt-members { list-style: none; padding: 0; margin: 24px 0; }
.receipt-members li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.sidebar-inbox span { min-width: 0; overflow-wrap: anywhere; }
.account-copy { flex: 1; min-width: 0; }

.field-help { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.field-row.consent-row { display: block; }
.stack-form .consent-row > label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.consent-row > label input[type="checkbox"] { width: 20px; height: 20px; margin: 3px 0 0; }
.consent-row > label span { min-width: 0; line-height: 1.7; overflow-wrap: anywhere; }
.registration-legal-links, .auth-footer { font-size: 12px; line-height: 1.8; }
.refresh-link { display: inline-flex; align-items: center; gap: 6px; }
.refresh-link .ui-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.flash-stack, .community-app .flash-stack {
  z-index: 100; top: max(12px, env(safe-area-inset-top));
  width: min(560px, calc(100% - 24px)); max-height: calc(75dvh - 24px); overflow-y: auto;
}
.flash { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 10px; align-items: center; }
.flash > span { white-space: normal; overflow-wrap: anywhere; line-height: 1.7; min-width: 0; margin: 0; }
.flash [data-flash-close] { width: 32px; height: 32px; padding: 6px; }
.welcome-tour-open .flash-stack { visibility: hidden; pointer-events: none; }
.legal-setting-links { display: flex; flex-wrap: wrap; gap: 12px; }
.channel-tree-row.is-unreleased { color: var(--muted); }
.channel-tree-row.is-unreleased .channel-link { color: var(--muted); opacity: .65; cursor: not-allowed; }
.channel-tree-row.is-unreleased .channel-collapse { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) {
  .line-qr-section, .desktop-qr-note { display: none; }
  .auth-panel { padding: 24px 18px; }
}