:root{--stormy-teal:#006d77ff;--pearl-aqua:#83c5beff;--alice-blue:#edf6f9ff;--almond-silk:#ffddd2ff;--tangerine-dream:#e29578ff;--ink:#17172a;--muted:#6e7f82;--line:#cfe7e7;--lav:var(--stormy-teal);--lav2:var(--pearl-aqua);--soft:var(--alice-blue);--bubble:#fff;--danger:#b9503f}
html,body{background:#edf6f9}
.app-shell{background:#ffffff}
.page-surface{min-height:100dvh;background:#fff}
.desktop-nav{display:none}
.avatar{border-radius:50%;background:#83c5be;color:#006d77}
.avatar.gradient{background:linear-gradient(145deg,#ffddd2,#e29578)}
.topbar{height:108px;padding:calc(21px + env(safe-area-inset-top)) 22px 17px;align-items:flex-end;border:0;background:#fff}
.topbar h1{font-size:30px;letter-spacing:-1.2px}
.eyebrow{color:#9a98a8;font-size:9px;letter-spacing:1.4px}
.new-chat{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-size:12px}
.new-chat span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#83c5be,#006d77);color:white;font-size:22px;box-shadow:0 8px 20px #006d7738}
.section{padding:8px 22px 20px}.section-title{margin:12px 0 8px}.section-title h2{font-size:12px;color:#777586}
.invite,.person,.chat-row{padding:13px 5px;gap:13px}.chat-row{border:0;border-radius:15px}.chat-row:hover{background:#f6fbfc}.chat-row .avatar{width:45px;height:45px}.grow strong{font-size:13px}.grow small{font-size:11px}.chat-row time{font-size:9px}.chevron{display:none}
.bottom-nav{height:68px;border:0;box-shadow:0 -8px 26px #2420380a}.bottom-nav a.active{color:#262439}.bottom-nav a span{font-size:18px}
.icon-button,.mini{background:#006d77}.mini{border-radius:20px}.mini.secondary{background:#ffddd2}
.searchbox{background:#edf6f9;border-radius:13px}.person{border-bottom:1px solid var(--line)}
.conversation{background:#edf6f9}.chat-header{height:82px;border:0;background:#fff;padding-left:17px;padding-right:17px}.chat-header .small-avatar{border-radius:50%}.chat-header .icon-button{font-size:16px;letter-spacing:2px}.header-actions{display:flex;align-items:center;gap:12px}.desktop-security{display:none;font-size:10px;color:#9c99a8}.encryption-banner{background:#edf6f9;color:#aaa7b4;padding:10px}.message-list{padding:22px 17px 14px;gap:10px}.bubble-row{max-width:78%}.bubble{background:white;border-radius:17px 17px 17px 5px;padding:12px 15px;box-shadow:0 3px 12px #28233e08}.mine .bubble{background:linear-gradient(135deg,#e29578,#006d77);border-radius:17px 17px 5px 17px;box-shadow:none}.composer-wrap{background:#fff;border:0;padding:8px 13px calc(10px + env(safe-area-inset-bottom))}.composer{gap:8px}.composer input{background:#edf6f9;border:0;border-radius:22px;padding:0 17px}.attach,.emoji{border-radius:50%;background:#edf6f9;color:#9c98a8}.attach{background:#e29578;color:white}.send{border-radius:50%;background:#fff;color:#006d77;border:1px solid #eee!important}.emoji-panel{border:0;border-radius:18px}.locked{background:#edf6f9}.lock-orb{border-radius:50%;background:#ffddd2;color:#e29578}.primary,.google-button{background:#18172a;border-radius:14px}.settings-card{border-radius:20px}.login-screen,.simple-screen{background:radial-gradient(circle at 72% 9%,#edf6f9 0,transparent 31%),#fff}.brand-mark{border-radius:50%;background:linear-gradient(145deg,#83c5be,#006d77)}
@media(max-width:599px){.new-chat b{display:none}.new-chat span{width:40px;height:40px}.section.chats{padding-bottom:82px}.topbar.compact{height:72px}.page-surface{width:100%}}
@media(min-width:720px){
  body{padding:24px}.app-shell{width:min(1180px,100%);height:calc(100dvh - 48px);min-height:640px;border-radius:24px;box-shadow:0 22px 70px #2924401c;overflow:hidden;padding-left:224px;position:relative}.page-surface{height:100%;min-height:0;overflow:auto}.desktop-nav{display:flex;position:absolute;inset:0 auto 0 0;width:224px;padding:30px 22px 24px;flex-direction:column;background:#edf6f9;border-right:1px solid #eceaf2}.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:18px;font-weight:700}.wordmark span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#83c5be,#006d77);color:white;font-size:21px}.desktop-profile{display:flex;align-items:center;gap:10px;margin:38px 0 30px}.desktop-profile .avatar{width:38px;height:38px}.desktop-profile div:last-child{display:flex;flex-direction:column;gap:2px}.desktop-profile small{font-size:9px;color:#aaa7b4}.desktop-profile strong{font-size:12px}.desktop-nav nav{display:grid;gap:6px}.desktop-nav nav a{display:flex;gap:11px;align-items:center;padding:11px 12px;border-radius:11px;color:#777486;text-decoration:none;font-size:12px}.desktop-nav nav a:first-child{background:white;color:var(--ink);box-shadow:0 5px 18px #27223a0a}.desktop-nav nav i{font-style:normal;font-size:16px}.desktop-logout{margin-top:auto;padding:11px 12px;color:#9b98a7;text-decoration:none;font-size:11px}.topbar{height:126px;padding:34px 44px 20px}.topbar h1{font-size:34px}.new-chat span{width:34px;height:34px;font-size:18px}.section{padding-left:44px;padding-right:44px;max-width:790px}.bottom-nav{display:none}.chat-row{padding:14px 12px}.chat-row:hover{transform:translateX(2px)}.chat-row .avatar{width:48px;height:48px}.conversation{height:100%;min-height:0}.chat-header{height:82px;padding:18px 30px}.chat-header .back{display:none}.chat-header .small-avatar{width:42px;height:42px}.desktop-security{display:inline}.message-list{padding:30px clamp(34px,6vw,80px)}.bubble-row{max-width:62%}.composer-wrap{padding:13px clamp(28px,5vw,66px) 18px}.composer{max-width:820px;margin:auto}.encryption-banner{display:none}.locked{height:100%}.topbar.compact{height:90px;align-items:center;padding:24px 44px}.topbar.compact .back{display:none}.searchbox{max-width:620px}.login-screen,.simple-screen{min-height:100%;padding:70px clamp(60px,12vw,140px)}
}
@media(min-width:1100px){.app-shell{padding-left:250px}.desktop-nav{width:250px;padding-left:28px;padding-right:28px}.section{max-width:900px}}
@media(min-width:720px){
  .app-shell:not(.has-desktop-nav){padding-left:0;max-width:920px}
  .app-shell:not(.has-desktop-nav) .page-surface{width:100%}
  .app-shell:not(.has-desktop-nav) .login-screen{width:100%;padding:70px clamp(72px,14vw,170px);display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,420px);grid-template-rows:auto 1fr auto;column-gap:72px;align-items:center}
  .app-shell:not(.has-desktop-nav) .login-screen .brand-mark{grid-column:1;align-self:end}
  .app-shell:not(.has-desktop-nav) .login-screen>div:nth-of-type(2){grid-column:1;align-self:start;margin-top:26px}
  .app-shell:not(.has-desktop-nav) .login-screen .google-button{grid-column:2;grid-row:1;align-self:end;width:100%;margin-bottom:18px}
  .app-shell:not(.has-desktop-nav) .login-screen .privacy-note{grid-column:2;grid-row:2;align-self:start}
  .app-shell:not(.has-desktop-nav) .login-screen footer{grid-column:2;grid-row:3;text-align:left}
  .app-shell:not(.has-desktop-nav) .login-screen h1{font-size:48px;max-width:420px}
  .app-shell:not(.has-desktop-nav) .login-screen p{max-width:390px}
}
@media(min-width:1100px){.app-shell:not(.has-desktop-nav){padding-left:0}}
@media(min-width:720px) and (max-width:860px){
  .app-shell:not(.has-desktop-nav) .login-screen{grid-template-columns:1fr;padding:64px 80px;display:flex}
  .app-shell:not(.has-desktop-nav) .login-screen .google-button{margin:0}
}