*{box-sizing:border-box} :root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Noto Sans JP",sans-serif;color:#173137;background:#f2f5f6;font-synthesis:none;font-size:16px;--ink:#173137;--muted:#5e7378;--line:#dde5e6;--accent:#b5f4de;--dark:#102e36}body{margin:0}button,input,a{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #0d967b;outline-offset:4px}button{transition:background .15s,transform .15s}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.topbar{height:88px;padding:0 max(32px,calc((100vw - 1240px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff;gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--dark);color:var(--accent);font-weight:900;font-size:26px;letter-spacing:1px;padding-bottom:5px}.brand strong{font-size:23px;letter-spacing:-1px}.brand strong span{font-size:14px;font-weight:600;letter-spacing:2px;margin-left:5px}.top-note{font-size:14px;color:var(--muted)}.language-switch{display:flex;padding:4px;background:#eff3f4;border-radius:10px;gap:4px}.language-switch button{border:0;padding:8px 13px;border-radius:7px;background:transparent;color:var(--muted);font-size:14px}.language-switch button[aria-pressed=true]{background:white;color:var(--ink);box-shadow:0 1px 4px #19363a14;font-weight:700}main{max-width:1240px;margin:0 auto;padding:35px 0 24px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.eyebrow{font-size:12px;letter-spacing:2.2px;font-weight:700;color:#516d73;margin:0 0 10px}h1{font-size:29px;letter-spacing:-1.2px;line-height:1.35;margin:0}h2{font-size:17px;letter-spacing:-.3px;margin:0}h3{font-size:17px;margin:16px 0 8px;font-weight:600}.version{font-size:12px;color:var(--muted);letter-spacing:1.5px;border:1px solid var(--line);padding:9px 12px;border-radius:6px}.workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:26px;align-items:start}.sidebar{display:flex;flex-direction:column;gap:18px}.panel{background:white;border:1px solid var(--line);border-radius:18px}.setup,.listening{padding:23px}.section-heading{display:flex;gap:11px;align-items:center;margin-bottom:21px}.step{font-size:12px;font-weight:700;color:#648087}.field-label{display:block;margin-bottom:9px;font-size:14px;font-weight:600}input[type=password],input[type=text],input[readonly]{width:100%;background:#f9fbfb;border:1px solid #d9e3e5;border-radius:9px;padding:12px 13px;font-size:14px;color:var(--ink);min-width:0}input::placeholder{color:#7d8d91}.language-pair{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:12px 15px;font-weight:600}.exchange{color:#0a846b}.muted{color:var(--muted)}.small{font-size:13px;line-height:1.65;margin:9px 0 18px}.consent{display:flex;gap:9px;font-size:13px;line-height:1.65;color:#52686e;margin:18px 0}.consent input{flex-shrink:0;align-self:flex-start;margin-top:4px;width:16px;height:16px;accent-color:#0d7f6b}.button{width:100%;padding:13px 15px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:10px;font-size:14px;font-weight:600;min-height:46px}.primary{background:var(--dark);color:white;border:1px solid var(--dark);justify-content:space-between}.primary:hover{background:#20434d}.secondary{background:white;color:var(--ink);border:1px solid var(--line);margin-top:10px}.secondary:hover{background:#eff6f3}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.switch-row strong{display:block;font-size:14px;font-weight:600}.switch-row small{display:block;color:var(--muted);font-size:12px;margin-top:6px}.switch-row input{appearance:none;width:36px;height:21px;flex-shrink:0;background:#d4dee0;border-radius:20px;position:relative;cursor:pointer;margin:0}.switch-row input:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;background:white;border-radius:50%;transition:transform .15s}.switch-row input:checked{background:#188b73}.switch-row input:checked:after{transform:translateX(15px)}.switch-row input:disabled{opacity:.5;cursor:not-allowed}.headphone-tip{display:flex;gap:10px;align-items:flex-start;border-top:1px solid var(--line);padding-top:16px}.headphone-tip span{font-size:23px;color:#436369}.headphone-tip p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.storage-note{font-size:12px;line-height:1.75;color:var(--muted);padding:0 7px;margin:0}.conversation{min-width:0;display:flex;flex-direction:column;gap:20px}.call-stage{background:var(--dark);border-radius:21px;color:white;padding:23px 30px 25px;overflow:hidden}.stage-top{display:flex;align-items:center;justify-content:space-between}.status-badge{font-size:12px;background:#28444b;border:1px solid #415a60;padding:7px 12px;border-radius:30px;color:#dcebee}.status-badge.active{color:var(--accent);border-color:#567b73;background:#1b4545}.timer{font-size:14px;color:#c9d8dc;font-variant-numeric:tabular-nums;letter-spacing:1px}.speakers{display:flex;justify-content:center;align-items:center;gap:38px;margin:27px 0 0}.speaker{display:flex;flex-direction:column;align-items:center;min-width:110px}.avatar{width:77px;height:77px;border-radius:28px;display:grid;place-items:center;font-size:25px;font-weight:600;margin-bottom:13px}.avatar-me{background:#b5f4de;color:#17463c}.avatar-friend{background:#efd79d;color:#514522}.speaker strong{font-size:15px;font-weight:500}.speaker>span{font-size:12px;margin-top:5px;color:#a8c0c6}.connection-mark{display:flex;align-items:center;gap:12px;color:#99b6bd;margin-top:-34px}.connection-mark span{width:22px;height:1px;background:#47646c}.connection-mark b{font-weight:400;font-size:24px}.meter{display:flex;align-items:center;justify-content:center;gap:4px;height:29px;margin-top:8px}.meter i{display:block;width:3px;height:4px;border-radius:3px;background:#78999e;transition:height .09s}.meter.active i{background:#b5f4de}.stage-hint{text-align:center;font-size:13px;line-height:1.65;color:#b8cdd2;margin:11px 0 21px;min-height:22px}.call-controls{display:flex;justify-content:center;gap:12px}.control-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 17px;background:#29464f;border:1px solid #486269;color:#edf6f8;border-radius:11px;font-size:13px}.control-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.control-button[aria-pressed=true]{background:#7b5430}.end-button{background:#e88579;color:#2f282a;border-color:#e88579}.transcript{overflow:hidden}.transcript-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 25px 16px;border-bottom:1px solid var(--line)}.transcript-header .small{margin:7px 0 0}.translation-status{font-size:12px;color:#52716d;background:#f0f6f4;padding:8px 10px;border-radius:7px;white-space:nowrap}.messages{height:295px;overflow:auto;padding:22px 25px;scroll-behavior:smooth}.empty-state{text-align:center;padding:28px 10px;color:#4e6e75}.empty-state>span{display:inline-block;font-size:29px;letter-spacing:5px;color:#64867e}.empty-state>span b{color:#b8c6c9;font-weight:400}.empty-state p{font-size:14px;color:var(--muted);line-height:1.7;margin:0}.message{margin-bottom:22px;padding-left:13px;border-left:3px solid #d6b268}.message.mine{border-left-color:#73b5a1}.message-meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:8px}.message-meta b{font-weight:600;color:var(--ink)}.message-translation{font-size:17px;line-height:1.65;margin:0;overflow-wrap:anywhere}.message-original{font-size:13px;line-height:1.7;color:var(--muted);margin:5px 0 0;overflow-wrap:anywhere}.transcript-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 25px;border-top:1px solid var(--line);background:#fbfcfc;font-size:12px;line-height:1.5;color:var(--muted)}.transcript-footer button{font-size:12px;border:0;background:transparent;text-decoration:underline;white-space:nowrap;color:#087962}.page-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:27px;font-size:12px;color:#6d8187}.page-footer a{text-decoration:none}.notice{padding:13px 17px;border-radius:10px;background:#e1f3eb;border:1px solid #b5d9cc;color:#214f40;font-size:14px;line-height:1.7;margin-bottom:20px;overflow-wrap:anywhere}.notice.error{background:#fff0ec;border-color:#edc1b3;color:#833e2b}.notice.demo{background:#fff3cd;border-color:#e7d799;color:#665527}.invite-section{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.invite-section .small{margin-bottom:0}#accessCodeField{margin-top:15px}@media(min-width:1500px){main{padding-top:43px}.messages{height:320px}.call-stage{padding-top:25px;padding-bottom:27px}}@media(max-width:1310px){main{margin:0 32px}.topbar{padding:0 32px}}@media(max-width:960px){.workspace{grid-template-columns:280px minmax(0,1fr);gap:18px}.setup,.listening{padding:20px}.call-stage{padding-left:20px;padding-right:20px}.speakers{gap:15px}.connection-mark span{width:10px}.top-note{display:none}}@media(max-width:720px){main{margin:0;padding:25px 18px}.topbar{height:72px;padding:0 18px}.brand strong{font-size:20px}.brand-mark{width:33px;height:33px;font-size:23px}.language-switch button{padding:8px 9px}.workspace{grid-template-columns:1fr}.sidebar{display:contents}.setup{order:0}.conversation{order:1}.listening{order:2}.storage-note{order:3}.version{display:none}h1{font-size:25px}.page-heading{margin-bottom:22px}.setup .section-heading{margin-bottom:17px}.speakers{gap:22px}.avatar{width:68px;height:68px;border-radius:24px}.speaker{min-width:85px}.call-stage{padding:20px 16px}.connection-mark span{width:9px}.connection-mark{gap:8px}.transcript-header{padding:20px 18px;align-items:flex-start}.transcript-header h2{font-size:16px}.messages{height:330px;padding:20px 18px}.transcript-footer{padding:14px 18px}.page-footer{flex-wrap:wrap;justify-content:space-between}.page-footer>span:nth-child(2){display:none}.language-pair{justify-content:flex-start;gap:25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.message-reading{font-size:13px;line-height:1.7;color:#3f7f70;margin:3px 0 0;overflow-wrap:anywhere;letter-spacing:.01em}
#roomNumber{font-size:18px;letter-spacing:2px}
.volume-row{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.volume-row input[type=range]{width:100%;margin:2px 0 0;accent-color:#0d7f6b}
.volume-row .small{margin:9px 0 0}
.devices{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}.devices select{width:100%;background:#f9fbfb;border:1px solid #d9e3e5;border-radius:9px;padding:10px 12px;font-size:14px;color:var(--ink);margin-bottom:12px}.devices .small{margin:0}

/* Contacts: one row per person you can actually call, with a plain call button. */
.contact-list{display:flex;flex-direction:column;gap:8px;margin:14px 0 16px}
.contact{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.contact-mark{width:38px;height:38px;flex:none;border-radius:13px;display:grid;place-items:center;background:#efd79d;color:#514522;font-weight:600}
.contact-who{flex:1;min-width:0}
.contact-who strong{display:block;font-size:14px;overflow-wrap:anywhere}
.contact-who span{font-size:12px;color:var(--muted)}
.contact-who span.on{color:#0a846b}
.contact button{border:1px solid var(--dark);background:var(--dark);color:#fff;border-radius:9px;padding:9px 13px;font-size:13px;font-weight:600;white-space:nowrap}
.contact button:disabled{background:#8fa3a8;border-color:#8fa3a8}
#myAccount{margin:0 0 4px}
/* Someone is calling: the banner sits above everything until it is answered or declined. */
.incoming{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 17px;margin-bottom:20px;border-radius:12px;background:#12403a;color:#eafaf4;font-size:15px}
.incoming strong{font-size:16px}
.incoming-actions{display:flex;gap:9px}
.incoming .button{width:auto;min-height:40px;padding:9px 18px}
.incoming .secondary{background:transparent;color:#cfeee3;border-color:#3d6a62}

/* Chat bubbles: what was said on top, the translation under it, the reading only when the bubble is tapped. */
.message{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:min(560px,88%);margin:0 0 15px;padding:0;border-left:0}
.message.mine{margin-left:auto;align-items:flex-end}
.message-meta{margin:0;padding:0 5px}
.message-body{background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 5px;padding:11px 14px}
.message.mine .message-body{border-radius:16px 16px 5px 16px}
.message.has-reading .message-body{cursor:pointer}
.message-original{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 5px}
.message-translation{font-size:17px;line-height:1.6;margin:0}
.message-reading{display:none;margin:7px 0 0}
.message.draft .message-body{opacity:.72}
.message.show-reading .message-reading{display:block}

/* In a call the conversation goes dark, like a phone screen, and the chat gets the height. */
body.in-call .page-heading,body.in-call .setup{display:none}
body.in-call .call-stage{padding:16px 22px 18px}
body.in-call .speakers{margin-top:14px;gap:26px}
body.in-call .avatar{width:54px;height:54px;border-radius:18px;font-size:19px;margin-bottom:8px}
body.in-call .speaker{min-width:88px}
body.in-call .connection-mark{margin-top:-24px}
body.in-call .stage-hint{margin:10px 0 0;min-height:0}
body.in-call .transcript{background:#0f2a32;border-color:#1d3f48}
body.in-call .transcript-header{border-bottom-color:#1d3f48}
body.in-call .transcript-header h2{color:#eaf6f7}
body.in-call .transcript-header .small,body.in-call .transcript-footer,body.in-call .message-meta{color:#8ba7ad}
body.in-call .translation-status{background:#173c44;color:#a9cfd2}
body.in-call .transcript-footer{background:#0c242b;border-top-color:#1d3f48}
body.in-call .transcript-footer button{color:#7ee0c2}
body.in-call .messages{height:min(56vh,560px)}
body.in-call .empty-state{color:#a8c6cc}
body.in-call .empty-state p{color:#8ba7ad}
body.in-call .message-body{background:#14333a;border-color:#22474f;color:#eaf6f7}
body.in-call .message.mine .message-body{background:#2c6a61;border-color:#2c6a61;color:#f3fbf8}
body.in-call .message-original{color:#9cbcc2}
body.in-call .message.mine .message-original{color:#c3e6dd}
body.in-call .message-meta b{color:#dcecef}
body.in-call .message-reading{color:#8ad9bd}
#voiceButton[aria-pressed=true]{background:#29464f}
#voiceButton[aria-pressed=false]{background:#16323a;color:#93aeb4}

/* On a phone the call takes the whole screen; on a PC the settings column stays reachable mid-call. */
@media(max-width:720px){
  body.in-call{background:#0b1f25}
  body.in-call .topbar,body.in-call .page-heading,body.in-call .page-footer,body.in-call .setup,body.in-call .listening,body.in-call .storage-note{display:none}
  body.in-call main{margin:0;padding:0;height:100dvh;display:flex;flex-direction:column}
  body.in-call .notice{margin:10px 14px 0}
  body.in-call .workspace{flex:1;min-height:0;display:block}
  body.in-call .conversation{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0}
  body.in-call .call-stage{border-radius:0;padding:12px 16px 10px}
  body.in-call .speakers{margin-top:10px;gap:16px}
  body.in-call .avatar{width:54px;height:54px;border-radius:18px;font-size:19px;margin-bottom:8px}
  body.in-call .meter{height:20px}
  body.in-call .stage-hint{margin:9px 0 0;min-height:0}
  body.in-call .transcript{border-radius:0;border-width:1px 0 0;min-height:0;display:flex;flex-direction:column}
  body.in-call .transcript-header{padding:10px 16px 8px}
  body.in-call .transcript-header h2,body.in-call .transcript-header .small{display:none}
  body.in-call .messages{height:auto;flex:1;min-height:0;padding:14px 14px 10px}
  body.in-call .transcript-footer{padding:8px 16px}
  body.in-call .call-controls{padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:#0f2a32;border-top:1px solid #1d3f48;gap:8px}
  /* Three buttons across a phone: the labels stay on one line instead of breaking mid-word. */
  body.in-call .control-button{flex:1;min-width:0;padding:10px 6px;gap:6px;font-size:12px;white-space:nowrap}
  body.in-call .control-button svg{flex:none;width:16px;height:16px}
}

.select{width:100%;background:#f9fbfb;border:1px solid #d9e3e5;border-radius:9px;padding:12px 13px;font-size:14px;color:var(--ink);margin-bottom:15px}
#signupForm input,#loginForm input{margin-bottom:15px}
.add-friend{display:flex;gap:8px;margin:6px 0 4px}
.add-friend input{flex:1;min-width:0;background:#f9fbfb;border:1px solid #d9e3e5;border-radius:9px;padding:10px 12px;font-size:14px}
.add-friend button,.contact-actions button{border:1px solid var(--dark);background:var(--dark);color:#fff;border-radius:9px;padding:9px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.contact{flex-wrap:wrap}
.contact-menu{position:relative}
.contact-menu>summary{list-style:none;cursor:pointer;padding:6px 9px;border-radius:8px;color:var(--muted);font-weight:700}
.contact-menu>summary::-webkit-details-marker{display:none}
.contact-actions{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:8px}
.contact-actions select{border:1px solid var(--line);border-radius:8px;padding:8px;font-size:13px}
.contact-actions button.plain{background:#fff;color:var(--ink);border-color:var(--line)}
.contact-actions button.warn{background:#fff0ec;color:#833e2b;border-color:#edc1b3}
.danger-zone{margin-top:14px;font-size:13px}.danger-zone summary{cursor:pointer;color:#833e2b}
.danger-zone input{width:100%;margin:6px 0;background:#f9fbfb;border:1px solid #d9e3e5;border-radius:9px;padding:10px 12px}