:root { color-scheme: light; --ink:#17231e; --muted:#69746f; --line:#dce3df; --paper:#fff; --surface:#f4f7f5; --accent:#087f5b; --accent-dark:#066748; --accent-soft:#e4f3ed; --danger:#b33a2b; font-family: Tahoma,"Noto Sans Thai",Arial,sans-serif; color:var(--ink); background:var(--surface); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input,select,textarea { font:inherit; }
button { color:inherit; cursor:pointer; }
[hidden] { display:none !important; }
.auth-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(380px,.75fr); min-height:100svh; }
.auth-brand { display:flex; flex-direction:column; justify-content:space-between; padding:36px clamp(30px,6vw,84px); color:#f7fbf9; background:#19382c; }
.brand-lockup { display:flex; align-items:center; gap:10px; font-size:18px; letter-spacing:0; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:7px; background:var(--accent); color:white; font-weight:700; }
.auth-promise { max-width:670px; padding:70px 0; }
.eyebrow,.step,.section-label { color:#73c7a8; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.auth-promise h1 { margin:12px 0 18px; max-width:650px; font-size:clamp(36px,5vw,68px); line-height:1.12; letter-spacing:0; }
.auth-promise>p:last-child { max-width:560px; color:#c8d7d1; font-size:17px; line-height:1.65; }
.language-line { display:flex; flex-wrap:wrap; gap:22px; color:#afc7bd; font-size:12px; }
.auth-panel { display:grid; place-items:center; padding:34px; background:var(--paper); }
.auth-form { display:flex; flex-direction:column; gap:18px; width:min(100%,430px); }
.auth-form h2 { margin:4px 0; font-size:28px; }
.muted { margin:0; color:var(--muted); line-height:1.55; }
label { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:700; }
input,select,textarea { width:100%; border:1px solid #cbd5cf; border-radius:7px; outline:0; background:white; color:var(--ink); }
input,select { height:44px; padding:0 12px; }
input:focus,select:focus,textarea:focus { border-color:#79aa98; box-shadow:0 0 0 3px rgba(8,127,91,.1); }
.primary-button,.secondary-button { min-height:39px; padding:0 14px; border-radius:7px; font-weight:700; }
.primary-button { border:1px solid var(--accent); background:var(--accent); color:white; }
.primary-button:hover { background:var(--accent-dark); }
.secondary-button { border:1px solid var(--line); background:white; }
.secondary-button:hover { background:#f0f4f2; }
.text-button { width:max-content; padding:0; border:0; background:none; color:var(--accent); }
.check-row { flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; }
.check-row input { width:17px; height:17px; margin-top:2px; accent-color:var(--accent); }
.check-row span { display:flex; flex-direction:column; gap:2px; }
.check-row small { color:var(--muted); }
.form-error { min-height:18px; margin:0; color:var(--danger); font-size:12px; }
.dev-code { margin:0; padding:10px 12px; border-left:3px solid var(--accent); background:var(--accent-soft); font-size:13px; }

.app-shell { display:grid; grid-template-columns:290px minmax(0,1fr); height:100svh; overflow:hidden; }
.sidebar { display:flex; flex-direction:column; width:290px; min-width:0; max-width:290px; min-height:0; overflow:hidden; padding:16px 12px; border-right:1px solid var(--line); background:#eff3f0; }
.sidebar-top,.user-row,.chat-header,.dialog-heading { display:flex; align-items:center; }
.sidebar-top { justify-content:space-between; padding:0 6px 15px; }
.user-row { gap:10px; padding:10px 7px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.user-row>span:nth-child(2) { display:flex; flex:1; flex-direction:column; min-width:0; }
.user-row strong,.user-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-row small { color:var(--muted); font-size:11px; }
.avatar { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:#e46d50; color:white; font-size:12px; font-weight:700; }
.icon-button { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; padding:0; border:0; border-radius:6px; background:transparent; font-size:18px; }
.icon-button:hover { background:#e2e8e4; }
.sidebar-actions { display:grid; grid-template-columns:1fr; gap:7px; padding:13px 0; }
.section-label { display:flex; justify-content:space-between; padding:8px 7px; color:var(--muted); }
.conversation-list { flex:1 1 0; align-self:stretch; width:100%; min-width:0; max-width:100%; overflow-x:hidden; overflow-y:auto; }
.conversation-item { display:flex; align-items:center; gap:9px; width:100%; min-width:0; max-width:100%; overflow:hidden; padding:9px 7px; border:0; border-radius:7px; background:transparent; text-align:left; }
.conversation-item:hover { background:#e4eae6; }
.conversation-item.active { background:#dce7e1; }
.conversation-symbol { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:8px; background:#28493b; color:white; font-size:12px; font-weight:700; }
.conversation-copy { flex:1 1 0; width:0; min-width:0; max-width:calc(100% - 47px); overflow:hidden; }
.conversation-copy strong,.conversation-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-copy strong { font-size:13px; }
.conversation-copy small { margin-top:3px; color:var(--muted); font-size:11px; }
.sidebar-note { margin:8px 5px 0; color:var(--muted); font-size:10px; line-height:1.45; }
.workspace { display:grid; grid-template-rows:66px minmax(0,1fr); min-width:0; background:white; }
.chat-header { gap:10px; padding:0 22px; border-bottom:1px solid var(--line); }
.chat-header h1 { margin:0; font-size:16px; }
.chat-header p { margin:2px 0 0; color:var(--muted); font-size:11px; }
.header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.live-status { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; }
.live-status i { width:7px; height:7px; border-radius:50%; background:#28a56e; box-shadow:0 0 0 3px #e5f5ed; }
.empty-state { display:grid; place-content:center; justify-items:center; padding:30px; text-align:center; }
.empty-symbol { display:grid; place-items:center; width:68px; height:68px; border-radius:18px; background:#e5f0eb; color:var(--accent); font-size:25px; }
.empty-state h2 { margin:16px 0 5px; }
.empty-state p { margin:0 0 18px; color:var(--muted); }
.message-view { display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:0; }
.message-list { overflow-y:auto; padding:24px clamp(16px,5vw,60px); }
.message { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; max-width:840px; margin:0 auto 17px; }
.message.own { grid-template-columns:minmax(0,1fr) 36px; }
.message.own .avatar { grid-column:2; }
.message.own .message-body { grid-column:1; grid-row:1; align-items:flex-end; }
.message-body { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.message-meta { display:flex; gap:8px; margin:0 0 4px; font-size:11px; }
.message-meta time { color:var(--muted); }
.bubble { max-width:min(620px,90%); padding:9px 12px; border-radius:4px 11px 11px; background:#eef2ef; font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.own .bubble { border-radius:11px 4px 11px 11px; background:var(--accent-soft); }
.translation { max-width:min(620px,90%); margin-top:6px; padding:7px 10px; border-left:2px solid #87a99b; color:#52615a; font-size:12px; line-height:1.5; }
.translation strong { display:block; margin-bottom:2px; color:var(--accent); font-size:9px; text-transform:uppercase; }
.translation.failed { border-color:#c87a6d; color:var(--danger); }
.composer { display:grid; grid-template-columns:minmax(0,1fr) 65px 40px; gap:6px; margin:0 clamp(12px,4vw,50px) 18px; padding:7px; border:1px solid #ccd6d0; border-radius:8px; box-shadow:0 4px 18px rgba(23,35,30,.06); }
.composer textarea { min-height:40px; max-height:120px; padding:9px; border:0; resize:none; }
.composer textarea:focus { box-shadow:none; }
.composer select { height:40px; padding:0 7px; border:0; background:#f0f4f2; }
.send-button { width:40px; height:40px; border:0; border-radius:7px; background:var(--accent); color:white; font-size:20px; }
dialog { width:min(92vw,460px); padding:0; border:1px solid var(--line); border-radius:8px; box-shadow:0 20px 60px rgba(23,35,30,.2); }
dialog::backdrop { background:rgba(21,32,27,.36); }
#dialog-form { padding:20px; }
.dialog-heading { justify-content:space-between; }
.dialog-heading h2 { margin:0; font-size:18px; }
#dialog-content { display:flex; flex-direction:column; gap:14px; padding:18px 0 8px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.invite-code { padding:12px; border:1px dashed #8ca89c; background:var(--accent-soft); overflow-wrap:anywhere; font-family:monospace; }
.toast { position:fixed; z-index:50; left:50%; bottom:22px; padding:9px 14px; border-radius:7px; background:var(--ink); color:white; opacity:0; transform:translate(-50%,10px); transition:.18s ease; pointer-events:none; font-size:12px; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.mobile-only,.mobile-scrim { display:none; }
@media (max-width:760px) {
  .auth-layout { grid-template-columns:1fr; }
  .auth-brand { min-height:290px; padding:25px; }
  .auth-promise { padding:42px 0 25px; }
  .auth-promise h1 { font-size:34px; }
  .auth-promise>p:last-child { font-size:14px; }
  .language-line { gap:12px; }
  .auth-panel { padding:30px 22px; }
  .app-shell { display:block; }
  .workspace { height:100svh; grid-template-rows:60px minmax(0,1fr); }
  .sidebar { position:fixed; z-index:30; inset:0 auto 0 0; width:min(88vw,310px); max-width:min(88vw,310px); transform:translateX(-103%); transition:.2s ease; box-shadow:15px 0 35px rgba(23,35,30,.18); }
  body.sidebar-open .sidebar { transform:none; }
  .mobile-only { display:grid; }
  .mobile-scrim { position:fixed; z-index:20; inset:0; background:rgba(20,30,25,.35); }
  body.sidebar-open .mobile-scrim { display:block; }
  .chat-header { padding:0 10px; }
  .live-status { display:none; }
  .message-list { padding:18px 12px; }
  .composer { margin:0 9px 10px; }
  .bubble,.translation { max-width:96%; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }