:root {
  color-scheme: light;
  --paper: #f4f4ef;
  --white: #fff;
  --ink: #1d2723;
  --muted: #858c85;
  --line: #e7e9e2;
  --green: #2e7d61;
  --green-soft: #e8f1eb;
  --coral: #e98469;
  --yellow: #e7bc58;
  --sidebar: #f9f9f5;
  font-family: "DM Sans", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); height: 100dvh; min-height: 560px; overflow: hidden; background: var(--white); }
.sidebar { display: flex; flex-direction: column; min-width: 0; padding: 22px 14px 14px; background: var(--sidebar); border-right: 1px solid var(--line); }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; margin-bottom: 34px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 700; }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px 10px 10px 3px; background: var(--green); color: white; font-family: Georgia, serif; font-size: 20px; font-weight: 700; }
.brand-edition { margin-left: 2px; color: #a4aaa2; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.sidebar-label, .section-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 9px; color: #949b93; font-size: 11px; font-weight: 700; }
.sidebar-label { margin-bottom: 9px; }
.tiny-spark { color: var(--coral); font-size: 15px; }
.channel-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 9px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.channel-link.active { background: #eaf1eb; }
.channel-icon, .header-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #f3e5dc; color: #a96247; font-size: 16px; }
.community-icon { background: #e4efe8; color: var(--green); }
.channel-text { display: grid; min-width: 0; gap: 3px; }
.channel-text strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.channel-text small { overflow: hidden; color: #929991; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.live-dot, .profile-status { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #55a77b; box-shadow: 0 0 0 3px #dceee2; }
.section-heading { margin: 28px 4px 8px; padding-left: 5px; }
.group-heading { margin-top: 21px; }
.icon-button { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #91988f; font-size: 19px; line-height: 1; cursor: pointer; }
.icon-button:hover { background: #edeee8; color: var(--ink); }
.channel-list { display: grid; gap: 2px; overflow: auto; }
.channel-item { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.channel-item:hover, .channel-item.active { background: #eeefe9; }
.mini-avatar { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: #f4e5db; color: #935e49; font-size: 11px; font-weight: 700; }
.mini-avatar.group { background: #e6e9f2; color: #626c90; }
.channel-item span:last-child { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.empty-sidebar { padding: 8px 8px 8px 10px; color: #a0a69e; font-size: 11px; line-height: 1.7; }
.sidebar-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.profile-card { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 5px; }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.avatar-mine { background: #e5eee7; color: var(--green); }
.profile-copy { display: grid; min-width: 0; gap: 3px; }
.profile-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy span { color: #929991; font-size: 10px; }
.profile-status { margin-left: auto; width: 6px; height: 6px; box-shadow: none; }
.logout-button { margin-left: 1px; font-size: 17px; }

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--white); }
.chat-header { display: flex; align-items: center; gap: 12px; min-height: 83px; padding: 14px 29px; border-bottom: 1px solid var(--line); }
.header-avatar { width: 40px; height: 40px; border-radius: 12px; }
.header-copy { min-width: 0; }
.header-title-row { display: flex; align-items: center; gap: 10px; }
.header-title-row h1 { margin: 0; font-size: 15px; font-weight: 700; }
.chat-type { padding: 4px 7px; border-radius: 4px; background: #f5f2e9; color: #9c8150; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.header-copy p { margin: 5px 0 0; color: #8d958d; font-size: 11px; }
.header-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.connected-indicator { display: flex; align-items: center; gap: 6px; color: #79887c; font-size: 10px; white-space: nowrap; }
.connected-indicator span { width: 6px; height: 6px; border-radius: 50%; background: #56a87d; }
.member-stack { display: flex; padding-left: 6px; }
.member-bubble { display: grid; width: 27px; height: 27px; margin-left: -6px; place-items: center; border: 2px solid white; border-radius: 50%; background: #e9d8cb; color: #785847; font-size: 9px; font-weight: 700; }
.member-bubble:nth-child(2n) { background: #e3ebe1; color: #52714f; }
.requests-button { position: relative; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: white; color: #69716a; font-size: 10px; cursor: pointer; }
.requests-button b { position: absolute; top: -6px; right: -6px; display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 9px; background: var(--coral); color: white; font-size: 9px; }
.message-list { flex: 1; overflow: auto; padding: 28px max(24px, calc((100% - 760px) / 2)) 24px; scroll-behavior: smooth; }
.welcome-note { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; padding: 16px 18px; border: 1px solid #e6eee6; border-radius: 9px; background: #f5f8f3; }
.welcome-sun { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: #e3efe4; color: #498260; font-size: 18px; }
.welcome-note strong { display: block; margin-bottom: 3px; font-size: 12px; }
.welcome-note p { margin: 0; color: #828b81; font-size: 11px; line-height: 1.65; }
.day-divider { display: flex; align-items: center; gap: 12px; margin: 21px 0; color: #a0a59f; font-size: 9px; }
.day-divider::before, .day-divider::after { height: 1px; flex: 1; background: #eff0ec; content: ""; }
.message { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 19px; animation: message-in .22s ease-out both; }
.message-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: #f1e2d9; color: #875943; font-size: 10px; font-weight: 700; }
.message:nth-of-type(3n) .message-avatar { background: #e7ece0; color: #59714c; }
.message:nth-of-type(4n) .message-avatar { background: #ece5f1; color: #746185; }
.message-body { min-width: 0; }
.message-meta { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.message-meta strong { font-size: 11px; font-weight: 700; }
.message-meta span { color: #a4aaa3; font-size: 9px; }
.message-text { margin: 0; color: #46504a; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; }
.message.is-mine .message-avatar { background: #e0ede4; color: var(--green); }
.system-empty { display: grid; min-height: 100%; align-content: center; justify-items: center; padding: 25px; text-align: center; }
.empty-graphic { display: grid; width: 62px; height: 62px; margin-bottom: 17px; place-items: center; border-radius: 20px; background: #f0f3ed; color: var(--green); font-size: 24px; }
.system-empty h2 { margin: 0 0 7px; font-size: 14px; }
.system-empty p { max-width: 330px; margin: 0; color: #929991; font-size: 11px; line-height: 1.8; }
.composer { padding: 8px max(24px, calc((100% - 760px) / 2)) 18px; }
.composer-wrap { padding: 11px 12px 9px 16px; border: 1px solid #e3e7df; border-radius: 10px; background: #fff; box-shadow: 0 5px 22px #273c2c08; }
.composer-wrap:focus-within { border-color: #9fbea8; box-shadow: 0 0 0 3px #e9f2eb; }
.composer textarea { display: block; width: 100%; min-height: 33px; max-height: 150px; resize: none; border: 0; outline: 0; color: var(--ink); font-size: 12px; line-height: 1.65; }
.composer textarea::placeholder { color: #a4aaa3; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.composer-hint { color: #b0b5ae; font-size: 9px; }
.send-button { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border: 0; border-radius: 6px; background: var(--green); color: white; font-size: 10px; font-weight: 600; cursor: pointer; }
.send-button:hover, .button-dark:hover { background: #24674f; }
.send-button span:last-child { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 4px; background: #ffffff28; font-size: 13px; }
.composer-context { margin: 8px 3px 0; color: #a5aaa4; font-size: 9px; }

.auth-view { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(400px, .82fr); min-height: 100dvh; background: white; }
.auth-copy { position: relative; display: flex; flex-direction: column; min-height: 100dvh; overflow: hidden; padding: 38px clamp(36px, 8vw, 125px); background: #eef2e8; }
.brand-large { position: relative; z-index: 1; font-size: 22px; }
.brand-large .brand-mark { width: 34px; height: 34px; font-size: 22px; }
.eyebrow { position: relative; z-index: 1; margin: auto 0 15px; color: #738876; font-size: 9px; font-weight: 700; letter-spacing: 1.7px; }
.auth-copy h1 { position: relative; z-index: 1; margin: 0; font-size: 44px; font-weight: 600; line-height: 1.45; }
.auth-description { position: relative; z-index: 1; margin: 19px 0 45px; color: #727d70; font-size: 13px; line-height: 2; }
.auth-note { position: relative; z-index: 1; margin-top: auto; color: #879183; font-size: 10px; }
.orbit-art { position: absolute; right: -31px; bottom: 64px; width: 280px; height: 280px; opacity: .85; }
.orbit { position: absolute; inset: 20px; border: 1px solid #b8c5b2; border-radius: 50%; transform: rotate(-24deg) scaleY(.55); }
.orbit-two { inset: 47px 3px; border-color: #d3a28c; transform: rotate(38deg) scaleY(.65); }
.orbit-dot { position: absolute; top: 66px; right: 57px; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 9px #e9846920; }
.orbit-word { position: absolute; top: 111px; left: 80px; color: #618064; font-family: Georgia, serif; font-size: 29px; line-height: 1.1; transform: rotate(-9deg); }
.auth-panel { display: grid; align-content: center; padding: 55px clamp(36px, 7vw, 100px); }
.auth-form-wrap { width: min(100%, 360px); margin: 0 auto; }
.auth-tabs { display: flex; gap: 25px; margin-bottom: 37px; border-bottom: 1px solid var(--line); }
.auth-tab { padding: 0 0 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #a1a69f; font-size: 12px; cursor: pointer; }
.auth-tab.active { border-bottom-color: var(--green); color: var(--ink); font-weight: 700; }
.auth-form-wrap h2 { margin: 0 0 7px; font-size: 21px; font-weight: 600; }
.muted { margin: 0 0 28px; color: #929991; font-size: 11px; }
.field { display: grid; gap: 8px; margin: 0 0 18px; }
.field > span { font-size: 11px; font-weight: 600; }
.field input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #e3e6df; border-radius: 6px; outline: 0; background: white; font-size: 12px; }
.field input:focus { border-color: #8cad96; box-shadow: 0 0 0 3px #eaf2eb; }
.field input::placeholder { color: #b5bbb4; }
.field small { color: #a0a69f; font-size: 9px; }
.input-prefix { display: flex; align-items: center; height: 43px; padding-left: 12px; border: 1px solid #e3e6df; border-radius: 6px; color: #a2aaa0; }
.input-prefix:focus-within { border-color: #8cad96; box-shadow: 0 0 0 3px #eaf2eb; }
.input-prefix input { height: 40px; border: 0; box-shadow: none !important; }
.form-error { min-height: 16px; margin: -4px 0 8px; color: #ba5544; font-size: 10px; }
.button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 45px; padding: 0 14px; border: 0; border-radius: 6px; cursor: pointer; }
.button-dark { background: var(--green); color: white; font-size: 12px; font-weight: 600; }
.auth-footnote { margin-top: 22px; color: #a0a69f; font-size: 9px; text-align: center; }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: #1d272355; animation: fade-in .16s ease-out; }
.modal { width: min(100%, 440px); max-height: min(80dvh, 650px); overflow: auto; padding: 24px; border: 1px solid #e9ebe5; border-radius: 11px; background: white; box-shadow: 0 24px 80px #1d272326; animation: modal-in .18s ease-out; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 21px; }
.modal-header h2 { margin: 0 0 5px; font-size: 16px; }
.modal-header p { margin: 0; color: #8d958d; font-size: 10px; }
.modal-close { margin: -5px -5px 0 0; font-size: 20px; }
.modal-form { display: grid; gap: 13px; }
.modal-form label { display: grid; gap: 7px; font-size: 10px; font-weight: 600; }
.modal-form input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #e3e6df; border-radius: 6px; outline: 0; font-size: 11px; }
.modal-form input:focus { border-color: #8cad96; }
.modal-primary { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--green); color: white; font-size: 11px; font-weight: 600; cursor: pointer; }
.modal-primary:hover { background: #24674f; }
.modal-secondary { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: white; color: #59615a; font-size: 10px; cursor: pointer; }
.request-list { display: grid; gap: 9px; }
.request-row { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #eceee8; border-radius: 7px; }
.request-copy { min-width: 0; flex: 1; }
.request-copy strong { display: block; margin-bottom: 3px; font-size: 11px; }
.request-copy span { color: #8e968d; font-size: 9px; }
.request-actions { display: flex; gap: 5px; }
.request-actions button { min-height: 29px; padding: 0 9px; border: 0; border-radius: 5px; background: #e8f1eb; color: var(--green); font-size: 9px; cursor: pointer; }
.request-actions button:last-child { background: #f2f2ef; color: #788078; }
.modal-empty { padding: 19px 0; color: #979e96; font-size: 11px; text-align: center; }
.checkbox-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.checkbox-row { display: flex !important; grid-template-columns: none; align-items: center; gap: 9px !important; padding: 8px; border: 1px solid #eceee8; border-radius: 6px; font-weight: 400 !important; cursor: pointer; }
.checkbox-row input { width: 15px; height: 15px; accent-color: var(--green); }
.toast-region { position: fixed; z-index: 20; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { max-width: min(340px, calc(100vw - 40px)); padding: 11px 15px; border: 1px solid #e6e9e3; border-radius: 7px; background: white; box-shadow: 0 8px 24px #17251b14; color: #46504a; font-size: 11px; animation: toast-in .2s ease-out; }
.toast.error { border-color: #f0d7d0; color: #ae4b3b; }
.mobile-menu, .mobile-close { display: none; }

@keyframes message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(7px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 5; top: 0; bottom: 0; left: 0; width: min(290px, 86vw); box-shadow: 15px 0 40px #17251b1c; transform: translateX(-105%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .mobile-menu, .mobile-close { display: grid; }
  .chat-header { min-height: 72px; gap: 9px; padding: 11px 13px; }
  .header-avatar { width: 35px; height: 35px; }
  .header-title-row { gap: 6px; }
  .header-title-row h1 { font-size: 13px; }
  .chat-type { padding: 3px 5px; font-size: 7px; }
  .header-copy p { max-width: 46vw; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .header-right { gap: 8px; }
  .connected-indicator, .member-stack { display: none; }
  .requests-button { padding: 7px 8px; font-size: 9px; }
  .message-list { padding: 18px 14px 16px; }
  .composer { padding: 7px 12px 12px; }
  .composer-hint { font-size: 8px; }
  .composer-context { font-size: 8px; }
  .auth-view { grid-template-columns: 1fr; min-height: 100dvh; }
  .auth-copy { display: none; }
  .auth-panel { min-height: 100dvh; padding: 35px 24px; }
  .auth-form-wrap { width: min(100%, 390px); }
}

@media (max-width: 390px) {
  .chat-header { gap: 6px; padding-right: 8px; padding-left: 8px; }
  .header-right { gap: 5px; }
  .header-copy p { max-width: 39vw; }
  .requests-button { padding: 6px; }
}