:root{
  --blue:#007aff;
  --line:#d9d9de;
  --text:#111114;
  --muted:#8e8e93;
  --incoming:#e9e9eb;
  --search:#efeff4;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;background:#fff;color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
button,input{font:inherit}.hidden{display:none!important}
.app{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;background:#fff;overflow:hidden;max-width:none;margin:0;border:0}
.screen{position:absolute;inset:0;width:100%;height:100%;background:#fff;overflow:hidden}
.list-screen{z-index:1;display:flex;flex-direction:column}
.list-header{flex:0 0 auto;background:#fff;padding:calc(var(--safe-top) + 18px) 16px 8px;position:relative;z-index:2}
.list-header h1{font-size:34px;line-height:38px;font-weight:800;letter-spacing:-.7px;margin:0 0 10px;color:#000}
.search-wrap{height:36px;background:var(--search);border-radius:11px;color:var(--muted);display:flex;align-items:center;gap:7px;padding:0 11px;font-size:17px;width:100%}
.search-wrap span{font-size:20px;line-height:1;color:var(--muted);transform:translateY(-1px)}
.search-wrap input{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:#111;min-width:0;flex:1;height:100%;padding:0;font-size:17px}
.search-wrap input::placeholder{color:var(--muted);opacity:1}
.conversation-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;padding-bottom:calc(var(--safe-bottom) + 12px);width:100%}
.conversation{appearance:none;-webkit-appearance:none;border:0;background:#fff;color:#111;width:100%;min-height:76px;display:flex;align-items:center;text-align:left;padding:0 0 0 16px;cursor:pointer;overflow:hidden}
.conversation:active{background:#f2f2f7}
.avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(#b8bec7,#969ca6);color:white;font-weight:700;overflow:hidden;flex:0 0 auto}
.avatar.list{width:52px;height:52px;font-size:28px;margin-right:12px}
.avatar.small{width:32px;height:32px;font-size:19px}.avatar.large{width:96px;height:96px;font-size:54px;margin:0 auto 10px}
.avatar.emoji{background:linear-gradient(#d9dde5,#b3bac5);font-size:27px}.avatar.small.emoji{font-size:23px}.avatar.large.emoji{font-size:54px}
.convo-body{min-width:0;flex:1;height:76px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding:9px 12px 9px 0}
.convo-top{display:flex;align-items:baseline;min-width:0;gap:8px;width:100%}
.convo-name{font-size:18px;font-weight:600;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px;color:#111;min-width:0;flex:1}
.convo-time{font-size:15px;color:var(--muted);white-space:nowrap;line-height:20px;flex:0 0 auto}
.chev{color:#c7c7cc;font-size:29px;line-height:20px;font-weight:300;flex:0 0 auto;transform:translateY(1px)}
.convo-preview{display:block;margin-top:3px;font-size:16px;line-height:20px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%;padding-right:18px}
.empty{padding:22px 16px;color:var(--muted);text-align:center;font-size:16px}
.thread-screen{z-index:10;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease;background:#fff}.app.thread-mode .thread-screen{transform:translateX(0)}.thread-screen[hidden],.contact-screen[hidden]{display:none!important}
.thread-header{height:64px;padding-top:0;background:rgba(248,248,250,.96);border-bottom:1px solid var(--line);display:grid;grid-template-columns:58px 1fr 58px;align-items:center;position:relative;z-index:3;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.back{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--blue);height:58px;display:flex;align-items:center;justify-content:flex-start;padding:0 0 0 9px;font-size:44px;line-height:1;margin-top:-5px}.contact-top{grid-column:2;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#111;gap:1px;min-width:0;padding:0;height:64px}.thread-name{display:block;max-width:240px;min-width:0;text-align:center;font-size:11px;line-height:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#111}.messages{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:#fff;padding:16px 10px calc(var(--safe-bottom) + 70px)}.day-sep{text-align:center;color:var(--muted);font-size:12px;font-weight:600;margin:18px 0 13px;clear:both}.msg-row{display:flex;flex-direction:column;margin:0 0 11px}.msg-row.me{align-items:flex-end}.msg-row.them{align-items:flex-start}.bubble{max-width:min(78%,620px);padding:8px 13px 9px;border-radius:20px;margin:2px 0;line-height:1.3;font-size:17px;letter-spacing:-.15px;white-space:pre-wrap;overflow-wrap:anywhere}.them .bubble{background:var(--incoming);color:#111;border-bottom-left-radius:7px}.me .bubble{background:var(--blue);color:#fff;border-bottom-right-radius:7px}.msg-time{font-size:12px;color:var(--muted);margin:3px 6px 0}.delivered{font-size:12px;color:var(--muted);margin:2px 6px 0}.composer{position:absolute;left:0;right:0;bottom:0;height:calc(var(--safe-bottom) + 52px);padding:7px 10px calc(var(--safe-bottom) + 7px);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;background:#fff}.composer button{appearance:none;-webkit-appearance:none;border:0;background:#e5e5ea;color:#777;width:32px;height:32px;border-radius:50%;font-size:27px;line-height:0}.composer div{flex:1;border:1px solid #d1d1d6;border-radius:18px;height:34px;color:#b0b0b6;padding:7px 12px;font-size:17px}.composer .voice-icon{position:relative;width:28px;height:28px;flex:0 0 28px;display:block}
.composer .voice-icon::before{content:"";position:absolute;left:9px;top:4px;width:10px;height:15px;border:2px solid #8e8e93;border-radius:8px;background:transparent}
.composer .voice-icon::after{content:"";position:absolute;left:6px;top:13px;width:16px;height:10px;border:2px solid #8e8e93;border-top:0;border-radius:0 0 9px 9px;box-shadow:0 8px 0 -6px #8e8e93}
.contact-screen{z-index:20;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease;background:#fff}.app.contact-mode .contact-screen{transform:translateX(0)}.contact-nav{height:48px;padding-top:0;border-bottom:1px solid var(--line);background:#f9f9fb;display:grid;grid-template-columns:58px 1fr 58px;align-items:center;position:relative;z-index:3}.contact-nav>span{text-align:center;font-weight:600}.contact-card{text-align:center;padding:28px 18px 18px;overflow:auto}.contact-card h2{margin:0;font-size:28px;letter-spacing:-.3px}.contact-card p{margin:4px 0 16px;color:#777}.contact-actions{display:flex;justify-content:center;gap:12px;margin-bottom:18px}.action{width:76px;height:58px;border-radius:14px;background:#f2f2f7;color:var(--blue);text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.action span{font-size:22px}.action b{font-size:12px;font-weight:500}.phone-row{margin:8px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;padding:11px 0;display:flex;justify-content:space-between;gap:18px}.phone-row span{color:var(--muted)}.phone-row a{color:var(--blue);text-decoration:none;white-space:nowrap}
@media (min-width:700px){.list-header{padding-left:24px;padding-right:24px}.conversation{padding-left:24px}.convo-body{padding-right:18px}}

/* v10 navigation hardening: hidden/off-screen overlays must never block the list. */
.thread-screen[hidden], .contact-screen[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.thread-screen:not([hidden]), .contact-screen:not([hidden]) {
  pointer-events: auto;
}
.conversation, .conversation * { cursor: pointer; }