/* ===== Dedicated Group Chat UI ===== */
#group-chat-page{position:fixed;inset:0;z-index:100020;background:linear-gradient(160deg,#f5f6fa,#f5f6fa 55%,#f5f6fa);color:#172033;display:none;overflow:hidden;font-family:inherit}
#group-chat-page:not(.hidden){display:block}
#group-chat-page.hidden{display:none!important}
.group-page-view{position:absolute;inset:0;display:none;flex-direction:column;min-height:100%;overflow:hidden}
.group-page-view.active{display:flex}
.group-page-header{display:flex;align-items:center;gap:12px;padding:14px 14px 12px;border-bottom:1px solid rgba(36,55,85,0.09);background:rgba(245,246,250,0.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);flex:0 0 auto}
.group-page-header h2{margin:0;font-size:20px;line-height:1.1;flex:1}
.group-page-header button{width:44px;height:44px;border:0;border-radius:14px;background:linear-gradient(135deg,#42dc82,#18a96a);color:#fff;font-size:18px;box-shadow:0 10px 28px rgba(30,210,125,.2)}
.group-page-action{width:auto!important;padding:0 14px!important;font-size:14px!important;font-weight:700}
.group-page-body{padding:16px;overflow:auto;flex:1;min-height:0}
.group-create-primary{display:flex;flex-direction:column;gap:12px}
.group-field,.group-search{width:100%;box-sizing:border-box;border:1px solid rgba(36,55,85,0.12);background:rgba(255,255,255,.055);color:#eef2ff;border-radius:15px;padding:15px 16px;outline:none;font:inherit}
.group-field:focus,.group-search:focus{border-color:rgba(72,220,133,.75);box-shadow:0 0 0 3px rgba(72,220,133,.11)}
.group-create-submit{border:0;border-radius:15px;min-height:52px;background:linear-gradient(135deg,#43dc83,#18a96a);color:#fff;font-size:16px;font-weight:800;box-shadow:0 12px 30px rgba(30,210,125,.2)}
.group-create-submit:disabled{opacity:.38;box-shadow:none}
.group-section-label{margin:18px 3px 9px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;font-weight:800;color:#aeb7cb}
.group-list{display:flex;flex-direction:column;gap:10px}
.group-list-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px;border:1px solid rgba(36,55,85,0.10);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035));color:inherit;box-shadow:0 10px 30px rgba(0,0,0,.13)}
.group-list-card:active{transform:scale(.99)}
.group-avatar{width:50px;height:50px;flex:0 0 50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#43dc83,#1cae70);font-size:20px;color:#fff}
.group-card-copy{min-width:0;display:flex;flex-direction:column;gap:4px;flex:1}.group-card-copy strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-card-copy small{font-size:12px;color:#aab4c8}.group-card-arrow{opacity:.55}
.group-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;min-height:260px;color:#aab4c8}.group-empty i{font-size:42px;color:#48dc85;margin-bottom:5px}.group-empty strong{font-size:18px;color:#172033}.group-empty span{font-size:13px;max-width:280px}
.group-user-picker,.group-manage-members{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.group-user-picker-row,.group-manage-user,.group-member-row{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;border:1px solid rgba(36,55,85,0.08);background:rgba(255,255,255,.045);color:inherit;border-radius:13px;padding:13px 10px;text-align:left;min-height:72px}
.group-user-picker-row img,.group-manage-user img,.group-member-row img{width:38px;height:38px;object-fit:cover;border-radius:50%;background:#e9ecf1;flex:0 0 38px}.group-user-picker-row span,.group-member-row span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.group-user-picker-row small,.group-member-row small{font-size:11px;color:#9fa9bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-user-picker-row i{font-size:20px;color:#43dc83}.group-user-picker-row.selected{border-color:rgba(67,220,131,.55);background:rgba(67,220,131,.09)}
.group-selected{display:flex;gap:7px;flex-wrap:wrap;min-height:0}.group-selected-chip{display:flex;align-items:center;gap:6px;border:1px solid rgba(67,220,131,.32);background:rgba(67,220,131,.1);color:#eafff3;border-radius:999px;padding:5px 9px 5px 5px}.group-selected-chip img{width:25px;height:25px;border-radius:50%;object-fit:cover}.group-selected-chip b{font-size:17px;font-weight:500;opacity:.75}
.group-chat-main{display:flex;flex-direction:column;min-height:0;flex:1}.group-chat-header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(36,55,85,0.08);background:rgba(245,246,250,0.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);flex:0 0 auto}.group-chat-header h2{font-size:16px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-chat-title-copy{flex:1;min-width:0}.group-chat-title-copy small{display:block;color:#9fa9bd;font-size:11px;margin-top:2px}.group-chat-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#43dc83,#1cae70);color:#fff}.group-chat-header>button{border:0;background:transparent;color:#172033;width:40px;height:40px;border-radius:12px;font-size:17px}.group-chat-header>button:hover{background:rgba(255,255,255,.08)}
#group-messages{flex:1;min-height:0;overflow:auto;padding:14px 12px 18px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.group-message-row{display:flex;width:100%}.group-message-row.mine{justify-content:flex-end}.group-message-row.theirs{justify-content:flex-start}.group-message-bubble{max-width:min(82%,360px);padding:8px 10px;border-radius:16px;background:#e9ebf1;box-shadow:0 6px 20px rgba(0,0,0,.15)}.group-message-row.mine .group-message-bubble{background:linear-gradient(145deg,#e9eaf1,#e9e9f2);border-bottom-right-radius:5px}.group-message-row.theirs .group-message-bubble{border-bottom-left-radius:5px}.group-message-sender{font-size:11px;font-weight:800;color:#6fe49c;margin:0 2px 5px}.group-message-body{font-size:14px;line-height:1.4;overflow-wrap:anywhere}.group-message-body img,.group-message-body video{display:block;width:min(270px,100%);max-height:310px;object-fit:cover;border-radius:12px}.group-message-body audio{display:block;width:min(270px,100%)}.group-message-body a{color:#8ceeb2;text-decoration:none;font-weight:700}.group-message-meta{text-align:right;font-size:9px;color:#9aa4b9;margin-top:5px}
.group-composer{display:flex;align-items:flex-end;gap:7px;padding:9px 10px max(10px,env(safe-area-inset-bottom));border-top:1px solid rgba(36,55,85,0.08);background:rgba(245,246,250,0.94);flex:0 0 auto}.group-composer textarea{flex:1;min-width:0;max-height:110px;resize:none;border:1px solid rgba(36,55,85,0.10);border-radius:20px;background:rgba(255,255,255,.055);color:#eef2ff;padding:11px 13px;font:inherit;outline:none}.group-composer button{width:44px;height:44px;min-width:44px;border:0;border-radius:14px;background:linear-gradient(135deg,#43dc83,#18a96a);color:#fff;font-size:17px}.group-composer .group-tool{background:rgba(255,255,255,.08);font-size:17px}.group-composer input{display:none}
.group-manage-panel{position:absolute;inset:0;background:rgba(245,246,250,0.94);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);z-index:3;display:none}.group-manage-panel.open{display:block}.group-manage-sheet{position:absolute;right:0;top:0;bottom:0;width:min(390px,100%);background:#f5f7f9;border-left:1px solid rgba(36,55,85,0.10);box-shadow:-18px 0 45px rgba(0,0,0,.35);display:flex;flex-direction:column}.group-manage-head{display:flex;align-items:center;gap:10px;padding:15px;border-bottom:1px solid rgba(36,55,85,0.08)}.group-manage-head strong{flex:1}.group-manage-head button{width:38px;height:38px;border:0;border-radius:11px;background:rgba(255,255,255,.08);color:#fff}.group-manage-body{padding:14px;overflow:auto}.group-manage-save,.group-manage-add{width:100%;min-height:44px;border:0;border-radius:13px;background:linear-gradient(135deg,#43dc83,#18a96a);color:#fff;font-weight:800;margin-top:8px}.group-manage-user.selected{border-color:rgba(67,220,131,.65);background:rgba(67,220,131,.1)}.group-manage-loading{padding:14px;text-align:center;color:#9fa9bd;font-size:13px}
@media(max-width:600px){.group-page-body{padding:13px}.group-chat-header{padding-top:8px}.group-message-bubble{max-width:86%}.group-manage-sheet{width:100%;border-left:0}}
html[data-theme] #group-chat-page{background:linear-gradient(160deg,#eef3f9,#f8fbff);color:#172033}html[data-theme] .group-page-header,html[data-theme] .group-chat-header{background:rgba(255,255,255,.86);border-color:rgba(36,55,85,.1)}html[data-theme] .group-field,html[data-theme] .group-search,html[data-theme] .group-composer textarea{background:rgba(255,255,255,.86);color:#172033;border-color:rgba(36,55,85,.13)}html[data-theme] .group-list-card,html[data-theme] .group-user-picker-row,html[data-theme] .group-member-row,html[data-theme] .group-manage-user{background:rgba(255,255,255,.82);color:#172033;border-color:rgba(36,55,85,.1)}html[data-theme] .group-manage-sheet{background:#f7faff;color:#172033}html[data-theme] .group-message-bubble{background:#e9eef8;color:#172033}html[data-theme] .group-message-row.mine .group-message-bubble{background:#dfe6ff}

/* Final group chat controls */
.group-list-card{display:flex;align-items:center;gap:6px}
.group-card-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.group-card-delete{width:40px;height:40px;flex:0 0 40px;border:0;border-radius:10px;background:rgba(255,70,70,.12);color:#ff7b7b;cursor:pointer}
.group-message-actions{display:flex;align-items:center;gap:5px;margin-top:6px}
.group-reaction-btn,.group-message-delete{height:28px;min-width:34px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.group-reaction-btn span{font-size:11px}.group-message-delete{color:#ff8585}

.group-card-main:disabled{opacity:.72;cursor:default}.group-card-delete-me{background:rgba(255,70,70,.12);color:#ff8b8b}.group-member-row{display:flex;align-items:center;gap:8px}.group-member-row>span{flex:1;min-width:0}.group-member-remove{flex:0 0 36px;width:36px;height:36px;border:0;border-radius:10px;background:rgba(255,70,70,.12);color:#ff8b8b;cursor:pointer}.group-leave-btn,.group-delete-me-btn{width:100%;margin-top:10px;border:0;border-radius:10px;padding:11px;cursor:pointer}.group-leave-btn{background:rgba(255,255,255,.08);color:inherit}.group-delete-me-btn{background:rgba(255,70,70,.12);color:#ff8b8b}

/* Group member actions / calls / voice recording */
.group-header-call-actions{display:flex;align-items:center;gap:2px}
.group-header-call-actions button{border:0;background:transparent;color:#dce4f5;width:38px;height:40px;border-radius:12px;font-size:16px;cursor:pointer}
.group-header-call-actions button:hover{background:rgba(255,255,255,.08)}
.group-composer{position:relative}
.group-voice-button.recording{background:#d84b5b!important;animation:groupVoicePulse 1s infinite}
.group-voice-status{position:absolute;right:12px;bottom:64px;z-index:4;font-size:11px;color:#ff9ca7;pointer-events:none}
@keyframes groupVoicePulse{50%{transform:scale(1.06);opacity:.75}}
.hidden{display:none!important}

/* Keep the original friend row as the only visible username when selecting group members. */
#group-create-selected{display:none!important}
#group-create-users .group-user-picker-row strong{font-size:16px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}

.group-composer.chat-composer{position:relative!important}
.group-composer .chat-tools-menu{left:0!important;bottom:calc(100% + 8px)!important}

/* Mobile keyboard positioning for the dedicated Group Chat page */

/* Use the keyboard-aware viewport calculated by chat-input.js.
   Group Chat owns its own layout, so keep the composer at the bottom of
   the visible WebView instead of the full screen behind the keyboard. */
body.kite-keyboard-open #group-chat-page {
  height: var(--kite-keyboard-viewport-height, 100dvh) !important;
  max-height: var(--kite-keyboard-viewport-height, 100dvh) !important;
  bottom: auto !important;
  overflow: hidden !important;
}

body.kite-keyboard-open #group-chat-page .group-page-view {
  height: 100% !important;
  min-height: 0 !important;
}

body.kite-keyboard-open #group-chat-page .group-chat-main {
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

body.kite-keyboard-open #group-chat-page #group-messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Group chat viewport fix: keep the conversation and composer anchored to the app viewport. */
#group-chat-page{height:100dvh;max-height:100dvh;min-height:0;box-sizing:border-box;}
#group-chat-page .group-page-view{height:100%;min-height:0;max-height:100%;}
#group-chat-page #group-conversation-view{display:none;flex-direction:column;overflow:hidden;}
#group-chat-page #group-conversation-view.active{display:flex;}
#group-chat-page #group-messages{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;}
#group-chat-page .group-composer{position:relative;flex:0 0 auto;bottom:auto;transform:none;}


/* ===== Rich Share Cards: large thumbnail, URL hidden ===== */
.kite-rich-link-card{
  width:100% !important;
  max-width:520px !important;
  min-width:0;
  display:block !important;
  overflow:hidden !important;
  border-radius:16px !important;
  box-sizing:border-box !important;
}
.kite-rich-link-card .kite-link-preview-media{
  width:100% !important;
  height:180px !important;
  min-height:150px;
}
.kite-rich-link-card .kite-link-preview-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.kite-rich-link-card .kite-link-url{
  display:none !important;
}
.kite-rich-link-card .kite-link-copy{
  padding:11px 13px 12px;
}
@media (max-width:480px){
  .kite-rich-link-card .kite-link-preview-media{
    height:170px !important;
  }
}
#group-conversation-view{position:relative!important}

/* Group icon picker: owner-only icon choices; keep the default users icon on new groups. */
.group-icon-section{margin:14px 0 18px}.group-icon-section.hidden{display:none!important}.group-icon-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.group-icon-picker button{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(36,55,85,0.14);border-radius:50%;background:rgba(255,255,255,.06);font-size:21px;color:inherit;cursor:pointer}.group-icon-picker button.selected{border-color:#647bff;background:rgba(99,102,241,.24);box-shadow:0 0 0 2px rgba(99,102,241,.2)}.group-avatar{font-size:24px}.kite-forward-icon{display:grid;place-items:center}

/* Group picture picker and custom uploaded image */
.group-icon-editable{cursor:pointer;position:relative}.group-custom-icon{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.group-icon-upload-button{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:9px 14px;margin:8px 0;background:var(--kite-accent, #675cff);color:#fff;font:inherit;cursor:pointer}.group-icon-upload-button:disabled{opacity:.6}.group-icon-hint{font-size:12px;opacity:.7;margin:4px 0}

/* Group picture picker: scoped modal, independent of public chat controls. */
#kite-group-picture-modal{position:fixed;inset:0;z-index:2147483100;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(245,246,250,0.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#kite-group-picture-modal.hidden{display:none!important}
/* The inner picker must never override its hidden state while outside the modal. */
#kite-group-picture-modal .group-icon-section.hidden{display:none!important}
#kite-group-picture-modal{box-sizing:border-box;isolation:isolate;overscroll-behavior:contain}
#kite-group-picture-modal .kite-group-picture-card{position:relative;z-index:1;max-width:100%;max-height:calc(100dvh - 36px);max-height:calc(100vh - 36px)}
.kite-group-picture-card{width:min(440px,calc(100vw - 28px));max-height:min(82vh,620px);overflow:auto;border:1px solid rgba(36,55,85,0.14);border-radius:22px;background:var(--card-bg,#f5f7f9);color:var(--text-color,#172033);box-shadow:0 22px 70px rgba(0,0,0,.48)}
.kite-group-picture-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid rgba(36,55,85,0.10)}
.kite-group-picture-head strong{font-size:17px}.kite-group-picture-head button{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:inherit;font-size:27px;line-height:1;cursor:pointer}
.kite-group-picture-content{padding:16px}.kite-group-picture-content .group-icon-section{display:block!important;margin:0}.kite-group-picture-content .group-icon-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.kite-group-picture-content .group-icon-picker button{width:100%;height:48px;min-width:0;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;border-radius:15px;font-size:23px;box-sizing:border-box}.kite-group-picture-content .group-icon-upload-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:0 0 14px}.kite-group-picture-content .group-icon-hint{margin:0 0 12px;text-align:center}


/* Keep Group Settings above stray floating video-play overlays. */
#group-conversation-view #group-manage-panel,
#group-conversation-view .group-manage-panel { z-index: 2147483600 !important; }
#group-conversation-view #group-manage-panel.open,
#group-conversation-view .group-manage-panel.open { position: absolute !important; inset: 0 !important; }
#group-conversation-view #group-manage-panel .group-manage-sheet,
#group-conversation-view .group-manage-panel .group-manage-sheet { z-index: 2147483601 !important; }