:root {
  --green: #06c755;
  --ink: #17212b;
  --muted: #667784;
  --line: #dce5ea;
  --surface: #fff;
  --panel: #f7fafb;
  --chat: #e7f0eb;
  --incoming: #fff;
  --outgoing: #d9fdd3;
}
body.dark {
  --ink: #edf4f7;
  --muted: #b8c6cf;
  --line: #3e5064;
  --surface: #202c3b;
  --panel: #172130;
  --chat: #172331;
  --incoming: #2a3748;
  --outgoing: #17613c;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, "Yu Gothic", Meiryo, sans-serif; color: var(--ink); background: var(--panel); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: #111827; }
.login-card, .dialog-card { width: min(440px, 100%); display: grid; gap: 12px; padding: 22px; border-radius: 10px; background: var(--surface); }
.login-card input, .dialog-card input, .dialog-card select, .composer input, .composer select { height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: var(--surface); color: var(--ink); }
.login-card button, .composer button, #createUserBtn, #createGroupBtn { border: 0; border-radius: 8px; min-height: 42px; background: var(--green); color: #fff; font-weight: 700; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; }
.brand h1, .brand p { margin: 0; }
.brand p, small, .panel p, #chatSub { color: var(--muted); }
.app { height: 100vh; display: grid; grid-template-columns: 60px 310px minmax(420px, 1fr) 300px; overflow: hidden; }
.rail { display: grid; align-content: start; gap: 10px; padding: 14px 8px; background: #111827; }
.rail button { width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: #dbe7ef; }
.rail button.active, .rail button:hover { background: rgba(255,255,255,.12); }
.list, .panel { min-width: 0; overflow: auto; background: var(--panel); border-right: 1px solid var(--line); }
.panel { border-left: 1px solid var(--line); border-right: 0; padding: 20px; }
.list header { display: flex; justify-content: space-between; align-items: center; padding: 18px; border-bottom: 1px solid var(--line); }
.list header button, .chat-head button, .dialog-card header button { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 7px 10px; }
.conv { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; min-height: 70px; border: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; background: transparent; text-align: left; color: var(--ink); }
.conv:hover, .conv.active { background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.conv-title { display: flex; align-items: center; gap: 6px; }
.pin { color: var(--green); font-size: 13px; }
.conv-side { display: grid; justify-items: end; gap: 5px; color: var(--muted); font-size: 12px; }
.expire-chip { font-size: 11px; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; }
.conv strong, .conv span { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview { margin-top: 4px; color: var(--muted); font-size: 13px; }
.unread { min-width: 20px; height: 20px; border-radius: 999px; background: var(--green); color: #fff; text-align: center; line-height: 20px; font-size: 12px; }
.chat { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; background: var(--chat); }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--line); }
.chat-head h2, .chat-head p { margin: 0; }
.messages { display: flex; flex-direction: column; gap: 8px; padding: 18px; overflow: auto; }
.msg { max-width: 72%; display: grid; gap: 3px; }
.msg.mine { align-self: end; }
.bubble { padding: 10px 12px; border-radius: 8px; background: var(--incoming); overflow-wrap: anywhere; }
.mine .bubble { background: var(--outgoing); }
.quote { margin: -2px -2px 8px; padding: 6px 8px; border-left: 3px solid var(--green); border-radius: 6px; background: color-mix(in srgb, var(--surface) 62%, transparent); color: var(--muted); font-size: 12px; }
.meta { color: var(--muted); font-size: 11px; }
.mine .meta { text-align: right; }
.reply-bar { display: grid; grid-template-columns: 1fr 30px; gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--green) 10%, var(--surface)); color: var(--ink); }
.reply-bar button { border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 10%, transparent); width: 28px; height: 28px; }
.composer { display: grid; grid-template-columns: 110px 1fr 70px; gap: 10px; padding: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); border-top: 1px solid var(--line); }
dialog { border: 0; border-radius: 10px; padding: 0; background: transparent; color: var(--ink); }
dialog::backdrop { background: rgba(10,18,27,.46); }
.dialog-card { width: min(620px, 94vw); max-height: 90vh; overflow: auto; }
.dialog-card header { display: flex; justify-content: space-between; align-items: center; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.user-row, .member-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.audit-layout { display: grid; grid-template-columns: 240px 1fr; gap: 12px; min-height: 280px; }
.audit-list, .audit-messages { border: 1px solid var(--line); border-radius: 8px; overflow: auto; background: color-mix(in srgb, var(--surface) 96%, transparent); }
.audit-list button { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 10px; background: transparent; color: var(--ink); text-align: left; }
.audit-list button:hover, .audit-list button.active { background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.audit-list small { display: block; margin-top: 3px; color: var(--muted); }
.audit-messages { display: grid; align-content: start; gap: 8px; padding: 10px; }
.audit-message { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: var(--surface); }
.audit-message small { display: block; margin-top: 5px; color: var(--muted); }
.context-menu { position: fixed; z-index: 50; display: none; min-width: 170px; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 14px 34px rgba(0,0,0,.22); list-style: none; }
.context-menu.visible { display: block; }
.context-menu button { width: 100%; border: 0; border-radius: 6px; padding: 9px 10px; background: transparent; color: var(--ink); text-align: left; }
.context-menu button:hover { background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.expire-options { display: grid; gap: 8px; }
.expire-options button { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-align: left; padding: 10px 12px; }
.expire-options button.active, .expire-options button:hover { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.muted { color: var(--muted); }
@media (max-width: 980px) { .app { grid-template-columns: 54px 280px 1fr; } .panel { display: none; } }
@media (max-width: 720px) { .audit-layout { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .app { grid-template-columns: 54px 1fr; } .list { display: none; } }