:root{color-scheme:light;--ink:#17352d;--muted:#465d55;--paper:#faf8f2;--line:#d5ded6;--sage:#eaf2e9;--gold:#f5d184;--white:#fffefa}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.35 system-ui,Arial,sans-serif}header{background:#17372e;color:#f9f8ed;padding:12px 16px;display:flex;align-items:center;gap:14px}header>div+div{font-size:13px;color:#e2eee4}.brand{font-weight:800;font-size:25px;letter-spacing:-1.3px;line-height:1}.brand span{color:var(--gold)}h1{font-size:22px;margin:3px 0 12px}h2{font-size:17px;margin:9px 0}p{margin:8px 0;overflow-wrap:anywhere}small,.muted{color:var(--muted);font-size:13px}button,input,textarea{font:inherit;color:inherit}button,.button,input,textarea{border:1px solid #879f91;border-radius:8px;background:var(--white);padding:8px}button{cursor:pointer;text-align:left;font-weight:650}button.primary{background:#245244;color:white;border-color:#245244}button:disabled{opacity:.55;cursor:default}button:focus,input:focus,textarea:focus,a:focus,audio:focus,video:focus{outline:2px solid #966000;outline-offset:1px}label{display:block;font-weight:650;margin:8px 0}input:not([type=checkbox]),textarea{display:block;width:100%;margin-top:4px}textarea{resize:vertical;min-height:65px}input[type=checkbox]{vertical-align:middle;margin:0 6px 0 0}.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.stack{display:grid;gap:6px}.chat-button{display:block;width:100%;padding:10px}.chat-button span{display:block;font-weight:400;font-size:12px}.bubble{border:1px solid var(--line);background:var(--white);border-radius:9px;margin:7px 0;padding:8px}.mine{background:var(--sage)}.bubble p{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0}.bubble img,.bubble video,.bubble audio{max-width:100%;display:block;margin:6px 0}.bubble img,.bubble video{max-height:55vh}.bubble .details{font-size:12px;color:var(--muted)}.bubble button{padding:4px 6px;font-size:13px}.notice{background:var(--sage);border-radius:8px;padding:8px}.error{background:#f8e4df;color:#6b2f20;padding:8px;border-radius:8px}.hidden{display:none}.phone{height:100vh;display:flex;flex-direction:column}.phone header{padding:8px 10px;min-height:38px;flex:none}.phone header>div+div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone main{padding:7px 10px 12px;flex:1 1 auto;overflow:auto;min-height:0}.phone footer{flex:none;background:#17372e;color:#e2eee4;display:flex;justify-content:space-between;padding:4px 10px;font-size:11px}.phone h1{font-size:20px;margin:2px 0 8px}.phone button{min-height:34px}.phone .bubble button{min-height:29px}.phone .row{gap:5px}.owner main,.owner nav{max-width:960px;margin:auto;padding:12px 16px}.owner nav{display:flex;gap:8px;flex-wrap:wrap}.owner .bubble{padding:12px}.owner form{max-width:480px}.owner .listitem{padding:9px;border-bottom:1px solid var(--line)}.code{font:700 23px monospace;letter-spacing:1px;overflow-wrap:anywhere}
.terms{max-height:48vh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--white);margin:7px 0;padding:8px}.terms:focus{outline:2px solid #966000;outline-offset:1px}.terms h3{font-size:15px;margin:12px 0 4px}.terms p{font-size:14px}
.terms-agreement{display:flex;align-items:flex-start;gap:8px;width:100%;margin:8px 0}
.terms-agreement::before{content:"";display:grid;place-items:center;flex:none;width:18px;height:18px;margin-top:1px;border:1px solid #879f91;border-radius:3px}
.terms-agreement[aria-checked="true"]{background:var(--sage)}
.terms-agreement[aria-checked="true"]::before{content:"✓";background:#245244;color:white;border-color:#245244;line-height:1}

/* Fampic 2.2: one consistent layout for a 240px keypad screen. */
.phone [hidden]{display:none!important}
.phone{font-family:Arial,sans-serif;font-size:15px;line-height:1.3;background:#f7f6f0;height:100vh;height:100dvh}
.phone header{min-height:34px;padding:6px 9px;gap:8px;border-bottom:2px solid #d9bd7f}
.phone .brand{font-size:21px;letter-spacing:-1px}
.phone header #sub{font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.phone.in-chat .brand{font-size:15px}
.phone.in-chat header #sub{font-size:15px;font-weight:bold;color:white}
.phone main{padding:7px 8px;overscroll-behavior:contain;scroll-padding:5px}
.phone h1{font-size:19px;line-height:1.15;margin:1px 0 7px}
.phone h2{font-size:16px}
.phone p{margin:6px 0}
.phone button,.phone input,.phone textarea{border-radius:6px;min-height:34px;font-size:14px;border-color:#bdcbbf;padding:7px 8px}
.phone button{line-height:1.2}
.phone button:focus,.phone input:focus,.phone textarea:focus,.phone audio:focus,.phone video:focus,.phone [tabindex]:focus{outline:2px solid #966000;outline-offset:0;box-shadow:inset 0 0 0 1px #fff4d9;background-color:#fff0ce;color:#17352d}
.phone button.primary{background:#245244;color:#fffefa;border-color:#245244}
.phone button.primary:focus{background:#153d30;color:white;outline:2px solid #d6a44e}
.phone .stack{gap:5px}
.phone .stack>button{width:100%;text-align:left}
.phone .stack>button:after{content:'›';float:right;color:#7e917e}
.phone .dock{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px 8px;background:#f7f6f0;border-top:1px solid #d5ded6;position:relative}
.phone .dock>button:only-child{grid-column:1/-1}
.phone .dock button{min-width:0;min-height:32px;padding:6px;text-align:center;white-space:normal}
.phone footer{flex:none;min-height:18px;padding:3px 8px;font-size:10px;gap:4px}
.phone .quiet{background:#eef1e9}
.phone form>button.primary{width:100%;display:block;margin-top:6px}
.phone textarea{min-height:82px;max-height:140px}
.phone input,.phone textarea{background:white;font-size:16px}
.phone label{font-size:13px;margin:6px 0}
.phone .chat-button{display:block;width:100%;padding:8px;border:1px solid #d5ded6;background:#fffefa;min-height:53px}
.phone .chat-heading{display:flex;justify-content:space-between;align-items:baseline;gap:5px}
.phone .chat-heading b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:inherit;unicode-bidi:plaintext}
.phone .chat-time{font-size:10px;font-weight:normal;white-space:nowrap;color:#465d55}
.phone .chat-button .chat-preview{font-size:12px;font-weight:normal;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;unicode-bidi:plaintext}
.phone .chat-button .unread{font-weight:bold;color:#245244}
.phone .welcome{border-left:3px solid #c49d51;padding:2px 7px;margin:0 0 7px}
.phone .welcome strong{font-size:14px;display:block}
.phone .welcome small{font-size:11px;display:block;margin-top:3px;line-height:1.25}
.phone .thread{display:flex;flex-direction:column;padding:2px;gap:3px}
.phone .thread .older{align-self:center;font-size:12px;min-height:28px;padding:5px 9px}
.phone .message{align-self:flex-start;max-width:94%;min-width:46%;margin:0;padding:6px 7px;font-weight:normal;text-align:start;background:#fffefa;border:1px solid #d5ded6;box-shadow:0 1px 1px #17352d0d}
.phone .message.mine{align-self:flex-end;background:#e8f0e3;border-color:#c1d2bb}
.phone .message .details{font-size:10px;display:block;margin-bottom:3px}
.phone .message-text,.phone .detail-text{display:block;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext}
.phone .message img{display:block;width:148px;max-width:100%;height:88px;object-fit:contain;background:#f1f0e9;border-radius:4px;margin:3px 0}
.phone .media-label{font-weight:bold;font-size:13px;display:block}
.phone .reaction-summary{display:block;font-size:12px;margin-top:3px;color:#465d55}
.phone .day-divider{align-self:center;font-size:10px;color:#465d55;background:#eaece3;padding:3px 8px;border-radius:10px;margin:5px 0}
.phone .new-messages{position:sticky;bottom:3px;display:block;margin:5px auto;background:#245244;color:white;z-index:1;font-size:12px}
.phone .detail-text{max-height:calc(100vh - 125px);overflow:auto;margin:3px 0;padding:5px}
.phone .terms{max-height:42vh;font-size:12px}
.phone .terms p,.phone .terms h3{font-size:12px}
.phone .terms-link{font-size:12px;min-height:28px;padding:5px;text-decoration:underline}
.phone .terms-agreement{font-size:14px;margin:6px 0}
.phone .device-ref{font:bold 18px/1.2 monospace;letter-spacing:1px}
.phone .device-help{font-size:12px}
.phone .emoji-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:3px}
.phone .emoji-grid button{text-align:center;font-size:20px;min-height:37px}
.phone .emoji-grid button[aria-pressed=true]{background:#dce8d3;border-color:#245244}
.phone .attachment-preview{display:block;max-width:100%;max-height:100px;object-fit:contain;margin:4px auto}
.phone audio,.phone video{display:block;width:100%;max-width:100%;max-height:130px}
.phone .player-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.phone .player-buttons button{text-align:center}
.phone .player-buttons .play-toggle{grid-column:1/-1;background:#245244;color:white}
.phone .send-status{position:absolute;bottom:100%;right:8px;margin:0;padding:4px 8px;background:#245244;color:white;border-radius:5px;font-size:11px}
.phone .hint{font-size:11px;color:#465d55;line-height:1.3}
.phone .photo-stage{width:100%;height:calc(100vh - 111px);height:calc(100dvh - 111px);position:relative;overflow:hidden;background:#14251f;border-radius:5px;touch-action:none}
.phone .photo-stage img{position:absolute;max-width:none;max-height:none;margin:0;transform-origin:0 0}
.phone .photo-stage:focus{outline:2px solid #d6a44e;background:#14251f}
.phone .photo-caption{font-size:10px;margin:3px 0;color:#465d55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone.photo-open main{padding:4px 6px;display:flex;flex-direction:column;overflow:hidden}
.phone.photo-open .photo-stage{height:auto;flex:1;min-height:0}
.phone.photo-open .photo-caption{flex:none}
.phone.photo-open header .brand{font-size:15px}
.phone.photo-open h1{display:none}
.phone .gallery{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.phone .gallery button{padding:4px;min-width:0;font-size:11px}
.phone .gallery img{width:100%;height:70px;object-fit:contain;background:#eceee5;display:block;margin-bottom:3px}
.phone .connection{background:#fff0ce;color:#603c00;font-size:11px;padding:3px 8px;flex:none}
.phone.large-text{font-size:18px}
.phone.large-text .message-text,.phone.large-text .detail-text,.phone.large-text .chat-heading b{font-size:18px}
.phone.large-text button,.phone.large-text label{font-size:16px}
.phone .notice,.phone .error{font-size:13px}
@media(min-width:500px){.phone main>*{max-width:650px}.phone .photo-stage{max-width:none}.phone .thread{max-width:650px;margin:auto}.phone .dock{grid-template-columns:1fr 1fr}}

.phone .home-tools{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 5px}.phone .home-tools button{font-size:12px;min-height:28px;padding:5px;text-align:center}.phone .recovery-code{font:bold 18px/1.5 monospace;direction:ltr;white-space:normal;padding:7px;background:#fff0ce;border:1px solid #c49d51;border-radius:5px;user-select:all}.phone .small-action{font-size:11px;min-height:24px;padding:4px;margin:3px 0}.download main{max-width:600px;padding:20px;margin:auto}.download h1{font-size:26px}.download .code{direction:ltr}.download .button{display:block;text-align:center;margin:12px 0;text-decoration:none;background:#245244;color:white}.download .button[hidden]{display:none}.download li{margin:8px 0}.phone input[readonly]{font-size:12px;overflow:hidden}
/* Group-Me: a compact, bilingual keypad interface. */
.brand-lockup{flex:none;line-height:1.05;min-width:0}.brand-lockup .brand{letter-spacing:-.8px}.brand-lockup small{display:block;font:10px/1.15 Arial,sans-serif;color:#dce7dd;margin-top:2px;white-space:nowrap}.phone header{padding:6px 9px;min-height:41px;gap:8px}.phone .brand-lockup .brand{font-size:22px}.phone.in-chat .brand-lockup .brand,.phone.photo-open .brand-lockup .brand{font-size:17px}.phone .brand-lockup small{font-size:9px}.phone #sub:empty{display:none}.phone #sub{flex:1;min-width:0}.phone .welcome-choices button{min-height:43px}.phone .big-code{font-size:32px;letter-spacing:2px;text-align:center;padding:10px 3px;margin:5px 0;background:#edf2e8;border:1px solid #c4d1bf;border-radius:8px}.phone .recovery-box{margin:5px 0}.phone .dock:has(>button:nth-child(3)){grid-template-columns:1fr 1fr 1fr}.phone .dock.three-actions{grid-template-columns:1fr 1fr 1fr}.phone .dock.three-actions button{font-size:12px;min-height:36px}.phone .device-ref,.phone .recovery-code,.phone .code{direction:ltr;unicode-bidi:isolate}.phone input[inputmode=numeric],.phone input[type=password],.phone input[readonly]{direction:ltr;unicode-bidi:isolate}.phone .photo-stage{direction:ltr}.phone .photo-caption{unicode-bidi:plaintext}.owner .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.owner .stat-card{background:#edf2e8;border:1px solid #d5ded6;border-radius:8px;padding:12px}.owner .stat-card b{font-size:26px;display:block}.owner .media-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;max-width:none}.owner .media-filters label{margin:0}.owner .media-filters select{width:100%;padding:8px;min-height:38px;border:1px solid #879f91;border-radius:6px;font:inherit}.owner .media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:12px 0}.owner .media-card{background:white;border:1px solid #d5ded6;border-radius:8px;padding:10px}.owner .media-card img{display:block;width:100%;height:120px;object-fit:contain}.owner .media-card audio,.owner .media-card video{display:block;width:100%;max-height:160px}.owner .toolbar{position:sticky;top:0;z-index:2;padding:8px;background:#faf8f2;border:1px solid #d5ded6;display:flex;gap:6px;flex-wrap:wrap}.owner .user-code{direction:ltr;unicode-bidi:isolate;font-family:monospace}

/* Compact member screens for the 240px keypad display. */
.phone { background:#f5f7f3; --paper:#f5f7f3; --white:#fff; --ink:#18372f; --line:#c9d7ce; --sage:#e8f0ea; --muted:#52685d; }
.phone header { min-height:38px; padding:5px 9px 6px; border-bottom:1px solid #c6a05e; }
.phone .brand-lockup .brand { font-size:20px; }
.phone #sub { flex:none; font-size:15px; font-weight:750; padding:5px 9px; background:#e7efe9; color:var(--ink); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.phone #sub:empty { display:none; }
.phone main { padding:7px 8px 10px; }
.phone button { min-height:34px; border-radius:6px; }
.phone .dock { gap:5px; display:flex; }
.phone .dock[hidden] { display:none; }
.phone .dock > button { flex:1 1 0; min-width:0; min-height:34px; text-align:center; }
.phone .dock .send-status { position:absolute; bottom:100%; right:6px; }
.phone .home-tools,.phone .equal-actions { display:flex; gap:5px; margin-bottom:6px; }
.phone .home-tools button,.phone .equal-actions button { flex:1 1 0; text-align:center; }
.phone .chat-button { background:var(--white); border-color:var(--line); padding:7px 8px; }
.phone .chat-heading { display:flex; align-items:center; gap:5px; }
.phone .chat-heading b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone .chat-heading .unread-label { order:-1; font-weight:700; font-size:10px; background:#dbeae1; border-radius:8px; padding:1px 5px; }
.phone .chat-preview { margin-top:2px; color:var(--muted); }
.phone .unread-chat .chat-preview { color:var(--ink); font-weight:650; }
.phone .signup-form > button { width:100%; margin-top:5px; }
.phone .signup-form > label { margin:5px 0; }
.phone .signup-form .small-action { min-height:28px; padding:3px 8px; width:auto; margin:0 0 5px; }
.phone .reply-quote { display:block; border-left:3px solid #6c9785; background:#e6efe8; border-radius:4px; margin:4px 0; padding:3px 6px; font-size:12px; overflow-wrap:anywhere; }
.phone .reply-quote b,.phone .reply-quote span { display:block; }
.phone .media-duration { display:inline-block; margin-left:4px; }
.phone .tutorial-copy { font-size:13px; }
.phone .exit-overlay { position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; background:rgba(14,30,25,.65); }
.phone .exit-dialog { width:calc(100% - 24px); max-width:300px; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:11px; }
.phone .exit-dialog h2 { margin:0 0 10px; }
.phone video:not([src]) { display:none; }

.phone .masked-pin { -webkit-text-security:disc; }

.phone .dock,.phone .home-tools button.quiet { background:var(--paper); }
.phone .home-tools button { min-height:34px; }
.phone .home-tools button:focus { background:#fff0ce; }

/* Use margins for groups on WebViews that lack flex-gap support. */
.phone .stack,.phone .dock,.phone .home-tools,.phone .equal-actions,.phone .thread { gap:0; }
.phone .stack > * + *, .phone .thread > * + * { margin-top:5px; }
.phone main > .stack + .stack, .phone main > .stack + button, .phone main > button + button,
.phone .sign-in-options, .phone .welcome-choices + .terms-link { margin-top:6px; }
.phone .dock > button + button,.phone .home-tools > button + button,.phone .equal-actions > button + button { margin-left:5px; }
.phone .welcome-choices button { min-height:39px; }
.phone button,.phone button.quiet { background:#f8faf7; border-color:#bacac1; color:#234138; }
.phone button.primary { background:#31584c; border-color:#31584c; color:#fff; }
.phone button:focus,.phone button.quiet:focus,.phone .home-tools button:focus,
.phone button.primary:focus,.phone .player-buttons .play-toggle:focus {
  background:#e0ede6; color:#173b30; border-color:#547c6d; outline:0;
  box-shadow:inset 0 0 0 1px #547c6d;
}
.phone .guide-count { font-size:10px; color:#52685d; margin:0 0 4px; }
.phone .guide-preview { border:1px solid #b8c9bf; border-radius:7px; overflow:hidden; background:#f5f7f3; }
.phone .guide-brand { display:flex; justify-content:space-between; align-items:center; padding:3px 7px; background:#17372e; color:#fff; font-weight:bold; font-size:12px; }
.phone .guide-brand small { color:#dce7dd; font-weight:normal; font-size:9px; }
.phone .guide-screen { padding:4px 6px 5px; font-size:11px; }
.phone .guide-screen > strong { display:block; margin-bottom:3px; }
.phone .guide-field { margin-bottom:3px; font-size:10px; }
.phone .guide-input,.phone .guide-control,.phone .guide-bubble { border:1px solid #c3d0c6; border-radius:4px; padding:2px 5px; background:#fff; }
.phone .guide-control { font-size:10px; font-weight:650; }
.phone .guide-control + .guide-control { margin-top:3px; }
.phone .guide-highlight { border-color:#547c6d; background:#e0ede6; box-shadow:inset 0 0 0 1px #547c6d; }
.phone .guide-screen .big-code { margin:4px 0; padding:3px; font-size:19px; }
.phone .guide-bubble { width:max-content; max-width:85%; margin-bottom:3px; }
.phone .guide-mine { margin-left:auto; background:#e8f0e3; }
.phone .guide-dock { display:flex; margin-top:4px; }
.phone .guide-dock .guide-control { flex:1 1 0; min-width:0; padding:3px 1px; text-align:center; }
.phone .guide-dock .guide-control + .guide-control { margin:0 0 0 3px; }
.phone .tutorial-copy { font-size:12px; line-height:1.3; margin:5px 0 0; }

.phone .emoji-grid { grid-gap:6px; }
.phone .gallery,.phone .player-buttons { grid-gap:5px; }
.phone form > .small-action + .small-action { margin-left:5px; }