/* SOHBERA Platinum Social V1 — UI-only extension.
   Keeps original IDs, data attributes, JS event bindings and security controls. */
body.sohbera-platinum{
  --soc-bg:#fbfdfe;
  --soc-frost:#eff6f7;
  --soc-line:#dce8eb;
  --soc-text:#243f4d;
  --soc-muted:#657e8a;
  --soc-accent:#258597;
  --soc-shadow:0 22px 65px rgba(34,65,79,.16),0 3px 12px rgba(34,65,79,.04);
}

/* Friends / social sidebar: remain compact and readable even with long nicks */
body.sohbera-platinum .friends-section .section-title,
body.sohbera-platinum .groups-section .section-title{font-size:10px;letter-spacing:.16em;color:#698793}
body.sohbera-platinum .friends-title button{width:30px;height:30px;border:1px solid #dfebed;border-radius:10px;background:white;color:#287e8d}
body.sohbera-platinum .friends-summary{padding:10px 8px 14px;gap:7px}
body.sohbera-platinum .friends-summary>span{
  padding:12px 4px 10px;border:1px solid #dce8eb;border-radius:13px;
  background:#fff;box-shadow:0 6px 15px rgba(35,72,80,.035);
}
body.sohbera-platinum .friends-summary b{font-size:17px;line-height:1.2;color:#234552}
body.sohbera-platinum .friends-summary small{font-size:9px;color:#728b95;line-height:1.25}
body.sohbera-platinum .friend-block{padding:0 7px 14px}
body.sohbera-platinum .friend-block-title{font-size:9px;letter-spacing:.14em;color:#71919b;padding:10px 5px 9px}
body.sohbera-platinum .friend-list{gap:7px}
body.sohbera-platinum .friend-list>em{
  font-size:11px;line-height:1.6;padding:17px 11px;border-radius:13px;
  border-color:#d5e4e8;background:#fff;color:#7c9098;
}
body.sohbera-platinum .friend-row{
  box-sizing:border-box;width:100%;min-width:0;grid-template-columns:40px minmax(0,1fr) auto;
  min-height:62px;padding:8px;gap:9px;border:1px solid #e0eaed;border-radius:14px;
  background:rgba(255,255,255,.86);box-shadow:0 4px 16px rgba(33,65,79,.035);
}
body.sohbera-platinum .friend-row:hover{background:#f2f9f9;border-color:#bfdce0}
body.sohbera-platinum .friend-avatar{width:40px;height:40px;border-radius:13px;font-size:12px;flex-shrink:0}
body.sohbera-platinum .friend-avatar>img{border-radius:13px}
body.sohbera-platinum .friend-copy b{font-size:11.5px;font-weight:850;color:#27434f}
body.sohbera-platinum .friend-copy small{font-size:9px;color:#7c909b;line-height:1.4}
body.sohbera-platinum .friend-actions button{
  width:30px;height:30px;border-radius:10px;border-color:#dbe8ea;
  background:#f8fbfc;color:#577b87;
}
body.sohbera-platinum .friend-actions button i{font-size:12px}
body.sohbera-platinum .friend-actions button:focus-visible,
body.sohbera-platinum .friend-row:focus-visible{outline:2px solid #258597;outline-offset:2px}
body.sohbera-platinum .groups-list>.group-empty{
  margin:8px;border:1px dashed #d1e3e6;border-radius:15px;
  padding:22px 15px;background:#fff;color:#728a95;font-size:11px;line-height:1.6;
}
body.sohbera-platinum .groups-list .group-room{min-height:62px;border-radius:14px}
body.sohbera-platinum .groups-list .group-room-avatar{border-radius:12px}

/* Shared presentation for Create Group / Group Info / Edit Profile */
body.sohbera-platinum .group-overlay{background:rgba(39,62,72,.32);backdrop-filter:blur(4px)}
body.sohbera-platinum .group-modal{
  color:var(--soc-text);border:1px solid #d9e7ea;border-radius:22px;
  background:var(--soc-bg);box-shadow:var(--soc-shadow);width:min(570px,calc(100vw - 26px));
  max-height:min(800px,calc(100dvh - 36px));
}
body.sohbera-platinum .group-modal .modal-head{
  min-height:70px;padding:13px 21px;border-bottom:1px solid #e2ebee;
  background:linear-gradient(110deg,#fff,#eff7f8);
}
body.sohbera-platinum .group-modal .modal-head small{
  color:#318a98;font-size:9px;letter-spacing:.17em;font-weight:900;
}
body.sohbera-platinum .group-modal .modal-head h2{
  font-size:21px;color:#22424f;font-weight:850;letter-spacing:-.04em;
}
body.sohbera-platinum .group-modal .modal-head>button{
  width:36px;height:36px;flex-basis:36px;background:#fff;
  border:1px solid #d9e7ea;border-radius:11px;color:#6b8792;
}
body.sohbera-platinum .group-modal .modal-head>button:hover{background:#ecf6f7;color:#236f80}
body.sohbera-platinum .group-modal .group-create-body{padding:21px;gap:18px;background:#fbfdfe}
body.sohbera-platinum .group-modal .group-avatar-preview{
  width:75px;height:75px;border:1px solid #cfe2e6;border-radius:21px;
  background:linear-gradient(140deg,#e5f1f3,#f8fbfc);color:#318695;
}
body.sohbera-platinum .group-modal .field>span{
  font-size:11.5px;font-weight:850;color:#496674;
}
body.sohbera-platinum .group-modal .field>input,
body.sohbera-platinum .group-modal .inline-field>input,
body.sohbera-platinum .group-modal .group-search,
body.sohbera-platinum .group-modal .group-add-member select{
  min-width:0;height:45px;font-size:12.5px;background:#f3f8f9;
  border:1px solid #dce9ec;border-radius:12px;color:#274652;padding:0 12px;
}
body.sohbera-platinum .group-modal :is(input,select,textarea):focus-visible{
  outline:2px solid #70b5bf;outline-offset:1px;
}
body.sohbera-platinum .group-modal .group-member-picker-head b{font-size:13px;color:#274550}
body.sohbera-platinum .group-modal .group-member-picker-head small{font-size:11px;color:#718997}
body.sohbera-platinum .group-modal .group-friend-picker{gap:8px}
body.sohbera-platinum .group-modal .group-friend-option{
  min-height:58px;padding:9px;border-radius:13px;border-color:#dce8eb;
  background:white;color:#274652;
}
body.sohbera-platinum .group-modal .group-friend-option:hover{background:#eef7f8;border-color:#c6dfe3}
body.sohbera-platinum .group-modal .group-friend-option.selected{background:#edf7f7;border-color:#85bdc5}
body.sohbera-platinum .group-modal .group-friend-option small{font-size:11px}
body.sohbera-platinum .group-modal .modal-actions{
  min-height:70px;padding:12px 20px;background:#f4f9fa;
  border-top:1px solid #e0eaed;
}
body.sohbera-platinum .group-modal :is(.soft-btn,.primary-btn){font-size:12px;border-radius:12px;min-height:42px}
body.sohbera-platinum .group-modal .soft-btn{background:white;border-color:#dce7ea;color:#567380}
body.sohbera-platinum .group-modal .primary-btn,
body.sohbera-platinum .group-modal :is(.inline-field,.group-add-member)>button{
  background:#258597;color:white;border-color:#258597;
}
/* Group info has several independent sections, so permit scrolling across all of them. */
body.sohbera-platinum .group-modal.group-info-modal{display:block;overflow-y:auto}
body.sohbera-platinum .group-info-modal .modal-head{position:sticky;top:0;z-index:3}
body.sohbera-platinum .group-info-modal .group-info-hero{
  padding:17px 20px;background:linear-gradient(140deg,#f0f8f8,#fff);
  border-bottom:1px solid #e1ebed;
}
body.sohbera-platinum .group-info-modal .group-info-hero b{font-size:19px;color:#214351}
body.sohbera-platinum .group-info-modal .group-info-hero span{font-size:12px;color:#758d97}
body.sohbera-platinum .group-info-modal .group-owner-tools{padding:18px 20px;gap:13px}
body.sohbera-platinum .group-info-modal .group-members-head{
  padding:18px 20px 10px;font-size:12px;color:#63808b;
}
body.sohbera-platinum .group-info-modal .group-members-head b{font-size:13px;color:#284955}
body.sohbera-platinum .group-info-modal .group-members{padding:0 20px 18px;gap:8px}
body.sohbera-platinum .group-info-modal .group-member-row{
  min-height:55px;padding:10px;border-radius:13px;
  border:1px solid #e1ebee;background:white;
}
body.sohbera-platinum .group-info-modal .group-member-copy b{font-size:12.5px}
body.sohbera-platinum .group-info-modal .group-member-copy small{font-size:10px}
body.sohbera-platinum .group-info-modal .modal-actions{position:sticky;bottom:0;z-index:2}
body.sohbera-platinum .group-info-modal :is(.danger-soft,.danger-btn){font-size:11px;border-radius:11px;min-height:39px}

/* Profile edit */
body.sohbera-platinum .profile-edit-modal{width:min(585px,calc(100vw - 26px))}
body.sohbera-platinum .profile-edit-body{padding:21px;overflow-y:auto}
body.sohbera-platinum .profile-edit-body>p{
  padding:13px 14px;margin:0 0 20px;background:#eaf5f6;
  border:1px solid #d2e7e9;border-radius:12px;color:#367d8a;
  font-size:11px;line-height:1.6;
}
body.sohbera-platinum .profile-edit-grid{gap:15px;grid-template-columns:minmax(0,1fr) 125px}
body.sohbera-platinum .profile-edit-grid .field:nth-child(3){grid-column:1/-1}
body.sohbera-platinum .profile-edit-grid input,
body.sohbera-platinum .profile-edit-grid textarea{
  background:#f3f8f9;border-color:#dce8eb;color:#2d4755;
  font-size:13px;border-radius:12px;
}
body.sohbera-platinum .profile-edit-grid input{height:44px}
body.sohbera-platinum .profile-edit-grid textarea{min-height:110px;padding:12px;line-height:1.55}
body.sohbera-platinum .profile-edit-grid .field>small{font-size:10px;color:#718b96}

/* Avatar chooser and cropper */
body.sohbera-platinum .avatar-manager-overlay{background:rgba(38,60,70,.34);backdrop-filter:blur(4px)}
body.sohbera-platinum .avatar-manager-card{
  width:min(640px,calc(100vw - 24px));max-height:min(790px,calc(100dvh - 24px));
  border:1px solid #d8e7ea;border-radius:22px;
  background:var(--soc-bg);box-shadow:var(--soc-shadow);
}
body.sohbera-platinum .avatar-manager-head{
  min-height:67px;height:67px;padding:0 21px;
  background:linear-gradient(110deg,#fff,#eef7f8);border-color:#e1eaed;
}
body.sohbera-platinum .avatar-manager-head small{font-size:9px;letter-spacing:.17em;color:#308998}
body.sohbera-platinum .avatar-manager-head b{font-size:18px;letter-spacing:-.025em;color:#234451}
body.sohbera-platinum .avatar-manager-head button{
  width:36px;height:36px;border-radius:11px;background:white;
  color:#65828b;border-color:#d7e5e8;
}
body.sohbera-platinum .avatar-manager-current{
  grid-template-columns:70px minmax(0,1fr);gap:14px;
  margin:18px 18px 13px;padding:15px;border:1px solid #dce8eb;
  border-radius:16px;background:linear-gradient(115deg,#eff8f8,#fff);
}
body.sohbera-platinum .avatar-manager-current-preview{
  width:70px;height:70px;border-radius:19px;border:3px solid white;
}
body.sohbera-platinum .avatar-manager-current small{font-size:9px;color:#738d96;letter-spacing:.13em}
body.sohbera-platinum .avatar-manager-current b{font-size:17px;color:#264753}
body.sohbera-platinum .avatar-manager-current span{font-size:11px;color:#6a8590;line-height:1.6}
body.sohbera-platinum .avatar-manager-tabs{gap:8px;padding:0 18px 14px}
body.sohbera-platinum .avatar-manager-tabs button{
  height:42px;border:1px solid #dce8eb;border-radius:12px;background:white;
  font-size:11.5px;color:#637d88;
}
body.sohbera-platinum .avatar-manager-tabs button.active{
  border-color:#a4cdd2;background:#e6f4f5;color:#267d8e;
}
body.sohbera-platinum .avatar-manager-pane{padding:0 18px 16px}
body.sohbera-platinum .avatar-crop-stage{
  width:min(340px,100%);border:1px solid #dce8eb;
  border-radius:19px;box-shadow:0 6px 18px rgba(39,72,84,.045);
}
body.sohbera-platinum .avatar-crop-empty{background:rgba(252,254,254,.96);padding:19px}
body.sohbera-platinum .avatar-crop-empty i{width:56px;height:56px;border-radius:17px;font-size:22px;background:#e6f4f5;color:#328b98}
body.sohbera-platinum .avatar-crop-empty b{font-size:14px;color:#254654}
body.sohbera-platinum .avatar-crop-empty span{font-size:11px;color:#6b8490;line-height:1.5}
body.sohbera-platinum .avatar-crop-empty button{height:42px;padding:0 17px;border-radius:12px;background:#258597;font-size:11.5px}
body.sohbera-platinum .avatar-crop-controls p{font-size:10px;line-height:1.55;color:#7a919b}
body.sohbera-platinum .avatar-crop-buttons button{height:38px;font-size:11px;border-radius:11px;background:white;border-color:#dae7e9}
body.sohbera-platinum .avatar-preset-note{margin-bottom:13px;font-size:11.5px;line-height:1.6;color:#6a818d}
body.sohbera-platinum .avatar-preset-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;max-height:310px;padding:5px}
body.sohbera-platinum .avatar-preset{border-color:#e3ecee;border-radius:15px;background:white;box-shadow:0 3px 12px rgba(38,70,81,.045)}
body.sohbera-platinum .avatar-preset.active{border-color:#258597;box-shadow:0 0 0 2px #d3ebee}
body.sohbera-platinum .avatar-manager-actions{
  padding:14px 18px;background:#f4f8f9;border-color:#dfebed;
}
body.sohbera-platinum .avatar-manager-actions button{height:42px;font-size:11px;border-radius:12px}
body.sohbera-platinum .avatar-manager-actions .primary{background:#258597}
body.sohbera-platinum .avatar-manager-actions :is(button,input):focus-visible{outline:2px solid #258597;outline-offset:2px}

/* Notifications & mentions: one matching popover design */
body.sohbera-platinum .notification-center{
  width:min(415px,calc(100vw - 26px));max-height:min(700px,calc(100dvh - var(--top) - 22px));
  border:1px solid #dce8eb;border-radius:19px;
  box-shadow:var(--soc-shadow);background:#fff;
}
body.sohbera-platinum .notification-center-head{
  min-height:68px;padding:12px 14px 12px 18px;
  background:linear-gradient(110deg,#fff,#eff7f8);border-color:#e3ecee;
}
body.sohbera-platinum .notification-center-head small{font-size:9px;letter-spacing:.16em;color:#328c9b}
body.sohbera-platinum .notification-center-head strong{font-size:17px;letter-spacing:-.035em;color:#274653}
body.sohbera-platinum .notification-center-actions button{
  width:34px;height:34px;background:#fff;border-color:#dae6e9;
  border-radius:11px;color:#6b8490;
}
body.sohbera-platinum .notification-filter{
  gap:8px;padding:10px 15px;border-color:#e2ebee;background:#f5f9fa;
}
body.sohbera-platinum .notification-filter button{
  height:33px;padding:0 12px;border:1px solid transparent;border-radius:10px;
  font-size:11px;color:#667f89;
}
body.sohbera-platinum .notification-filter button.active{
  background:white;border-color:#cfe0e4;color:#267b8b;
  box-shadow:0 3px 9px rgba(39,75,85,.045);
}
body.sohbera-platinum .notification-filter b{font-size:9px}
body.sohbera-platinum .notification-list{background:#fff;padding:5px 0}
body.sohbera-platinum .notification-item{
  margin:5px 11px;padding:13px 12px;gap:10px;border-radius:13px;
  background:#fff;border:1px solid #e2ecee;
  grid-template-columns:42px minmax(0,1fr) auto;
}
body.sohbera-platinum .notification-item:hover{background:#f3f9fa;border-color:#d0e4e7}
body.sohbera-platinum .notification-item.unread{background:#ecf7f8;border-color:#cce5e8}
body.sohbera-platinum .notification-item.unread:before{left:5px;top:17px}
body.sohbera-platinum .notification-item-icon{width:42px;height:42px;border-radius:13px}
body.sohbera-platinum .notification-item-copy strong{font-size:12px;line-height:1.4;color:#274653}
body.sohbera-platinum .notification-item-copy p{font-size:11px;line-height:1.55;color:#69828d}
body.sohbera-platinum .notification-item-copy time{font-size:9px;margin-top:7px;color:#849aa3}
body.sohbera-platinum .notification-empty{font-size:11.5px;line-height:1.6;min-height:180px;color:#738a95}
body.sohbera-platinum .notification-center-foot{
  min-height:54px;padding:10px 15px;background:#f4f8f9;border-color:#dfe9ec;
}
body.sohbera-platinum .notification-center-foot span{font-size:10px;color:#718893;line-height:1.45}
body.sohbera-platinum .notification-center-foot button{font-size:10.5px;color:#467885}
body.sohbera-platinum .notification-center :is(button,[tabindex]):focus-visible{
  outline:2px solid #258597;outline-offset:2px;
}

@media (max-width:760px){
  body.sohbera-platinum .friend-block{padding-left:5px;padding-right:5px}
  body.sohbera-platinum .friends-summary{padding-left:5px;padding-right:5px}
  body.sohbera-platinum .group-overlay{padding:8px;align-items:flex-end}
  body.sohbera-platinum .group-modal{
    width:100%;max-height:calc(100dvh - 18px);border-radius:19px 19px 0 0;
  }
  body.sohbera-platinum .group-modal .modal-head{min-height:61px;padding:10px 14px}
  body.sohbera-platinum .group-modal .modal-head h2{font-size:18px}
  body.sohbera-platinum .group-modal .group-create-body{padding:14px;gap:13px}
  body.sohbera-platinum .group-modal .group-avatar-preview{width:62px;height:62px;border-radius:17px}
  body.sohbera-platinum .group-modal .modal-actions{padding:9px 13px;min-height:60px}
  body.sohbera-platinum .group-info-modal .group-owner-tools,
  body.sohbera-platinum .group-info-modal .group-info-hero{padding:13px 14px}
  body.sohbera-platinum .group-info-modal .group-members{padding:0 14px 14px}
  body.sohbera-platinum .group-info-modal .group-members-head{padding:15px 14px 8px}
  body.sohbera-platinum .profile-edit-body{padding:14px}
  body.sohbera-platinum .profile-edit-grid{grid-template-columns:minmax(0,1fr) 94px;gap:10px}
  body.sohbera-platinum .avatar-manager-overlay{padding:0;align-items:end}
  body.sohbera-platinum .avatar-manager-card{width:100%;max-height:94dvh;border-radius:20px 20px 0 0}
  body.sohbera-platinum .avatar-manager-head{height:59px;min-height:59px;padding:0 14px}
  body.sohbera-platinum .avatar-manager-current{margin:12px;padding:10px;grid-template-columns:58px minmax(0,1fr)}
  body.sohbera-platinum .avatar-manager-current-preview{width:58px;height:58px}
  body.sohbera-platinum .avatar-manager-tabs{padding:0 12px 10px}
  body.sohbera-platinum .avatar-manager-pane{padding:0 12px 12px}
  body.sohbera-platinum .avatar-crop-stage{width:min(290px,calc(100vw - 40px))}
  body.sohbera-platinum .avatar-preset-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  body.sohbera-platinum .avatar-manager-actions{padding:10px 12px;grid-template-columns:auto 1fr auto}
  body.sohbera-platinum .avatar-manager-actions .secondary{display:none}
  body.sohbera-platinum .notification-center{
    top:62px;left:7px;right:7px;width:auto;max-height:calc(100dvh - 126px);border-radius:16px;
  }
  body.sohbera-platinum .notification-center-foot span{display:none}
}
@media (max-height:680px) and (min-width:761px){
  body.sohbera-platinum .avatar-crop-stage{width:min(250px,100%)}
  body.sohbera-platinum .group-modal .group-create-body{padding:12px 17px}
}
@media (prefers-reduced-motion:reduce){
  body.sohbera-platinum .group-overlay,
  body.sohbera-platinum .avatar-manager-overlay{transition:none!important}
}