:root{
  --iris-purple:      #6C00F6;
  --iris-purple-dark: #4A00AA;
  --account-blue:     #188FFF;
  --divider:          #E0E4E9;
  --header-bg:        #F7F7F7;
  --header-text:      #9EA2AF;
  --body-text:        #26282A;
  --placeholder:      #91949D;
  --error-red:        #E0004D;
  --disabled-blue:    #BADEFF;
  --iris-primary-teal:#00B1CE;
  --list-bg:          #F2F2F2;
  --row-bg:           #FFFFFF;
  --preview-text:     #878C91;
  --timestamp-list:   #B9BDC5;
  --badge-orange:     #FF8B12;
  --search-bar-bg:    #F1F1F5;
  --bubble-mine:      #33C1D8;
  --bubble-other:     #FFFFFF;
  --font: -apple-system, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box; -webkit-font-smoothing:antialiased; margin:0; padding:0;}
body{
  font-family:var(--font); background:#e9e9ee; color:var(--body-text);
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
a{text-decoration:none;}
.app-frame{
  width:100%; max-width:400px; min-height:90vh; background:#fff; border-radius:16px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.2); display:flex; flex-direction:column;
  position:relative;
}
.error-msg{background:#FFEAF0; color:var(--error-red); font-size:13px; padding:10px 16px; border-radius:8px; margin:0 20px 14px;}
.success-msg{background:#E9FBF4; color:#0E9F6E; font-size:13px; padding:10px 16px; border-radius:8px; margin:0 20px 14px;}

/* ===== WELCOME ===== */
.welcome-screen{
  height:100vh; max-height:90vh; position:relative; overflow:hidden;
}
.welcome-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.welcome-logo{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:175px; z-index:2;}
.welcome-btns{position:absolute; left:32px; right:32px; bottom:16px; z-index:2;}
.btn-primary{background:rgba(108,0,246,.8); color:#fff; border:none; border-radius:4px; height:48px; font-size:15px; font-weight:700; font-family:var(--font); cursor:pointer; width:100%;}
.btn-primary:active{background:rgba(64,0,144,.8);}

/* ===== FORM (login / register) ===== */
.form-body{flex:1; padding:20px 24px 24px; display:flex; flex-direction:column;}
.form-toolbar{height:56px; display:flex; align-items:center;}
.toolbar-check-btn{width:32px;height:32px; border:none; background:none; cursor:pointer; padding:0;}
.toolbar-check-btn img{width:100%;height:100%;}
.form-toolbar img{width:20px;height:20px; cursor:pointer;}
.form-toolbar a{display:flex; align-items:center; justify-content:center; width:44px;height:44px; margin-left:-12px;}
.form-logo{width:78px; display:block; margin:6px auto 22px;}
.form-title{font-size:21px; font-weight:700; margin-bottom:6px;}
.form-sub{font-size:13.5px; color:#787D82; margin-bottom:22px; line-height:1.5;}
.field{position:relative; margin-bottom:18px;}
.field input{width:100%; border:none; border-bottom:1.5px solid var(--divider); padding:8px 30px 8px 0; font-size:16px; color:var(--body-text); font-family:var(--font); outline:none; background:transparent;}
.field input:focus{border-bottom-color:var(--iris-purple);}
.field input::placeholder{color:var(--placeholder);}
.field .field-icon{position:absolute; right:0; top:6px; width:20px;height:20px; opacity:.55; cursor:pointer;}
.helper-link{font-size:13.5px; color:var(--account-blue); font-weight:500; display:inline-block;}
.form-actions{margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.btn-text{color:var(--account-blue); font-size:13px; font-weight:700; background:none; border:none; padding:8px 2px; cursor:pointer; font-family:var(--font); white-space:nowrap;}
.btn-pill{background:var(--iris-purple); color:#fff; border:none; border-radius:22px; height:42px; padding:0 22px; font-size:13px; font-weight:700; font-family:var(--font); cursor:pointer; white-space:nowrap;}
.btn-pill:disabled{background:var(--disabled-blue); cursor:default;}
.agree-row{display:flex; align-items:flex-start; gap:10px; margin-top:16px; cursor:pointer;}
.agree-row input{width:18px; height:18px; margin-top:1px; accent-color:var(--iris-purple); flex-shrink:0; cursor:pointer;}
.agree-row span{font-size:12.5px; color:#787D82; line-height:1.6;}
.terms-link{color:var(--account-blue); font-weight:600;}

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center;
  z-index:50; padding:24px;
}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff; border-radius:10px; max-width:340px; width:100%; max-height:80vh; display:flex; flex-direction:column; overflow:hidden;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--divider);}
.modal-head span{font-size:15px; font-weight:700; color:var(--body-text); line-height:1.4;}
.modal-head img{width:18px;height:18px; cursor:pointer; flex-shrink:0; margin-left:12px;}
.modal-body{padding:16px; overflow-y:auto; font-size:13px; color:#787D82; line-height:1.7;}
.modal-body p{margin-bottom:12px;}
.modal-body p:last-child{margin-bottom:0;}

/* ===== DASHBOARD ===== */
.dash-topbar{flex-shrink:0; background:var(--iris-primary-teal); display:flex; align-items:center; gap:14px; padding:0 16px; height:56px;}
.dash-search{flex:1; height:100%; display:flex; align-items:center; gap:10px;}
.dash-search img{width:32px;height:32px;}
.dash-search input{border:none; background:transparent; outline:none; font-size:15px; width:100%; font-family:var(--font); color:#fff;}
.dash-search-clear{width:16px;height:16px; flex-shrink:0; cursor:pointer; display:none;}
.dash-search-clear.show{display:block;}
.dash-search input::placeholder{color:rgba(255,255,255,.55);}
.dash-icon-btn{width:32px;height:32px; position:relative; flex-shrink:0; cursor:pointer;}
.dash-icon-btn img{width:100%;height:100%;}
.dash-profile-btn{width:32px;height:32px; flex-shrink:0; cursor:pointer;}
.dash-profile-btn img{width:100%;height:100%;}
.dash-list{flex:1; overflow-y:auto; background:var(--list-bg); padding-bottom:74px;}
.dash-row{display:flex; align-items:center; gap:16px; padding:8px 16px; background:var(--row-bg); border-bottom:1px solid var(--divider); position:relative; cursor:pointer;}
.dash-row:hover{background:#FAFAFC;}
.dash-avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:#fff; font-weight:600; font-size:17px;}
.dash-mid{flex:1; min-width:0;}
.dash-title{color:var(--body-text); font-size:16px; font-weight:600; margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dash-preview{color:var(--preview-text); font-size:14px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dash-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0;}
.dash-time{color:var(--timestamp-list); font-size:12px;}
.dash-status-icons{display:flex; align-items:center; gap:8px; margin-top:4px;}
.dash-status-icon{width:10px;height:10px;}
.dash-empty{padding:60px 30px; text-align:center; color:#9EA2AF; font-size:14px; line-height:1.7;}
.dash-fab{position:absolute; right:16px; bottom:16px; width:56px; height:56px; z-index:9;}
.dash-fab img{width:100%; height:100%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.28));}

/* ===== CHAT ===== */
.chat-topbar{flex-shrink:0; background:#fff; display:flex; align-items:center; gap:12px; padding:0 12px; height:56px; box-shadow:0 1px 0 rgba(0,0,0,.06);}
.chat-topbar img.back{width:20px;height:20px; cursor:pointer;}
.chat-topbar .info-btn{margin-left:auto; width:32px;height:32px; flex-shrink:0; cursor:pointer;}
.chat-topbar .info-btn img{width:100%;height:100%;}
.chat-avatar{width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff; font-size:13px; font-weight:700;}
.chat-title{font-size:15.5px; font-weight:600; color:var(--body-text);}
.chat-status{font-size:11.5px; color:var(--iris-primary-teal);}
.chat-body{flex:1; overflow-y:auto; background:var(--list-bg); padding:14px 12px; display:flex; flex-direction:column; gap:8px;}
.msg-row{display:flex; max-width:calc(100% - 50px);}
.msg-row.has-sender{align-items:flex-end; gap:8px;}
.msg-sender-avatar{width:36px;height:36px;border-radius:50%; flex-shrink:0; display:flex;align-items:center;justify-content:center; color:#fff; font-size:12px; font-weight:700;}
.msg-sender-name{font-size:11.5px; color:#787D82; font-weight:600; margin:0 4px 3px;}
.msg-system-row{align-self:center; text-align:center; font-size:12px; color:#787D82; padding:6px 24px; max-width:90%;}
.msg-row.mine{align-self:flex-end; flex-direction:row-reverse;}
.bubble{padding:12px; border-radius:16px; font-size:15px; line-height:1.4; word-wrap:break-word;}
.msg-row.mine .bubble{background:var(--bubble-mine); color:#fff; border-bottom-right-radius:4px;}
.msg-row:not(.mine) .bubble{background:var(--bubble-other); color:var(--body-text); border-bottom-left-radius:4px; box-shadow:0 1px 1px rgba(0,0,0,.06);}
.msg-time{font-size:10.5px; color:var(--timestamp-list); margin-top:3px; padding:0 4px; display:flex; align-items:center; gap:8px;}
.msg-row.mine .msg-time{justify-content:flex-end;}
.msg-sent-check{width:11px;height:11px;}
.bubble-wrap{position:relative;}
.bubble-unsent{background:transparent !important; border:1px solid var(--divider) !important; color:#9EA2AF !important; font-style:italic; box-shadow:none !important;}
.bubble-emoji{background:transparent; font-size:56px; line-height:1.2; padding:2px 4px;}
.msg-like-btn,.msg-unsend-btn{background:none; border:none; color:var(--timestamp-list); font-size:10.5px; font-weight:600; font-family:var(--font); cursor:pointer; padding:0;}
.msg-failed-text{color:var(--error-red); font-size:10.5px;}
.msg-retry-btn{background:none; border:none; color:var(--error-red); font-size:10.5px; font-weight:700; font-family:var(--font); cursor:pointer; padding:0; text-decoration:underline;}
.msg-like-btn:hover,.msg-unsend-btn:hover{color:var(--iris-primary-teal);}
.msg-like-badge{
  position:absolute; bottom:-8px; right:6px; background:#fff; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.2);
  display:flex; align-items:center; gap:3px; padding:2px 6px;
}
.msg-row.mine .msg-like-badge{right:auto; left:6px;}
.msg-like-badge img{width:11px;height:11px;}
.msg-like-badge .like-count{font-size:10px; color:var(--preview-text); font-weight:700;}
.msg-like-badge.liked .like-count{color:var(--iris-purple);}
.seen-status{font-size:11px; color:var(--timestamp-list); text-align:right; padding:2px 16px 6px;}
.seen-avatars{display:flex; justify-content:flex-end; gap:3px; padding:8px 16px 6px; min-height:0;}
.seen-avatar{width:16px;height:16px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff; font-size:7px; font-weight:700; box-shadow:0 0 0 1.5px #fff;}
.unsend-tip{display:flex; align-items:flex-start; gap:8px; background:var(--iris-primary-teal); color:#fff; border-radius:16px; padding:12px 16px; font-size:12.5px; line-height:1.5; margin:6px 0;}
.unsend-tip img{width:14px;height:14px; flex-shrink:0; margin-top:2px; cursor:pointer; filter:brightness(0) invert(1);}
.typing-indicator{display:none; align-items:center; gap:4px; padding:9px 13px; background:var(--bubble-other); border-radius:16px; border-bottom-left-radius:4px; width:fit-content; box-shadow:0 1px 1px rgba(0,0,0,.06);}
.typing-dot{width:6px;height:6px;border-radius:50%; background:#B9BDC5; animation:typingBounce 580ms infinite ease-in-out;}
.typing-dot:nth-child(2){animation-delay:140ms;}
.typing-dot:nth-child(3){animation-delay:280ms;}
@keyframes typingBounce{0%,72.5%,100%{transform:translateY(0); opacity:.5;} 36%{transform:translateY(-4px); opacity:1;}}
.msg-row.mine .msg-time{text-align:right;}
.chat-inputbar{flex-shrink:0; background:#fff; padding:10px 12px; display:flex; align-items:center; gap:10px; border-top:1px solid var(--divider);}
.chat-attach-btn{width:26px;height:26px; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.chat-attach-btn img{width:100%;height:100%;}
.bubble-media{padding:0 !important; background:transparent !important; box-shadow:none !important; cursor:pointer; overflow:hidden; border-radius:14px;}
.bubble-media img{display:block; max-width:220px; max-height:280px; border-radius:14px;}
.lightbox-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:60; align-items:center; justify-content:center; padding:24px;}
.lightbox-overlay img{max-width:100%; max-height:100%; border-radius:6px;}

/* ===== LINK PREVIEW - iris_conversation_row_link_preview.xml ===== */
.link-preview-card{display:block; margin-top:6px; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.2); text-decoration:none; max-width:260px; background:#fff;}
.lp-image{display:block; width:100%; max-height:140px; object-fit:cover;}
.lp-footer{display:flex; gap:8px; padding:8px; background:#fff;}
.lp-favicon{width:16px;height:16px; margin-top:2px; flex-shrink:0; border-radius:2px;}
.lp-text{flex:1; min-width:0;}
.lp-title{font-size:13px; font-weight:700; color:var(--body-text); line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.lp-desc{font-size:11.5px; color:var(--preview-text); margin-top:2px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.lp-domain{font-size:10.5px; color:var(--preview-text); margin-top:3px; text-transform:uppercase; letter-spacing:.02em;}
.chat-blocked-notice{flex-shrink:0; background:#fff; padding:14px 16px; text-align:center; font-size:13px; color:#9EA2AF; border-top:1px solid var(--divider);}
.chat-inputbar textarea{flex:1; border:none; background:var(--search-bar-bg); border-radius:20px; padding:10px 16px; font-size:14.5px; outline:none; font-family:var(--font); resize:none; max-height:104px; line-height:1.4; overflow-y:auto;}
.chat-send{width:38px;height:38px; border-radius:50%; background:var(--iris-purple); border:none; color:#fff; font-size:16px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.chat-send:disabled{background:var(--disabled-blue); cursor:default;}

.top-actions{position:absolute; top:14px; right:16px; z-index:5;}
.top-actions a{color:rgba(255,255,255,.9); font-size:13px;}

/* ===== GROUP SETTINGS - iris_fragment_group_settings.xml ===== */
.gs-topbar{flex-shrink:0; background:#fff; display:flex; align-items:center; gap:12px; padding:0 12px; height:56px; box-shadow:0 1px 0 rgba(0,0,0,.06);}
.gs-topbar img{width:20px;height:20px; cursor:pointer;}
.gs-topbar span{font-size:15.5px; font-weight:600; color:var(--body-text);}
.gs-body{flex:1; overflow-y:auto; background:#fff;}
.group-edit-header{display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 16px 20px;}
.group-edit-avatar{
  width:120px;height:120px;border-radius:50%; background:var(--iris-primary-teal) center/cover no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; flex-shrink:0;
}
.group-edit-avatar img{width:28px;height:28px; filter:brightness(0) invert(1);}
.group-edit-avatar span{color:#fff; font-size:11.5px; font-weight:600;}
.group-edit-name{border:none; border-bottom:1.5px solid var(--divider); text-align:center; font-size:17px; font-weight:700; color:var(--body-text); padding:6px 4px; width:100%; max-width:240px; font-family:var(--font); outline:none;}
.group-edit-name:focus{border-bottom-color:var(--iris-primary-teal);}
.gs-row{display:flex; align-items:center; gap:16px; padding:14px 16px; cursor:pointer; background:#fff;}
.gs-row:active{background:#FAFAFA;}
.gs-row img{width:22px;height:22px; flex-shrink:0;}
.gs-row span{font-size:15px; color:var(--body-text); flex:1;}
.gs-divider{height:8px; background:var(--list-bg);}
.gs-switch{position:relative; width:42px; height:24px; flex-shrink:0;}
.gs-switch input{opacity:0; width:0; height:0;}
.gs-switch-track{position:absolute; inset:0; background:var(--divider); border-radius:12px; transition:background .15s;}
.gs-switch-track:before{content:""; position:absolute; width:18px;height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.25);}
.gs-switch input:checked + .gs-switch-track{background:var(--iris-primary-teal);}
.gs-switch input:checked + .gs-switch-track:before{transform:translateX(18px);}

/* ===== SETTINGS - iris_fragment_settings.xml ===== */
.settings-user{display:flex; flex-direction:column; align-items:center; padding:24px 16px 20px;}
.settings-avatar{width:120px;height:120px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff; font-size:40px; font-weight:700; margin-bottom:12px;}
.settings-username{font-size:17px; font-weight:700; color:var(--body-text);}
.settings-section-title{padding:16px 16px 4px; font-size:12px; font-weight:700; color:var(--header-text); text-transform:uppercase; letter-spacing:.03em;}
.settings-switch-row{display:flex; align-items:center; justify-content:space-between; padding:10px 16px;}
.settings-switch-row span:first-child{font-size:15px; color:var(--body-text);}
.settings-footer{display:flex; flex-direction:column; align-items:center; gap:6px; padding:28px 16px 32px;}
.settings-footer img{width:48px;height:48px; border-radius:10px;}
.settings-version{font-size:12px; color:#9EA2AF;}
.settings-footer a{font-size:12.5px; color:var(--account-blue); font-weight:600; text-align:center;}
.settings-empty{padding:60px 30px; text-align:center; color:#9EA2AF; font-size:14px;}
.credits-row{padding:13px 16px; border-bottom:1px solid var(--divider); font-size:14.5px; color:var(--body-text); font-weight:600;}

/* ===== BLOCKED PEOPLE - iris_blocked_people_row.xml ===== */
.blocked-row{display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--divider);}
.blocked-name{flex:1; font-size:15px; color:var(--body-text); font-weight:500;}
.blocked-unblock-btn{background:none; border:none; color:var(--iris-primary-teal); font-size:13px; font-weight:700; font-family:var(--font); cursor:pointer; padding:8px;}

/* ===== INVITATIONS - iris_fragment_invitations.xml + iris_dialog_invitation_one_on_one.xml ===== */
.invite-row{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--divider); flex-wrap:wrap;}
.invite-text{flex:1; font-size:14px; color:var(--body-text); min-width:140px;}
.invite-actions{display:flex; gap:8px; margin-left:56px;}
.invite-btn{border:none; border-radius:16px; height:32px; padding:0 16px; font-size:12.5px; font-weight:700; font-family:var(--font); cursor:pointer;}
.invite-btn-block{background:none; color:var(--error-red); border:1.5px solid #FFD3DE;}
.invite-btn-accept{background:var(--iris-primary-teal); color:#fff;}

/* ===== VIEW MEMBERS - iris_view_members_row.xml (avatar 60dp) ===== */
.member-row{display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--divider);}
.member-avatar{width:60px;height:60px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff; font-weight:600; font-size:19px; flex-shrink:0;}
.member-row span{font-size:15px; color:var(--body-text); font-weight:500;}

.dash-icon-btn .badge-dot{
  position:absolute; top:-6px; right:-8px; min-width:16px; height:16px; padding:0 3px; border-radius:8px;
  background:var(--badge-orange); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center;
}

/* ===== PROFILE - iris_fragment_profile_image.xml ===== */
.profile-photo-screen{height:100vh; max-height:90vh; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px;}
.profile-close{position:absolute; top:16px; left:16px; width:20px;height:20px; cursor:pointer;}
.profile-blocked-tag{position:absolute; top:20px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; font-weight:600; background:rgba(0,0,0,.3); padding:4px 14px; border-radius:12px;}
.profile-big-avatar{width:200px;height:200px;border-radius:50%; background:rgba(0,0,0,.15); display:flex;align-items:center;justify-content:center; color:#fff; font-size:64px; font-weight:700; margin-bottom:18px;}
.profile-big-name{color:#fff; font-size:30px; font-weight:300; margin-bottom:36px;}
.profile-actions{position:absolute; bottom:44px; display:flex; gap:40px;}
.profile-action-btn{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;}
.profile-action-circle{width:64px;height:64px;border-radius:50%; background:rgba(0,0,0,.3); display:flex;align-items:center;justify-content:center;}
.profile-action-circle img{width:26px;height:26px;}
.profile-action-btn span{color:#fff; font-size:16px; font-weight:600;}