:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Malgun Gothic",sans-serif;background:#16171a;color:#fff}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center}.device{width:min(393px,100vw);height:min(852px,100dvh);padding:9px;border:3px solid #3b3d42;border-radius:56px;background:#090909;box-shadow:0 24px 70px #0009}.screen{height:100%;position:relative;overflow:hidden;background:#000;border-radius:45px}.island{position:absolute;z-index:10;top:10px;left:50%;transform:translateX(-50%);width:120px;height:33px;border-radius:22px;background:#000}.status{height:59px;padding:17px 28px 0 30px;display:flex;justify-content:space-between;align-items:flex-start;font-size:15px;font-weight:650;position:relative;z-index:5}.status-icons{padding-top:2px}.view{position:absolute;top:59px;bottom:23px;width:100%;display:flex;flex-direction:column}.hidden{display:none!important}.toolbar{display:flex;justify-content:space-between;align-items:center;color:#0a84ff;font-size:17px;height:39px}.text-button{border:0;background:none;color:#0a84ff;font-size:16px;padding:0}.toolbar-actions{font-size:23px}.list-header{padding:0 18px}.list-header h1{font-size:34px;letter-spacing:-1px;margin:7px 0 15px;font-weight:750}.search-bar{height:37px;border-radius:11px;background:#1c1c1e;color:#85858b;padding:8px 12px;font-size:17px}.search-bar span{margin-left:7px}.filter-row{display:flex;gap:9px;padding:15px 18px 11px;font-size:14px;color:#a6a6ab}.filter-row span{padding:7px 13px}.filter-row .selected-filter{background:#313135;border-radius:18px;color:#fff}.conversation-list{overflow-y:auto;flex:1}.conversation-item{border:0;border-top:1px solid #252528;background:none;color:#fff;width:100%;display:flex;align-items:center;text-align:left;gap:12px;padding:13px 18px;cursor:pointer}.conversation-item .avatar{flex:none}.avatar{width:46px;height:46px;border-radius:50%;background:#65656b;display:grid;place-items:center;font-size:19px;font-weight:600;color:white}.conversation-text{min-width:0;flex:1}.conversation-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.conversation-top strong{font-size:17px}.conversation-top time{font-size:13px;color:#8e8e93;white-space:nowrap}.preview{font-size:14px;color:#a0a0a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.bottom-tabs{height:53px;background:#171719;border-top:1px solid #333;display:flex;justify-content:space-evenly;align-items:center;color:#8e8e93}.bottom-tabs span{display:flex;flex-direction:column;align-items:center;font-size:21px}.bottom-tabs small{font-size:10px}.bottom-tabs .tab-selected{color:#0a84ff}.chat-header{height:85px;background:rgba(28,28,30,.96);border-bottom:1px solid #303034;display:flex;align-items:flex-start;justify-content:space-between;padding:6px 15px;position:relative;z-index:2}.back-button{background:none;border:0;color:#0a84ff;font-size:35px;line-height:45px;display:flex;align-items:center;gap:1px;padding:0;cursor:pointer}.back-button span{font-size:17px}.contact{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:12px;white-space:nowrap;gap:3px}.contact .avatar{height:43px;width:43px;font-size:17px}.chevron{font-size:10px;color:#999;position:absolute;bottom:0;right:-13px}.header-spacer{width:55px}.messages{flex:1;overflow-y:auto;padding:14px 12px 20px;scrollbar-width:thin;scrollbar-color:#333 transparent}.date-label{text-align:center;color:#8e8e93;font-size:12px;font-weight:600;margin:21px 0 15px}.date-label:first-child{margin-top:8px}.message-row{display:flex;margin:2px 0}.message-row.me{justify-content:flex-end}.message-row.them{justify-content:flex-start}.bubble{max-width:78%;padding:9px 13px;font-size:16px;line-height:1.34;overflow-wrap:anywhere;border-radius:18px}.me .bubble{background:#0b84ff;color:#fff;border-bottom-right-radius:6px}.them .bubble{background:#303033;color:#fff;border-bottom-left-radius:6px}.message-row.group-start{margin-top:11px}.message-row.me + .message-row.them,.message-row.them + .message-row.me{margin-top:10px}.composer{height:63px;display:flex;align-items:center;gap:10px;padding:0 13px;background:#000}.plus{font-size:29px;color:#8e8e93}.compose-field{height:37px;border:1px solid #505055;border-radius:22px;flex:1;color:#85858b;padding:9px 12px;font-size:14px;display:flex;justify-content:space-between}.mic{font-size:18px}.home-indicator{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:135px;height:5px;border-radius:10px;background:#fff;z-index:5}@media(max-width:430px){.device{height:100dvh;width:100vw;border:0;border-radius:0;padding:0;box-shadow:none}.screen{border-radius:0}.island{top:9px}}

/* iOS 18-inspired refinement: compact typography, genuine vector controls */
:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}
.status{font-size:14px;padding-top:17px}
.toolbar{height:38px;font-size:15px}
.toolbar-actions{display:flex;align-items:center;gap:19px;color:#0a84ff}
.toolbar-actions span{display:flex;align-items:center;justify-content:center}
.text-button{font-size:15px}
.list-header h1{font-size:32px;margin:7px 0 14px;letter-spacing:-.8px}
.search-bar{height:35px;font-size:15px;padding:8px 12px}
.filter-row{font-size:13px;padding-top:12px;padding-bottom:9px}
.conversation-item{padding-top:11px;padding-bottom:11px}
.conversation-top strong{font-size:15px;font-weight:650}
.conversation-top time{font-size:12px}
.preview{font-size:13px}
.avatar{width:43px;height:43px;font-size:17px}
.chat-header{height:79px;padding:4px 15px 5px;background:rgba(27,27,29,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.back-button{font-size:16px;line-height:28px;gap:0;align-items:center;height:35px}
.back-button span{font-size:15px;margin-left:-2px}
.contact{font-size:11px;gap:2px;top:4px}
.contact .avatar{height:39px;width:39px;font-size:15px}
.chevron{font-size:16px;bottom:-3px;right:-13px}
.bubble{font-size:14px;line-height:1.38;padding:8px 12px;border-radius:17px;max-width:79%;letter-spacing:-.13px}
.date-label{font-size:11px;margin:19px 0 13px}
.message-row{margin:2px 0}
.message-row.group-start{margin-top:9px}
.message-row.me + .message-row.them,.message-row.them + .message-row.me{margin-top:9px}
.composer{height:57px;gap:11px;padding:0 13px;background:#000}
.plus{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#303034;color:#bcbcc1;flex:none}
.plus svg{width:19px;height:19px}
.compose-field{height:35px;border-color:#48484d;font-size:13px;padding:8px 12px;align-items:center}
.mic{color:#e5e5ea;display:grid;place-items:center;width:22px}
.home-indicator{bottom:7px;width:132px;height:5px}

/* Unread messages remain unread even after viewing evidence. */
.conversation-item.is-unread .conversation-top strong{font-weight:800}
.conversation-item.is-unread .preview{color:#eee;font-weight:550}
.unread-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#0a84ff;margin-right:-5px}
.conversation-item.preview-only{cursor:default}
.unread-divider{display:flex;align-items:center;gap:10px;color:#0a84ff;font-size:12px;font-weight:650;margin:20px 0 12px;white-space:nowrap}
.unread-divider::before,.unread-divider::after{content:"";height:1px;flex:1;background:#0a84ff}