/* ============================================================
LEONA AI — Social Mesajlasma Paneli (Faz 0 iskelet)
panel.html'in sag tarafinda split layout saglar.
Durum class'lari (body uzerinde):
- .social-active : panel render edilir, ana icerik daraltilir
- .social-collapsed : panel ince strip'e iner (44px)
- .social-drawer-open : tablet/mobile'da drawer ekranda goruntu
- .social-resizing : drag esnasinda cursor + selection lock
============================================================ */
:root {
--social-panel-width: 380px;
--social-panel-min-width: 280px;
--social-panel-max-width: 600px;
--social-strip-width: 44px;
--social-transition: width 250ms cubic-bezier(0.22, 1, 0.36, 1),
padding-right 250ms cubic-bezier(0.22, 1, 0.36, 1),
transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
/* ----- Sosyal liquid glass — semantik cam tint'ler -----
Hardcoded #22c55e / #ef4444 yerine tek kaynak. Yeşil = durum,
kırmızı = yıkıcı/uyarı (monokrom istisnaları). */
--sx-green-tint: rgba(34, 197, 94, 0.16);
--sx-green-line: rgba(34, 197, 94, 0.55);
--sx-green-text: #86efac;
--sx-green-tint-hi: rgba(34, 197, 94, 0.24);
--sx-red-tint: rgba(239, 68, 68, 0.14);
--sx-red-line: rgba(239, 68, 68, 0.50);
--sx-red-text: #fca5a5;
--sx-red-tint-hi: rgba(239, 68, 68, 0.22);
/* İmleç-takipli specular konuşlanması — panel-shell.js günceller */
--sx-mx: 50%;
--sx-my: 0%;
}
/* ============================================================
Liquid Glass — Sosyal panel ortak cam primitifleri
Kanonik tokens.css sistemini (Tier 1/2/3 + refraksiyon) tüketir.
Maksimum sadakat: gerçek backdrop-filter her yüzeyde.
Aşağıdaki "real glass" reçeteleri mevcut selektörlere yerinde
uygulanır; bu blok ortak parçaları (aura + keyframe) tanımlar.
============================================================ */
/* Panel arkası canlı monokrom aura — panel cam arka planı ile
içerik arasında yaşar (z-index:-1, içeriği yıkamaz). */
.social-aura {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
overflow: hidden;
/* İmleç parıltısı (radial, --sx-mx/my izler) + statik üst-sol specular */
background:
radial-gradient(440px circle at var(--sx-mx, 50%) var(--sx-my, 0%),
rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 36%, transparent 62%),
linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 44%);
/* Perf: pointer specular rAF ile zaten yumuşak; background transition'ı
kaldırıldı (her hareket sonrası büyük gradient repaint tween'i olmasın). */
}
.social-aura-orb {
position: absolute;
border-radius: 50%;
filter: blur(38px);
will-change: transform;
opacity: 0.5;
}
.social-aura-orb-1 {
width: 340px; height: 340px;
top: -14%; left: -20%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 70%);
animation: socialAuraDrift1 26s var(--ease-smooth, ease-in-out) infinite;
}
.social-aura-orb-2 {
width: 300px; height: 300px;
bottom: -12%; right: -16%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 70%);
animation: socialAuraDrift2 32s var(--ease-smooth, ease-in-out) infinite;
}
.social-aura-orb-3 {
width: 230px; height: 230px;
top: 44%; right: 2%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 72%);
animation: socialAuraDrift3 38s var(--ease-smooth, ease-in-out) infinite;
}
@keyframes socialAuraDrift1 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(34px, 46px, 0) scale(1.12); }
}
@keyframes socialAuraDrift2 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
50% { transform: translate3d(-40px, -28px, 0) scale(1); }
}
@keyframes socialAuraDrift3 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-26px, 34px, 0) scale(0.9); }
}
/* Ortak: tıklanabilir cam öğelerde sıvı spring morph (canonical .is-interactive eşi) */
.sx-morph {
transition:
transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
filter var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.sx-morph:hover { transform: translateY(-1px) scale(1.01); filter: brightness(1.06); }
.sx-morph:active { transform: scale(0.97); filter: brightness(0.95); transition-duration: 90ms; }
/* ============================================================
Panel base — Floating card (sol sidebar paraleli, Tier 2 liquid glass)
============================================================ */
.social-panel {
position: fixed;
top: 12px;
right: 12px;
bottom: 12px;
width: var(--social-panel-width);
height: calc(100vh - 24px);
max-width: calc(100vw - 24px);
/* Tier 2 liquid glass: linear-gradient tint over base + backdrop-filter
(blur + saturate + brightness + SVG refraction). Tokens var. */
background:
linear-gradient(180deg, var(--glass-2-tint-top, rgba(28, 28, 32, 0.55)) 0%, var(--glass-2-tint-bot, rgba(20, 20, 24, 0.72)) 100%),
var(--glass-2-bg, rgba(20, 20, 24, 0.66));
-webkit-backdrop-filter: blur(var(--glass-2-blur, 22px)) saturate(var(--glass-2-saturate, 1.5)) brightness(1.04);
backdrop-filter: blur(var(--glass-2-blur, 22px)) saturate(var(--glass-2-saturate, 1.5)) brightness(1.04) var(--glass-2-refract, url(#liquid-refraction-2));
border: 1px solid var(--glass-2-border, rgba(255, 255, 255, 0.08));
border-radius: 20px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15), /* ust parlama */
inset 0 -1px 0 rgba(0, 0, 0, 0.35), /* alt golge */
inset 1px 0 0 rgba(255, 255, 255, 0.06), /* sol kenar */
inset -1px 0 0 rgba(0, 0, 0, 0.18), /* sag kenar */
inset 0 8px 24px -8px rgba(255, 255, 255, 0.08), /* ust bloom */
inset 0 -12px 32px -12px rgba(0, 0, 0, 0.40), /* dip derinlik */
0 8px 28px rgba(0, 0, 0, 0.32), /* yakin golge */
0 24px 80px rgba(0, 0, 0, 0.45); /* derin lift */
overflow: hidden; /* border-radius ile icerik clip */
z-index: 90;
display: none;
flex-direction: column;
transition: var(--social-transition);
will-change: width, transform;
}
.social-panel[aria-hidden="true"] {
display: none !important;
}
body.social-active .social-panel {
display: flex;
}
/* Body padding-right: ana icerik daralir. Panel sag kenardan 12px
ic-disi olmak uzere 24px ekstra bosluk hesaplanir. */
body.social-active {
padding-right: calc(var(--social-panel-width) + 24px);
transition: padding-right 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Collapsed: panel tamamen gizli, sag-ust floating toggle butonu gorunur */
body.social-active.social-collapsed {
padding-right: 0;
}
body.social-active.social-collapsed .social-panel {
transform: translateX(calc(100% + 24px));
pointer-events: none;
}
body.social-active.social-collapsed .social-resize-handle {
display: none;
}
/* ============================================================
Strip (collapsed) — dikey label + bildirim badge
============================================================ */
.social-panel-strip {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
cursor: pointer;
gap: 14px;
padding: 20px 0;
user-select: none;
-webkit-user-select: none;
}
body.social-active.social-collapsed .social-panel-strip {
display: flex;
}
/* Plan G — Collapsed strip Apple Dock app-icon estetigi:
glass kabarcik + breathing glow + presence/unread dots + slide tooltip */
/* ============================================================
Sag-ust floating toggle butonu — sol sidebar toggle ile paralel.
Panel kapaliyken gorunur, tiklaninca acar. Panel acikken gizli.
============================================================ */
.social-toggle-btn {
position: fixed;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
border-radius: var(--radius-sm, 14px);
background:
linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%),
var(--glass-3-bg, rgba(28, 28, 32, 0.78));
-webkit-backdrop-filter: blur(12px) saturate(1.4);
backdrop-filter: blur(12px) saturate(1.4);
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
color: var(--text-primary, #e8e8ea);
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
z-index: 1001;
opacity: 0;
transform: translateY(-8px) scale(0.92);
pointer-events: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 2px 8px rgba(0, 0, 0, 0.30);
transition: transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
opacity var(--motion-base, 240ms) ease,
filter var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.social-toggle-btn svg {
width: 20px;
height: 20px;
position: relative;
z-index: 1;
}
/* Toggle butonunda Leona Connect markasi (img/lc.png) */
.social-toggle-btn .social-toggle-logo {
width: 26px;
height: 26px;
object-fit: contain;
position: relative;
z-index: 1;
}
/* Yetkili kullanici + panel kapali iken gorunur */
body.social-active.social-collapsed .social-toggle-btn {
display: inline-flex;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Tablet/mobile: drawer kapali = panel gizli, toggle gorunsun */
@media (max-width: 1279px) {
body.social-active:not(.social-drawer-open) .social-toggle-btn {
display: inline-flex;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
}
.social-toggle-btn:hover {
border-color: var(--stroke-strong, rgba(255, 255, 255, 0.18));
transform: translateY(-1px) scale(1.02);
filter: brightness(1.08);
}
.social-toggle-btn:active {
transform: scale(0.96);
filter: brightness(0.94);
}
.social-toggle-btn:focus-visible {
outline: 2px solid var(--ink-100, #fff);
outline-offset: 2px;
}
/* Yesil unread dot — toggle uzerinde sag-ust */
.social-toggle-unread-dot {
position: absolute;
top: -3px;
right: -3px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #22c55e;
border: 2px solid rgba(20, 20, 24, 0.98);
opacity: 0;
transform: scale(0.4);
pointer-events: none;
transition: opacity 200ms ease, transform 240ms cubic-bezier(0.32, 0.72, 0, 1.05);
box-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
}
.social-toggle-unread-dot.visible {
opacity: 1;
transform: scale(1);
animation: social-strip-unread-pulse 2s ease-in-out infinite;
}
/* ============================================================
Eski strip stilleri (artik kullanilmayan) — geriye uyum
icin tutuluyor; HTML'de strip olmadigi icin etkisiz.
============================================================ */
/* Sade icon wrapper — yuvarlak cerceve YOK, sadece pozisyon + dot icin */
.social-strip-icon-wrapper {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
background: transparent;
border: none;
box-shadow: none;
transition: transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
filter var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
animation: social-strip-bounce-in 520ms cubic-bezier(0.32, 0.72, 0, 1.05) both;
}
.social-panel-strip:hover .social-strip-icon-wrapper {
transform: scale(1.14);
filter: brightness(1.12);
}
.social-panel-strip:active .social-strip-icon-wrapper {
transform: scale(0.94);
filter: brightness(0.94);
}
@keyframes social-strip-bounce-in {
0% { opacity: 0; transform: scale(0.6); }
60% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: scale(1); }
}
/* Icon (chat svg) — sade, daha buyuk cunku cerceve yok */
.social-strip-icon {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-primary, #e8e8ea);
opacity: 0.88;
}
.social-strip-icon svg {
width: 26px;
height: 26px;
display: block;
}
/* Unread dot — sag ust, default gizli, .visible olunca YESIL pulse
(sadece mesaj/istek gelince gorunur, okununca kaybolur) */
.social-strip-unread-dot {
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #22c55e;
border: 2px solid rgba(20, 20, 24, 0.98);
z-index: 3;
opacity: 0;
transform: scale(0.4);
pointer-events: none;
transition: opacity 200ms ease, transform 240ms cubic-bezier(0.32, 0.72, 0, 1.05);
box-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
}
.social-strip-unread-dot.visible {
opacity: 1;
transform: scale(1);
animation: social-strip-unread-pulse 2s ease-in-out infinite;
}
@keyframes social-strip-unread-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.50); }
50% { box-shadow: 0 0 14px rgba(34, 197, 94, 0.85); }
}
/* Hover tooltip — sol tarafa dogru slide eden glass pill */
.social-strip-tooltip {
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(8px);
background:
linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%),
var(--glass-3-bg, rgba(28, 28, 32, 0.78));
border: 1px solid var(--glass-3-border, rgba(255, 255, 255, 0.10));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
padding: 6px 12px;
border-radius: var(--radius-pill, 999px);
font-size: 12px;
font-weight: 600;
color: var(--text-primary, #e8e8ea);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 6px 18px rgba(0, 0, 0, 0.40);
z-index: 100;
}
.social-panel-strip:hover .social-strip-tooltip,
.social-panel-strip:focus-visible .social-strip-tooltip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* ============================================================
Header
============================================================ */
.social-panel-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
/* Üstten aydınlanan cam başlık şeridi */
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
border-bottom: 1px solid var(--stroke-hairline, rgba(255, 255, 255, 0.06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 0 rgba(0, 0, 0, 0.25);
flex-shrink: 0;
gap: 8px;
}
.social-panel-header-content {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.social-panel-title {
font-size: 14px;
font-weight: 600;
margin: 0;
color: var(--text-primary, #e8e8e8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Leona Connect wordmark (img/leonaconnect.png). Kaynak 3000x3000 seffaf;
icerik bandi ~2.4:1 yatay kilit, ust/alt ~%30 seffaf bosluk. background-size
ile tum kareyi olcekleyip 82x34 kutuya ortalayarak boslugu kirpariz. */
.social-brand-logo {
display: block;
width: 82px;
height: 34px;
background: url('../img/leonaconnect.png') center / 86px 86px no-repeat;
}
.social-panel-icon-btn {
position: relative;
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary, #b0b0b0);
width: 32px;
height: 32px;
border-radius: var(--radius-xs, 8px);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
color 150ms ease,
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
box-shadow var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
padding: 0;
flex-shrink: 0;
}
.social-panel-icon-btn:hover {
background:
linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%),
var(--glass-3-bg, rgba(28, 28, 32, 0.78));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4)) var(--glass-3-refract, url(#liquid-refraction-3));
border-color: var(--stroke-subtle, rgba(255, 255, 255, 0.10));
color: var(--text-primary, #e8e8e8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.28);
transform: translateY(-1px);
}
.social-panel-icon-btn:active {
transform: scale(0.94);
filter: brightness(0.95);
}
.social-panel-icon-btn:focus-visible {
outline: 2px solid var(--ink-100, #fff);
outline-offset: 2px;
}
.social-panel-icon-btn svg {
width: 18px;
height: 18px;
display: block;
}
/* ============================================================
Content
============================================================ */
.social-panel-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
display: flex;
flex-direction: column;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.social-panel-content::-webkit-scrollbar { width: 6px; }
.social-panel-content::-webkit-scrollbar-track { background: transparent; }
.social-panel-content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.06);
border-radius: 99px;
border: 1px solid transparent;
background-clip: padding-box;
transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-panel-content::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.18);
background-clip: padding-box;
}
.social-panel-content::-webkit-scrollbar-thumb:active {
background: rgba(255, 255, 255, 0.3);
background-clip: padding-box;
}
.social-coming-soon {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 24px;
color: var(--text-secondary, #b0b0b0);
}
.social-coming-soon-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.social-coming-soon-icon svg {
width: 28px;
height: 28px;
color: var(--text-secondary, #b0b0b0);
}
.social-coming-soon h3 {
margin: 0 0 8px;
font-size: 16px;
color: var(--text-primary, #e8e8e8);
font-weight: 600;
}
.social-coming-soon p {
margin: 0;
font-size: 13px;
line-height: 1.5;
max-width: 280px;
}
/* ============================================================
Resize handle (sol kenar) — desktop only
============================================================ */
.social-resize-handle {
position: absolute;
top: 0;
left: -3px;
width: 6px;
height: 100%;
cursor: col-resize;
background: transparent;
z-index: 10;
transition: background 200ms ease;
touch-action: none;
}
.social-resize-handle:hover,
.social-resize-handle.active {
background: rgba(255, 255, 255, 0.18);
}
.social-resize-handle::after {
content: '';
position: absolute;
top: 50%;
left: 2px;
width: 2px;
height: 36px;
background: var(--border-color, rgba(255, 255, 255, 0.18));
border-radius: 2px;
transform: translateY(-50%);
opacity: 0;
transition: opacity 200ms ease;
}
.social-resize-handle:hover::after,
.social-resize-handle.active::after {
opacity: 1;
}
body.social-resizing {
cursor: col-resize !important;
user-select: none !important;
-webkit-user-select: none !important;
}
body.social-resizing * {
user-select: none !important;
-webkit-user-select: none !important;
}
/* ============================================================
Backdrop (tablet/mobile drawer mode)
============================================================ */
.social-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 89;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}
/* ============================================================
Tablet (769–1279px): drawer overlay (sagdan kayar)
============================================================ */
@media (max-width: 1279px) and (min-width: 769px) {
body.social-active {
padding-right: 0;
}
/* Floating card pozisyonu KORUNUR (top/right/bottom: 12px, radius: 20px),
panel sadece drawer disinda tamamen ekran disina cikar */
.social-panel {
transform: translateX(calc(100% + 24px));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
inset 0 8px 24px -8px rgba(255, 255, 255, 0.08),
inset 0 -12px 32px -12px rgba(0, 0, 0, 0.40),
0 16px 48px rgba(0, 0, 0, 0.55),
0 32px 96px rgba(0, 0, 0, 0.40);
}
body.social-active.social-drawer-open .social-panel {
transform: translateX(0);
}
/* Tablet'te collapsed = drawer kapali demek; genel collapsed kurali
(translateX(calc(100% + 24px))) zaten panel'i ekran disina atiyor */
body.social-active.social-drawer-open .social-backdrop {
opacity: 1;
pointer-events: auto;
}
.social-resize-handle {
display: none;
}
}
/* ============================================================
Mobile (<=768px): full-screen drawer
Floating card layout devre disi — viewport'u tam kaplar.
============================================================ */
@media (max-width: 768px) {
body.social-active {
padding-right: 0;
}
.social-panel {
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
max-width: 100vw;
border-radius: 0;
border-left: none;
transform: translateX(100%);
box-shadow: none;
}
body.social-active.social-drawer-open .social-panel {
transform: translateX(0);
}
body.social-active.social-collapsed .social-panel {
transform: translateX(100%);
}
body.social-active.social-drawer-open .social-backdrop {
opacity: 1;
pointer-events: auto;
}
.social-resize-handle {
display: none;
}
}
/* ============================================================
Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
body.social-active,
.social-panel,
.social-backdrop {
transition: none;
}
.social-strip-badge.has-unread {
animation: none;
}
}
/* ============================================================
FAZ 1: Sekme + Liste + Modal stilleri
============================================================ */
/* Header'a + butonu icin yardimci */
.social-panel-header .social-header-actions {
display: flex;
align-items: center;
gap: 4px;
}
/* Sekme bari WRAP — fade gradient'leri overflow scroll'a tabi olmasın diye
ayrı bir position:relative parent gerekli. JS scroll state'i izler ve
data-can-scroll-left/right attribute'larıyla fade'leri toggle eder. */
.social-tabs-wrap {
position: relative;
margin: 10px 12px 8px;
border-radius: var(--radius-pill, 999px);
flex-shrink: 0;
/* Mobil için kenarlardan rahat dokunma — wrap padding artırıldı */
isolation: isolate;
}
/* Sol/sağ fade gölgeleri tamamen kaldırıldı */
.social-tabs-wrap::before,
.social-tabs-wrap::after {
display: none !important;
}
/* Sekme bari — yatay scrollable flex (6+ tab destekler, taşmaz) */
.social-tabs {
position: relative;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding: 4px;
border-radius: var(--radius-pill, 999px);
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.40),
inset 0 -1px 0 rgba(255, 255, 255, 0.04);
gap: 2px;
/* Scrollbar gizle */
-ms-overflow-style: none !important;
scrollbar-width: none !important;
scroll-behavior: smooth;
/* Mobil dahil her yerde yumuşak yatay snap */
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
touch-action: pan-x; /* dikey kaydırma sayfa, yatay tabs */
overscroll-behavior-inline: contain; /* mobilde scroll chain bounce yok */
}
@media (max-width: 540px) {
.social-tabs {
padding: 5px; /* dokunma alanı biraz daha geniş */
}
}
.social-tabs::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.social-tabs::-webkit-scrollbar-track,
.social-tabs::-webkit-scrollbar-thumb {
display: none !important;
background: transparent !important;
}
/* Eski kayan pill indicator yerine her sekmenin kendi aktif arka planı vardır */
.social-tab-indicator {
display: none;
}
.social-tab {
position: relative;
flex: 0 0 auto; /* esnek değil, içerik kadar yer kapla */
white-space: nowrap;
padding: 7px 14px;
background: transparent;
border: 0;
color: var(--text-secondary, #a1a1aa);
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease,
transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
border-radius: var(--radius-pill, 999px);
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
scroll-snap-align: center;
}
.social-tab:active { transform: scale(0.95); }
.social-tab:hover:not([aria-selected="true"]) {
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.04);
}
/* Mobilde daha rahat dokunma (min ~44px touch target) */
@media (max-width: 540px) {
.social-tab {
padding: 9px 16px;
font-size: 12.5px;
min-height: 36px;
}
}
/* Aktif sekme: liquid glass pill (refraksiyon + specular hilali) */
.social-tab[aria-selected="true"] {
color: var(--text-primary, #e8e8ea);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3) var(--glass-3-refract, url(#liquid-refraction-3));
border-color: var(--stroke-strong, rgba(255, 255, 255, 0.18));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.25);
}
.social-tab[aria-selected="true"]::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 62%);
mix-blend-mode: overlay;
opacity: 0.6;
}
.social-tab:focus-visible {
outline: 2px solid var(--ink-100, #fff);
outline-offset: 2px;
}
.social-tab-badge {
background: rgba(255, 255, 255, 0.92);
color: var(--ink-0, #000000);
font-size: 9px;
font-weight: 700;
padding: 1px 5px;
border-radius: 999px;
min-width: 14px;
text-align: center;
line-height: 1.4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* Sekme paneli */
.social-tab-panel {
flex: 1;
display: none;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.social-tab-panel.active {
display: flex;
}
.social-tab-panel::-webkit-scrollbar { width: 6px; }
.social-tab-panel::-webkit-scrollbar-track { background: transparent; }
.social-tab-panel::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.06);
border-radius: 99px;
border: 1px solid transparent;
background-clip: padding-box;
transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-tab-panel::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.18);
background-clip: padding-box;
}
.social-tab-panel::-webkit-scrollbar-thumb:active {
background: rgba(255, 255, 255, 0.3);
background-clip: padding-box;
}
/* Liste itemleri (arkadas, istek, engelli) */
.social-list {
display: flex;
flex-direction: column;
padding: 8px;
gap: 4px;
}
.social-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border-radius: var(--radius-sm, 14px);
background: transparent;
border: 1px solid transparent;
transition: background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
box-shadow var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
/* Hover / seçili: gerçek Tier 3 cam satır (refraksiyon + specular rim) */
.social-item:hover,
.social-item.active,
.social-item[aria-current="true"] {
background:
linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%),
var(--glass-3-bg, rgba(28, 28, 32, 0.78));
/* Perf: hover satırda SVG refraksiyon yok (scroll'da tetiklenir) */
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
border-color: var(--stroke-subtle, rgba(255, 255, 255, 0.10));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.28),
0 4px 14px rgba(0, 0, 0, 0.26);
transform: translateY(-1px);
}
.social-item.active,
.social-item[aria-current="true"] {
border-color: var(--stroke-strong, rgba(255, 255, 255, 0.18));
}
.social-item:active { transform: scale(0.99); filter: brightness(0.97); }
.social-item-avatar {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
/* Cam disk: hafif tint + iç parlama rim + specular */
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.04) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -2px 4px rgba(0, 0, 0, 0.30),
0 1px 3px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: var(--text-primary, #e8e8e8);
flex-shrink: 0;
text-transform: uppercase;
user-select: none;
overflow: hidden;
}
.social-item-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.social-item-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.social-item-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary, #e8e8e8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.social-item-email {
font-size: 11px;
color: var(--text-secondary, #b0b0b0);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.social-item-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.social-item-btn {
position: relative;
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary, #b0b0b0);
width: 30px;
height: 30px;
border-radius: var(--radius-xs, 8px);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
color 150ms ease,
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
box-shadow var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.social-item-btn:hover {
background:
linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%),
var(--glass-3-bg, rgba(28, 28, 32, 0.78));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
border-color: var(--stroke-subtle, rgba(255, 255, 255, 0.10));
color: var(--text-primary, #e8e8e8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.26);
transform: translateY(-1px);
}
.social-item-btn:active { transform: scale(0.92); }
.social-item-btn:focus-visible {
outline: 2px solid var(--ink-100, #fff);
outline-offset: 2px;
}
.social-item-btn.accept {
background: var(--sx-green-tint, rgba(34, 197, 94, 0.16));
border-color: var(--sx-green-line, rgba(34, 197, 94, 0.40));
color: var(--sx-green-text, #86efac);
}
.social-item-btn.accept:hover {
background: var(--sx-green-tint-hi, rgba(34, 197, 94, 0.24));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.5);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.5);
color: #bbf7d0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.26);
}
.social-item-btn.reject,
.social-item-btn.danger {
background: var(--sx-red-tint, rgba(239, 68, 68, 0.14));
border-color: var(--sx-red-line, rgba(239, 68, 68, 0.40));
color: var(--sx-red-text, #fca5a5);
}
.social-item-btn.reject:hover,
.social-item-btn.danger:hover {
background: var(--sx-red-tint-hi, rgba(239, 68, 68, 0.22));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.5);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.5);
color: #fecaca;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.26);
}
.social-item-btn svg {
width: 16px;
height: 16px;
display: block;
}
.social-item-pill {
font-size: 10px;
color: var(--text-secondary, #b0b0b0);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid var(--stroke-hairline, rgba(255, 255, 255, 0.06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
padding: 2px 8px;
border-radius: var(--radius-pill, 999px);
white-space: nowrap;
}
/* Bos state */
.social-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
color: var(--text-secondary, #b0b0b0);
flex: 1;
}
.social-empty-icon {
position: relative;
width: 56px;
height: 56px;
border-radius: 50%;
/* Cam disk: tint + iç parlama + alt derinlik + specular */
background:
linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%),
var(--glass-3-bg, rgba(28, 28, 32, 0.78));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4)) var(--glass-3-refract, url(#liquid-refraction-3));
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -3px 8px rgba(0, 0, 0, 0.30),
0 6px 18px rgba(0, 0, 0, 0.30);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.social-empty-icon::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.04) 42%, transparent 60%);
mix-blend-mode: overlay;
opacity: 0.6;
}
.social-empty-icon svg {
width: 24px;
height: 24px;
color: var(--text-secondary, #b0b0b0);
}
.social-empty h4 {
margin: 0 0 6px;
font-size: 14px;
color: var(--text-primary, #e8e8e8);
font-weight: 600;
}
.social-empty p {
margin: 0;
font-size: 12px;
line-height: 1.5;
max-width: 240px;
}
/* Boş durum aksiyon butonu — "yeni sohbet" cam stiliyle aynı hizada
(dolu beyaz buton kaldırıldı, liquid glass kapsül). */
.social-empty-action {
position: relative;
overflow: hidden;
margin-top: 14px;
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary, #fff);
border: 1px solid var(--stroke-strong, rgba(255, 255, 255, 0.16));
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4) var(--glass-3-refract, url(#liquid-refraction-3));
padding: 9px 18px;
border-radius: var(--radius-sm, 14px);
font-size: 12px;
font-weight: 600;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
0 2px 6px rgba(0, 0, 0, 0.25),
0 8px 24px rgba(0, 0, 0, 0.20);
transition: transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
filter var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.social-empty-action::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 55%);
}
.social-empty-action:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.26);
}
.social-empty-action:active { transform: scale(0.97); filter: brightness(0.92); }
/* Loading state — yumuşak shimmer (skeleton hissi) */
.social-loading {
padding: 24px;
text-align: center;
color: var(--text-secondary, #b0b0b0);
font-size: 12px;
background: linear-gradient(100deg,
rgba(255, 255, 255, 0.30) 0%,
rgba(255, 255, 255, 0.70) 50%,
rgba(255, 255, 255, 0.30) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: socialLoadingShimmer 1.6s linear infinite;
}
@keyframes socialLoadingShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Davet kartlari — Tier 3 cam kart */
.social-invite-card {
position: relative;
background:
linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%),
var(--glass-3-bg, rgba(28, 28, 32, 0.78));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
border: 1px solid var(--glass-3-border, rgba(255, 255, 255, 0.10));
border-radius: var(--radius-sm, 14px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.30),
0 4px 14px rgba(0, 0, 0, 0.24);
padding: 12px;
margin: 0 8px 8px;
display: flex;
flex-direction: column;
gap: 10px;
}
.social-invite-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 42%, transparent 58%);
mix-blend-mode: overlay;
opacity: 0.55;
}
.social-invite-card > * { position: relative; z-index: 1; }
.social-invite-link {
display: flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.30);
border: 1px solid var(--stroke-hairline, rgba(255, 255, 255, 0.06));
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
border-radius: var(--radius-xs, 8px);
padding: 8px 10px;
font-family: var(--font-mono, ui-monospace, 'JetBrains Mono', monospace);
font-size: 11px;
color: var(--text-secondary, #b0b0b0);
overflow: hidden;
}
.social-invite-link-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: all;
}
.social-invite-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 11px;
color: var(--text-secondary, #b0b0b0);
}
.social-invite-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid var(--stroke-hairline, rgba(255, 255, 255, 0.06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
padding: 3px 8px;
border-radius: var(--radius-pill, 999px);
}
.social-invite-actions {
display: flex;
gap: 6px;
}
.social-invite-actions .social-btn {
flex: 1;
}
/* Form ogeleri (modal icinde) */
.social-form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.social-form-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary, #b0b0b0);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.social-input,
.social-select {
width: 100%;
/* Cam inset alan: koyu çukur + iç gölge + ince üst parlama */
background: rgba(0, 0, 0, 0.28);
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
border-radius: var(--radius-xs, 8px);
padding: 10px 12px;
font-size: 13px;
color: var(--text-primary, #e8e8e8);
outline: none;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
transition: border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
box-shadow var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
font-family: inherit;
}
.social-input:focus,
.social-select:focus {
border-color: var(--stroke-focus, rgba(255, 255, 255, 0.60));
background: rgba(0, 0, 0, 0.36);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.social-input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.social-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b0b0b0' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 8px;
padding-right: 36px;
}
.social-input-row {
display: flex;
gap: 8px;
}
.social-input-row > * {
flex: 1;
}
/* Buton stilleri (sosyal panel ozel) */
.social-btn {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
color: var(--text-primary, #e8e8e8);
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
padding: 8px 14px;
border-radius: var(--radius-xs, 8px);
font-size: 12px;
font-weight: 600;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
transition: background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
opacity 150ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: inherit;
}
.social-btn:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
border-color: var(--stroke-strong, rgba(255, 255, 255, 0.18));
transform: translateY(-1px);
}
.social-btn:active { transform: scale(0.97); filter: brightness(0.94); }
.social-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Primary buton — full-white kalkti, sol sidebar .btn-new-chat pattern'i */
.social-btn.primary {
background: rgba(255, 255, 255, 0.10);
color: var(--text-primary, #e8e8ea);
border: 1px solid rgba(255, 255, 255, 0.18);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
0 2px 6px rgba(0, 0, 0, 0.22),
0 6px 16px rgba(0, 0, 0, 0.18);
transition: transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
filter var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.social-btn.primary::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
pointer-events: none;
}
.social-btn.primary > * { position: relative; z-index: 1; }
.social-btn.primary:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.28);
transform: translateY(-1px);
filter: brightness(1.06);
}
.social-btn.primary:active {
transform: scale(0.985);
filter: brightness(0.92);
}
.social-btn.danger {
background: var(--sx-red-tint, rgba(239, 68, 68, 0.15));
color: var(--sx-red-text, #fca5a5);
border-color: var(--sx-red-line, rgba(239, 68, 68, 0.40));
}
.social-btn.danger:hover {
background: var(--sx-red-tint-hi, rgba(239, 68, 68, 0.25));
border-color: rgba(239, 68, 68, 0.55);
}
/* Modal */
.social-modal-backdrop {
position: fixed;
inset: 0;
background: var(--modal-scrim) !important;
-webkit-backdrop-filter: var(--modal-scrim-filter);
backdrop-filter: var(--modal-scrim-filter);
z-index: var(--z-social, 10000);
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
padding: 20px;
}
.social-modal-backdrop.visible {
display: flex;
opacity: 1;
}
/* Monokrom macro glass + gerçek kırılma (mavi ton kaldırıldı) */
.social-modal {
position: relative;
isolation: isolate;
background:
linear-gradient(180deg, var(--glass-1-tint-top, rgba(28, 28, 32, 0.45)) 0%, var(--glass-1-tint-bot, rgba(20, 20, 24, 0.60)) 100%),
var(--glass-1-bg, rgba(15, 15, 18, 0.55)) !important;
border: 1px solid var(--glass-1-border, rgba(255, 255, 255, 0.05)) !important;
border-radius: var(--radius-md, 22px) !important;
padding: 24px;
width: 100%;
max-width: 420px;
max-height: 85vh;
overflow-y: auto;
-webkit-backdrop-filter: blur(var(--glass-1-blur, 36px)) saturate(var(--glass-1-saturate, 1.8)) brightness(1.05);
backdrop-filter: blur(var(--glass-1-blur, 36px)) saturate(var(--glass-1-saturate, 1.8)) brightness(1.05) var(--glass-1-refract);
box-shadow: var(--glass-card-shadow) !important;
will-change: var(--gpu-will-change);
transform: var(--gpu-transform);
opacity: 0;
}
.social-modal::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background: var(--glass-specular);
mix-blend-mode: overlay;
opacity: 0.78;
}
/* Mobil gestural drag-handle (yalnız CSS) */
@media (max-width: 480px) {
.social-modal::after {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
pointer-events: none;
z-index: 2;
}
}
.social-modal-backdrop.visible .social-modal {
animation: glassSpringEntrance 0.38s var(--ease-spring) forwards;
}
.social-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 12px;
}
.social-modal-title {
font-size: 16px;
font-weight: 600;
margin: 0;
color: var(--text-primary, #e8e8e8);
}
.social-modal-close {
position: relative;
z-index: 2;
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary, #b0b0b0);
width: 32px;
height: 32px;
border-radius: var(--radius-xs, 8px);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
color 150ms ease,
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
padding: 0;
flex-shrink: 0;
}
.social-modal-close:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
border-color: var(--stroke-subtle, rgba(255, 255, 255, 0.10));
color: var(--text-primary, #e8e8e8);
transform: translateY(-1px);
}
.social-modal-close:active { transform: scale(0.92); }
.social-modal-close svg {
width: 18px;
height: 18px;
}
.social-modal-body {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Ultra-thin glass scrollbar for modal scrollable containers and the modal itself */
.social-modal::-webkit-scrollbar,
#socialNewDmFriendList::-webkit-scrollbar,
#socialGroupMembersList::-webkit-scrollbar,
#socialGroupPinnedList::-webkit-scrollbar,
#socialAddMembersFriendList::-webkit-scrollbar,
#socialNewGroupFriendList::-webkit-scrollbar,
#socialForwardFriendList::-webkit-scrollbar,
#socialPinnedListContent::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.social-modal::-webkit-scrollbar-track,
#socialNewDmFriendList::-webkit-scrollbar-track,
#socialGroupMembersList::-webkit-scrollbar-track,
#socialGroupPinnedList::-webkit-scrollbar-track,
#socialAddMembersFriendList::-webkit-scrollbar-track,
#socialNewGroupFriendList::-webkit-scrollbar-track,
#socialForwardFriendList::-webkit-scrollbar-track,
#socialPinnedListContent::-webkit-scrollbar-track {
background: transparent;
}
.social-modal::-webkit-scrollbar-thumb,
#socialNewDmFriendList::-webkit-scrollbar-thumb,
#socialGroupMembersList::-webkit-scrollbar-thumb,
#socialGroupPinnedList::-webkit-scrollbar-thumb,
#socialAddMembersFriendList::-webkit-scrollbar-thumb,
#socialNewGroupFriendList::-webkit-scrollbar-thumb,
#socialForwardFriendList::-webkit-scrollbar-thumb,
#socialPinnedListContent::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
border-radius: 99px;
border: 1px solid transparent;
background-clip: padding-box;
}
.social-modal::-webkit-scrollbar-thumb:hover,
#socialNewDmFriendList::-webkit-scrollbar-thumb:hover,
#socialGroupMembersList::-webkit-scrollbar-thumb:hover,
#socialGroupPinnedList::-webkit-scrollbar-thumb:hover,
#socialAddMembersFriendList::-webkit-scrollbar-thumb:hover,
#socialNewGroupFriendList::-webkit-scrollbar-thumb:hover,
#socialForwardFriendList::-webkit-scrollbar-thumb:hover,
#socialPinnedListContent::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.18);
background-clip: padding-box;
}
.social-modal::-webkit-scrollbar-thumb:active,
#socialNewDmFriendList::-webkit-scrollbar-thumb:active,
#socialGroupMembersList::-webkit-scrollbar-thumb:active,
#socialGroupPinnedList::-webkit-scrollbar-thumb:active,
#socialAddMembersFriendList::-webkit-scrollbar-thumb:active,
#socialNewGroupFriendList::-webkit-scrollbar-thumb:active,
#socialForwardFriendList::-webkit-scrollbar-thumb:active,
#socialPinnedListContent::-webkit-scrollbar-thumb:active {
background: rgba(255, 255, 255, 0.3);
background-clip: padding-box;
}
/* Firefox support */
.social-modal,
#socialNewDmFriendList,
#socialGroupMembersList,
#socialGroupPinnedList,
#socialAddMembersFriendList,
#socialNewGroupFriendList,
#socialForwardFriendList,
#socialPinnedListContent {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.social-modal-actions {
display: flex;
gap: 8px;
margin-top: 20px;
justify-content: flex-end;
}
.social-modal-actions .social-btn {
min-width: 90px;
}
/* Davet kabul modal'inda davet sahibi bilgisi */
.social-invite-preview {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: rgba(255, 255, 255, 0.04);
border-radius: 12px;
border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}
.social-invite-preview .social-item-avatar {
width: 48px;
height: 48px;
font-size: 18px;
}
.social-invite-preview-info {
flex: 1;
min-width: 0;
}
.social-invite-preview-info h4 {
margin: 0 0 4px;
font-size: 14px;
color: var(--text-primary, #e8e8e8);
}
.social-invite-preview-info p {
margin: 0;
font-size: 12px;
color: var(--text-secondary, #b0b0b0);
}
.social-modal-text {
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary, #b0b0b0);
margin: 0;
}
.social-modal-text strong {
color: var(--text-primary, #e8e8e8);
}
/* Toast (panel ici bildirim) — Tier 3 glass */
.social-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background:
linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%),
var(--glass-3-bg, rgba(28, 28, 32, 0.78));
border: 1px solid var(--glass-3-border, rgba(255, 255, 255, 0.10));
border-radius: var(--radius-sm, 14px);
padding: 10px 16px;
font-size: 13px;
color: var(--text-primary, #e8e8e8);
z-index: var(--z-toast, 10060);
opacity: 0;
pointer-events: none;
overflow: hidden;
transition: opacity 200ms ease, transform 200ms ease;
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4)) var(--glass-3-refract, url(#liquid-refraction-3));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
var(--shadow-contact),
var(--shadow-lift);
max-width: 320px;
}
.social-toast::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.03) 40%,
transparent 55%);
mix-blend-mode: overlay;
opacity: 0.55;
}
.social-toast .toast-timeline {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--accent, #ffffff);
opacity: 0.45;
transform-origin: left;
animation: toastDrain 2.8s linear forwards;
z-index: 2;
}
.social-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.social-toast.success {
border-color: rgba(34, 197, 94, 0.3);
}
.social-toast.error {
border-color: rgba(239, 68, 68, 0.3);
}
/* ============================================================
FAZ 3: DM (Direct Message) - chat ekranı + balonlar + input
============================================================ */
/* Wrap'ler */
.social-dm-list-wrap {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.social-dm-list-wrap::-webkit-scrollbar { width: 6px; }
.social-dm-list-wrap::-webkit-scrollbar-track { background: transparent; }
.social-dm-list-wrap::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.06);
border-radius: 99px;
border: 1px solid transparent;
background-clip: padding-box;
transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-dm-list-wrap::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.18);
background-clip: padding-box;
}
.social-dm-list-wrap::-webkit-scrollbar-thumb:active {
background: rgba(255, 255, 255, 0.3);
background-clip: padding-box;
}
.social-dm-chat-wrap {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* Header (geri butonu + isim + fingerprint) — parent glass'i goster */
.social-dm-chat-header {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--stroke-hairline, rgba(255, 255, 255, 0.06));
flex-shrink: 0;
/* Üstten aydınlanan cam sohbet başlığı */
background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.012) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 0 rgba(0, 0, 0, 0.22);
}
/* iOS-style chat header: avatar + isim block + meta (E2EE pill + fingerprint) */
.social-dm-chat-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 1px 2px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
user-select: none;
overflow: hidden;
}
.social-dm-chat-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.social-dm-chat-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.social-dm-chat-name {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-primary, #e8e8e8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.social-dm-chat-meta {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
overflow: hidden;
}
.social-dm-chat-e2ee-pill {
display: inline-flex;
align-items: center;
gap: 3px;
background: var(--sx-green-tint, rgba(34, 197, 94, 0.16));
border: 1px solid var(--sx-green-line, rgba(34, 197, 94, 0.40));
color: var(--sx-green-text, #86efac);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.05em;
padding: 1px 6px 1px 4px;
border-radius: var(--radius-pill, 999px);
text-transform: uppercase;
flex-shrink: 1;
min-width: 0;
max-width: 100%;
}
.social-dm-chat-e2ee-pill svg {
width: 9px;
height: 9px;
flex-shrink: 0;
}
.social-pill-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.social-panel.panel-narrow .social-pill-text {
display: none !important;
}
.social-panel.panel-narrow .social-dm-chat-e2ee-pill,
.social-panel.panel-narrow .social-dm-chat-ai-pill {
padding: 0 !important;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
margin-left: 0;
}
.social-panel.panel-narrow .social-dm-chat-e2ee-pill svg,
.social-panel.panel-narrow .social-dm-chat-ai-pill svg {
margin: 0 !important;
flex-shrink: 0;
}
.social-dm-chat-fingerprint {
font-size: 9.5px;
color: var(--text-secondary, #a1a1aa);
font-family: var(--font-mono, ui-monospace, 'JetBrains Mono', monospace);
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.75;
}
/* Mesaj listesi (scroll alani) */
.social-dm-messages {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
scroll-behavior: smooth;
}
.social-dm-messages::-webkit-scrollbar { width: 6px; }
.social-dm-messages::-webkit-scrollbar-track { background: transparent; }
.social-dm-messages::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.06);
border-radius: 99px;
border: 1px solid transparent;
background-clip: padding-box;
transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-dm-messages::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.18);
background-clip: padding-box;
}
.social-dm-messages::-webkit-scrollbar-thumb:active {
background: rgba(255, 255, 255, 0.3);
background-clip: padding-box;
}
/* Mesaj balonu — iOS continuous-corner */
.social-dm-bubble {
max-width: 100%;
padding: 10px 15px;
border-radius: 18px;
font-size: 13.5px;
line-height: 1.48;
word-wrap: break-word;
word-break: break-word;
overflow: hidden;
animation: social-bubble-in 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes social-bubble-in {
from { opacity: 0; transform: scale(0.92) translateY(8px); filter: blur(2px); }
to { opacity: 1; transform: scale(1) translateY(0); filter: none; }
}
/* iOS-style bubble grouping (ardisik ayni-sender mesajlarda tail yok) */
.social-dm-bubble.tight-top {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.social-dm-bubble.tight-bot {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.social-dm-bubble-wrap.grouped-continued {
margin-top: -3px;
}
.social-dm-bubble.them {
position: relative;
align-self: flex-start;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%), rgba(20, 20, 26, 0.55);
color: var(--text-primary, #e8e8e8);
border-bottom-left-radius: 18px; /* Sol alt kuyruk yumuşatıldı */
border: 1px solid rgba(255, 255, 255, 0.08);
/* Perf: çok sayıda balon → SVG refraksiyon yok, hafif blur (cam korunur) */
-webkit-backdrop-filter: blur(12px) saturate(150%) brightness(1.02);
backdrop-filter: blur(12px) saturate(150%) brightness(1.02);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
0 4px 10px rgba(0, 0, 0, 0.15);
}
/* Specular hilali — them balonu (me'de zaten var) */
.social-dm-bubble.them::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 52%);
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.6;
}
.social-dm-bubble.them .social-dm-bubble-text,
.social-dm-bubble.them .social-dm-bubble-time,
.social-dm-bubble.them .social-dm-pinned-mark,
.social-dm-bubble.them .social-dm-quoted {
position: relative;
z-index: 1;
}
.social-dm-bubble.me {
align-self: flex-end;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(255, 255, 255, 0.07);
color: var(--text-primary, #e8e8ea);
border: 1px solid rgba(255, 255, 255, 0.18);
/* Perf: SVG refraksiyon yok, hafif blur */
-webkit-backdrop-filter: blur(12px) saturate(150%) brightness(1.05);
backdrop-filter: blur(12px) saturate(150%) brightness(1.05);
border-bottom-right-radius: 18px; /* Sağ alt kuyruk yumuşatıldı */
position: relative;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.32),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
0 4px 14px rgba(0, 0, 0, 0.22),
0 10px 24px rgba(0, 0, 0, 0.15);
}
.social-dm-bubble.me::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%);
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.85;
}
.social-dm-bubble.me .social-dm-bubble-text,
.social-dm-bubble.me .social-dm-bubble-time,
.social-dm-bubble.me .social-dm-pinned-mark,
.social-dm-bubble.me .social-dm-quoted {
position: relative;
z-index: 1;
}
/* Tail kaybolur sadece grup sonunda olmadiginda */
.social-dm-bubble.me.tight-bot { border-bottom-right-radius: 6px; }
.social-dm-bubble.them.tight-bot { border-bottom-left-radius: 6px; }
.social-dm-bubble.error {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
border: 1px solid rgba(239, 68, 68, 0.35);
align-self: center;
}
.social-dm-bubble-text {
white-space: pre-wrap;
}
.social-dm-bubble-time {
font-size: 9.5px;
opacity: 0.55;
margin-top: 4px;
text-align: right;
user-select: none;
letter-spacing: 0.02em;
}
.social-dm-bubble.them .social-dm-bubble-time {
text-align: left;
}
/* Input alani — iOS-style outer slot (sadece padding + ayrim) */
.social-dm-input-area {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
flex-shrink: 0;
/* Alttan aydınlanan premium cam composer şeridi */
background: rgba(18, 18, 22, 0.45);
backdrop-filter: blur(20px) saturate(170%);
-webkit-backdrop-filter: blur(20px) saturate(170%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
/* Composer capsule — iOS Messages-style floating capsule, glass + focus ring */
.social-dm-composer-capsule {
flex: 1;
display: flex;
align-items: center;
gap: 4px;
padding: 5px 6px;
background: rgba(255, 255, 255, 0.03);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%) var(--glass-3-refract, url(#liquid-refraction-3));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 16px rgba(0, 0, 0, 0.2);
transition: background 0.28s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.social-dm-composer-capsule:focus-within {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px rgba(255, 255, 255, 0.04),
0 12px 32px -4px rgba(0, 0, 0, 0.35);
}
.social-dm-input {
flex: 1;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: none;
border-radius: 0;
padding: 6px 12px;
font-size: 14px;
font-family: inherit;
color: var(--text-primary, #e8e8e8);
outline: none;
resize: none;
line-height: 1.5;
min-height: 28px;
max-height: 120px;
overflow-y: auto;
transition: none;
}
/* Custom scrollbar inside composer input */
.social-dm-input::-webkit-scrollbar {
width: 4px !important;
}
.social-dm-input::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 99px !important;
}
.social-dm-input:focus {
background: transparent;
border: none;
box-shadow: none;
}
.social-dm-input::placeholder {
color: rgba(255, 255, 255, 0.25);
}
/* Send button — iOS-style stateful: bos input -> sonuk, dolu -> glass parlak */
.social-dm-send-btn {
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.04);
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: not-allowed;
flex-shrink: 0;
padding: 0;
position: relative;
overflow: hidden;
opacity: 0.4;
transform: scale(0.90);
transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
transform 260ms cubic-bezier(0.16, 1, 0.3, 1.1),
background 240ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.social-dm-send-btn svg {
position: relative;
z-index: 1;
width: 14px;
height: 14px;
}
/* is-active: input dolu — buton parlar (Apple / iOS Messages stili ters kontrast) */
.social-dm-send-btn.is-active {
opacity: 1;
transform: scale(1);
cursor: pointer;
background: linear-gradient(180deg, #ffffff 0%, #f4f4f7 100%);
color: #0a0a0d;
border-color: #ffffff;
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
.social-dm-send-btn.is-active:hover {
background: #ffffff;
transform: scale(1.06) translateY(-1px);
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.32),
0 0 0 1px rgba(255, 255, 255, 0.05);
filter: brightness(1.05);
}
.social-dm-send-btn.is-active:active {
transform: scale(0.95);
filter: brightness(0.9);
}
.social-dm-send-btn:disabled { cursor: not-allowed; }
.social-dm-send-btn:focus-visible {
outline: 2px solid var(--ink-100, #fff);
outline-offset: 2px;
}
/* ============================================================
FAZ 4.1: Mesaj etkilesimleri (edit/delete/reply)
============================================================ */
/* Balon wrap: balon + aksiyon menusu yan yana */
.social-dm-bubble-wrap {
display: flex;
align-items: flex-end;
gap: 4px;
width: 100%;
}
.social-dm-bubble-wrap.me {
justify-content: flex-end;
}
.social-dm-bubble-wrap.them {
justify-content: flex-start;
}
/* Aksiyon menusu — default gizli, hover'da spring scale entry */
.social-dm-bubble-actions {
display: flex;
gap: 2px;
opacity: 0;
transform: scale(0.85) translateY(2px);
transform-origin: center center;
transition: opacity 180ms ease,
transform 260ms cubic-bezier(0.32, 0.72, 0, 1.1);
flex-shrink: 0;
align-items: center;
align-self: center;
}
.social-dm-bubble-wrap:hover .social-dm-bubble-actions,
.social-dm-bubble-wrap:focus-within .social-dm-bubble-actions {
opacity: 1;
transform: scale(1) translateY(0);
}
/* Me icin aksiyon menusu balonun SOLUNDA olsun (sag tarafta gorunsun) */
.social-dm-bubble-wrap.me .social-dm-bubble-actions {
order: -1;
}
.social-dm-action-btn {
background: rgba(255, 255, 255, 0.06);
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.10);
color: var(--text-secondary, #b0b0b0);
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
transition: background var(--motion-fast, 160ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--motion-fast, 160ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
color var(--motion-fast, 160ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.social-dm-action-btn:hover {
background: rgba(255, 255, 255, 0.15);
color: var(--text-primary, #e8e8e8);
}
.social-dm-action-btn.danger:hover {
background: rgba(239, 68, 68, 0.22);
color: #fca5a5;
}
.social-dm-action-btn:focus-visible {
outline: 2px solid var(--ink-100, #fff);
outline-offset: 1px;
}
.social-dm-action-btn svg {
width: 14px;
height: 14px;
}
/* Mobilde aksiyon'lar her zaman gorunsun (hover yok) */
@media (hover: none) {
.social-dm-bubble-actions {
opacity: 0.65;
}
}
/* Quoted (reply) blogu — balonun ustunde mini onizleme */
.social-dm-quoted {
border-left: 3px solid currentColor;
padding: 4px 8px;
margin-bottom: 6px;
background: rgba(0, 0, 0, 0.20);
border-radius: var(--radius-xs, 8px);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
font-size: 11px;
cursor: pointer;
opacity: 0.85;
transition: opacity 150ms ease, background 150ms ease;
}
.social-dm-quoted:hover {
opacity: 1;
}
.social-dm-bubble.me .social-dm-quoted {
background: rgba(0, 0, 0, 0.12);
}
.social-dm-quoted-sender {
font-weight: 600;
margin-bottom: 2px;
}
.social-dm-quoted-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.85;
}
.social-dm-quoted-missing {
opacity: 0.6;
font-style: italic;
cursor: default;
pointer-events: none;
}
/* Silinmis mesaj — dashed yerine solid cam + iç çukur */
.social-dm-bubble.deleted {
background: rgba(255, 255, 255, 0.035) !important;
color: var(--text-secondary, #b0b0b0) !important;
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10)) !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
font-style: italic;
}
.social-dm-bubble.deleted .social-dm-bubble-text {
opacity: 0.8;
}
/* Edited damgasi */
.social-dm-edited-mark {
font-size: 10px;
opacity: 0.7;
font-style: italic;
margin-left: 2px;
}
/* Highlight (yanitlanan mesaja scroll edince) */
@keyframes social-dm-flash {
0%, 100% { box-shadow: none; }
30%, 60% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
}
.social-dm-bubble-wrap.social-dm-highlight .social-dm-bubble {
animation: social-dm-flash 1.5s ease;
}
/* Reply / Edit context bar (input ustunde) — light glass + accent left border */
.social-dm-context-bar {
display: none;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3) var(--glass-3-refract, url(#liquid-refraction-3));
border-top: 1px solid var(--stroke-hairline, rgba(255, 255, 255, 0.06));
border-left: 3px solid rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
font-size: 11px;
color: var(--text-secondary, #b0b0b0);
flex-shrink: 0;
}
.social-dm-context-bar.visible {
display: flex;
}
.social-dm-context-bar[data-mode="edit"] {
border-left-color: var(--sx-green-line, rgba(34, 197, 94, 0.6));
}
.social-dm-context-bar-icon {
flex-shrink: 0;
opacity: 0.7;
display: inline-flex;
align-items: center;
justify-content: center;
}
.social-dm-context-bar-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.social-dm-context-bar-label {
font-weight: 600;
color: var(--text-primary, #e8e8e8);
}
.social-dm-context-bar-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.75;
}
.social-dm-context-bar-close {
background: transparent;
border: none;
color: var(--text-secondary, #b0b0b0);
cursor: pointer;
padding: 4px;
border-radius: 6px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.social-dm-context-bar-close:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary, #e8e8e8);
}
.social-dm-context-bar-close svg {
width: 14px;
height: 14px;
}
/* ============================================================
FAZ 4.2: Reactions (balon altinda rozet + floating emoji picker)
============================================================ */
/* Bubble-stack: balon + reactions altta dik dizilim */
.social-dm-bubble-stack {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 75%;
min-width: 0;
}
.social-dm-bubble-wrap.me .social-dm-bubble-stack {
align-items: flex-end;
}
.social-dm-bubble-wrap.them .social-dm-bubble-stack {
align-items: flex-start;
}
/* Stack icindeki balonun max-width'i parent ile snap olur */
.social-dm-bubble-stack .social-dm-bubble {
max-width: 100%;
}
/* Reactions bar */
.social-dm-reactions {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 0 4px;
}
.social-dm-reaction-chip {
/* Liquid glass rozet */
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--text-primary, #e8e8e8);
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: background 180ms ease, border-color 180ms ease, transform 100ms ease, box-shadow 200ms ease;
font-family: inherit;
line-height: 1.3;
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.social-dm-reaction-chip:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.26);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.social-dm-reaction-chip:active {
transform: scale(0.95);
}
.social-dm-reaction-chip.mine {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.45);
color: var(--text-primary, #e8e8e8);
box-shadow:
0 1px 4px rgba(255, 255, 255, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.social-dm-reaction-chip.mine:hover {
background: rgba(255, 255, 255, 0.30);
border-color: rgba(255, 255, 255, 0.55);
box-shadow:
0 2px 8px rgba(255, 255, 255, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.social-dm-reaction-chip .emo {
font-size: 13px;
line-height: 1;
}
.social-dm-reaction-chip .cnt {
font-weight: 600;
font-size: 11px;
}
.social-dm-reaction-chip:focus-visible {
outline: 2px solid var(--ink-100, #fff);
outline-offset: 1px;
}
/* Floating emoji picker — Tier 3 glass + refraction */
.social-emoji-picker {
position: fixed;
background:
linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%),
var(--glass-3-bg, rgba(28, 28, 32, 0.78));
border: 1px solid var(--glass-3-border, rgba(255, 255, 255, 0.10));
border-radius: var(--radius-pill, 999px);
padding: 4px 6px;
display: flex;
gap: 2px;
z-index: 1500;
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4)) brightness(1.04);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4)) brightness(1.04) var(--glass-3-refract, url(#liquid-refraction-3));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.30),
0 12px 32px rgba(0, 0, 0, 0.50),
0 4px 12px rgba(0, 0, 0, 0.30);
animation: social-emoji-picker-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes social-emoji-picker-in {
from { opacity: 0; transform: translateY(4px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.social-emoji-btn {
background: transparent;
border: none;
font-size: 18px;
padding: 4px 6px;
cursor: pointer;
border-radius: 8px;
transition: background 120ms ease, transform 100ms ease;
font-family: inherit;
line-height: 1;
}
.social-emoji-btn:hover {
background: rgba(255, 255, 255, 0.10);
transform: scale(1.25);
}
.social-emoji-btn:active {
transform: scale(1.1);
}
.social-emoji-btn:focus-visible {
outline: 2px solid var(--ink-100, #fff);
outline-offset: 1px;
}
/* ============================================================
FAZ 4.3a: Okundu/iletildi (liquid glass, 4-state)
============================================================ */
.social-dm-read-status {
display: inline-flex;
align-items: center;
margin-left: 4px;
vertical-align: middle;
}
.social-dm-read-status svg {
width: 14px;
height: 14px;
display: block;
transition: color 250ms ease, opacity 250ms ease, filter 300ms ease;
}
/* (1) Pending: tek tik saydam, hafif puls (henuz sunucuya gitmedi) */
.social-dm-read-status.pending svg {
opacity: 0.45;
color: rgba(255, 255, 255, 0.88);
animation: dm-tick-pulse 1.5s ease-in-out infinite;
}
@keyframes dm-tick-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.78; }
}
/* (2) Sent: tek tik saydam beyaz, sabit (kayit OK ama peer offline) */
.social-dm-read-status.sent svg {
opacity: 0.78;
color: rgba(255, 255, 255, 0.92);
filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.22));
}
/* (3) Delivered: cift tik saydam beyaz (peer cihazina ulasti) */
.social-dm-read-status.delivered svg {
opacity: 0.94;
color: rgba(255, 255, 255, 0.96);
filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.30));
}
/* (4) Read: cift tik mavi parlak (peer okudu) */
.social-dm-read-status.read svg {
color: #ffffff;
opacity: 1;
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}
/* Me balonu artik glass (yari saydam beyaz) — tick'ler light variant */
.social-dm-bubble.me .social-dm-read-status.pending svg {
color: rgba(255, 255, 255, 0.55);
}
.social-dm-bubble.me .social-dm-read-status.sent svg {
color: rgba(255, 255, 255, 0.82);
filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.20));
}
.social-dm-bubble.me .social-dm-read-status.delivered svg {
color: rgba(255, 255, 255, 0.96);
filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.30));
}
.social-dm-bubble.me .social-dm-read-status.read svg {
color: #ffffff;
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}
/* ============================================================
FAZ 4.3b: DM listesi son mesaj onizleme + unread badge
============================================================ */
.social-dm-list-tail {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.social-item-unread-badge {
background: linear-gradient(180deg, #ffffff 0%, #e6e6ea 100%);
color: #000000;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: var(--radius-pill, 999px);
min-width: 20px;
text-align: center;
line-height: 1.4;
display: inline-block;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
0 1px 4px rgba(0, 0, 0, 0.35);
}
.social-item.has-unread .social-item-name {
font-weight: 700;
}
.social-item.has-unread .social-item-email {
color: var(--text-primary, #e8e8e8);
opacity: 0.85;
}
/* Faz 10.4b: Cevapsız çağrı badge (kırmızı pill, phone icon + sayı) */
.social-dm-missed-badge {
display: inline-flex;
align-items: center;
gap: 3px;
background: linear-gradient(135deg, rgba(255, 80, 90, 0.95), rgba(220, 50, 60, 0.92));
color: #ffffff;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
line-height: 1.3;
box-shadow: 0 1px 4px rgba(220, 50, 60, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.social-dm-missed-badge svg {
width: 10px;
height: 10px;
flex-shrink: 0;
}
.social-item.has-missed-call .social-item-name {
/* Cevapsız çağrı varsa name'i kırmızıya kırp (vurgu) */
color: rgba(255, 200, 200, 1);
font-weight: 600;
}
.social-item-preview {
font-style: normal;
}
/* ============================================================
FAZ 4.4: Sabitleme (pin) + İletme (forward)
============================================================ */
/* Chat header'daki pin sayacı butonu */
.social-dm-pin-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #ffffff;
border-radius: 999px;
padding: 4px 8px 4px 6px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 150ms ease;
flex-shrink: 0;
}
.social-dm-pin-btn:hover {
background: rgba(255, 255, 255, 0.20);
}
.social-dm-pin-btn svg {
width: 14px;
height: 14px;
}
.social-dm-pin-btn-count {
font-weight: 700;
}
/* Action menüde aktif (sabitlenmiş) pin butonu */
.social-dm-action-btn.active {
background: rgba(255, 255, 255, 0.20);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.36);
}
.social-dm-action-btn.active:hover {
background: rgba(255, 255, 255, 0.28);
}
/* Pinli balon (sari kenar vurgusu) */
.social-dm-bubble.pinned {
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20) inset;
}
/* Balon icinde 'sabitlenmis' kose ikonu */
.social-dm-pinned-mark {
position: absolute;
top: -6px;
right: -6px;
background: #ffffff;
color: #1a1a1a;
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.social-dm-pinned-mark svg {
width: 11px;
height: 11px;
}
.social-dm-bubble {
position: relative;
}
.social-dm-bubble.me .social-dm-pinned-mark {
right: -6px;
left: auto;
}
.social-dm-bubble.them .social-dm-pinned-mark {
left: -6px;
right: auto;
}
/* Pinli mesaj liste item'i (modal'da) */
.social-pinned-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
margin: 4px 0;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border-left: 3px solid rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: background 150ms ease;
}
.social-pinned-item:hover {
background: rgba(255, 255, 255, 0.08);
}
.social-pinned-item-sender {
font-size: 11px;
font-weight: 700;
color: #ffffff;
margin-bottom: 2px;
white-space: nowrap;
}
.social-pinned-item-text {
font-size: 12px;
color: var(--text-primary, #e8e8e8);
line-height: 1.4;
flex: 1;
min-width: 0;
word-break: break-word;
}
.social-pinned-item > div:not(.social-pinned-item-sender) {
flex: 1;
min-width: 0;
}
.social-pinned-item-unpin {
background: transparent;
border: none;
color: var(--text-secondary, #b0b0b0);
cursor: pointer;
padding: 4px;
border-radius: 6px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 150ms ease, color 150ms ease;
}
.social-pinned-item-unpin:hover {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
}
.social-pinned-item-unpin svg {
width: 14px;
height: 14px;
}
/* Pinli mesajlar listesi yapisi: sender + text yan yana / dikey */
.social-pinned-item {
flex-direction: column;
position: relative;
}
.social-pinned-item .social-pinned-item-unpin {
position: absolute;
top: 6px;
right: 6px;
}
/* ============================================================
Plan C-4: iOS-style date separator
============================================================ */
.social-dm-date-sep {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 14px 6px 8px;
position: relative;
flex-shrink: 0;
}
.social-dm-date-sep::before,
.social-dm-date-sep::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}
.social-dm-date-sep span {
font-size: 10px;
font-weight: 700;
color: var(--text-secondary, #a1a1aa);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
/* Cam pill */
padding: 3px 10px;
border-radius: var(--radius-pill, 999px);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border: 1px solid var(--stroke-hairline, rgba(255, 255, 255, 0.06));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* ============================================================
Plan C-5: DM Empty state — sicak, kisisellesmis (iOS-style)
============================================================ */
.social-dm-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 32px;
text-align: center;
color: var(--text-secondary, #a1a1aa);
flex: 1;
}
.social-dm-empty-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.10);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 6px 18px rgba(0, 0, 0, 0.22);
animation: social-dm-empty-pop 420ms cubic-bezier(0.32, 0.72, 0, 1.05) both;
}
@keyframes social-dm-empty-pop {
0% { opacity: 0; transform: scale(0.85); }
100% { opacity: 1; transform: scale(1); }
}
.social-dm-empty-icon svg {
width: 32px;
height: 32px;
color: rgba(255, 255, 255, 0.50);
}
.social-dm-empty p {
margin: 0;
font-size: 13px;
line-height: 1.55;
max-width: 280px;
}
/* ============================================================
Faz 5 — Medya & Dosya Paylaşımı
============================================================ */
/* Ataç butonu (kapsülün dışında, iOS Messages stili) */
.social-dm-attach-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.04);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1),
color 240ms cubic-bezier(0.16, 1, 0.3, 1),
transform 220ms cubic-bezier(0.16, 1, 0.3, 1.1),
border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.social-dm-attach-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.18);
transform: scale(1.06) translateY(-1px);
}
.social-dm-attach-btn:active {
transform: scale(0.95);
}
.social-dm-attach-btn svg {
width: 16px;
height: 16px;
pointer-events: none;
}
/* Seçilen dosyalar önizleme şeridi */
.social-dm-upload-preview {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 12px 4px;
}
.social-dm-upload-thumb {
position: relative;
width: 72px;
height: 72px;
border-radius: var(--radius-sm, 14px);
overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.12));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.22);
flex-shrink: 0;
}
.social-dm-upload-thumb img,
.social-dm-upload-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
}
.social-dm-upload-thumb-icon {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: rgba(255, 255, 255, 0.65);
font-size: 9px;
text-align: center;
padding: 6px;
word-break: break-all;
}
.social-dm-upload-thumb-icon svg {
width: 26px;
height: 26px;
opacity: 0.7;
}
.social-dm-upload-thumb-remove {
position: absolute;
top: 3px;
right: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 11px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.social-dm-upload-thumb-remove:hover { background: rgba(239, 68, 68, 0.8); }
/* Upload progress overlay on bubble */
.social-dm-media-uploading {
position: relative;
}
.social-dm-media-progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: rgba(255, 255, 255, 0.85);
border-radius: 0 0 0 3px;
transition: width 200ms linear;
}
/* Medya sarmalayıcı — balonun padding alanına hapseder */
.social-dm-media-container {
display: block;
max-width: 100%;
overflow: hidden;
line-height: 0; /* img altındaki boşluk sıfır */
}
/* İmaj thumbnail (baloncuk içi) */
.social-dm-img-thumb {
display: block;
max-width: 220px; /* mutlak üst sınır */
width: 100%; /* container genişliğine uy (taşmaz) */
max-height: 260px;
height: auto;
border-radius: var(--radius-sm, 14px);
cursor: zoom-in;
object-fit: contain;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 12px rgba(0, 0, 0, 0.28);
transition: opacity 200ms ease, transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.social-dm-img-thumb:hover { opacity: 0.88; }
.social-dm-img-thumb.loading {
min-width: 140px;
min-height: 100px;
opacity: 0.4;
}
/* Video thumbnail */
.social-dm-video-wrap {
position: relative;
display: inline-block;
border-radius: var(--radius-sm, 14px);
overflow: hidden;
cursor: pointer;
max-width: 220px;
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 4px 12px rgba(0, 0, 0, 0.28);
}
.social-dm-video-wrap video {
display: block;
max-width: 220px;
max-height: 260px;
border-radius: 10px;
pointer-events: none;
}
.social-dm-video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
border-radius: 10px;
transition: background 180ms ease;
}
.social-dm-video-play svg {
width: 38px;
height: 38px;
color: #fff;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.social-dm-video-wrap:hover .social-dm-video-play { background: rgba(0, 0, 0, 0.20); }
/* Ses mesajı — cam kart */
.social-dm-audio-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: var(--radius-sm, 14px);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.20);
min-width: 180px;
max-width: 220px;
}
.social-dm-audio-card audio {
flex: 1;
height: 28px;
min-width: 0;
accent-color: rgba(255, 255, 255, 0.9);
}
/* Dosya kartı (image/video dışı) — Tier 3 cam kart */
.social-dm-file-card {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: var(--radius-sm, 14px);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.20);
min-width: 180px;
max-width: 240px;
cursor: pointer;
text-decoration: none;
transition: background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.social-dm-file-card:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
border-color: var(--stroke-strong, rgba(255, 255, 255, 0.18));
transform: translateY(-1px);
}
.social-dm-file-card:active { transform: scale(0.99); }
.social-dm-file-card-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-xs, 8px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 2px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.85);
}
.social-dm-file-card-icon svg { width: 20px; height: 20px; }
.social-dm-file-card-info {
flex: 1;
min-width: 0;
}
.social-dm-file-card-name {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.90);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.social-dm-file-card-size {
font-size: 10px;
color: rgba(255, 255, 255, 0.45);
margin-top: 2px;
}
/* Medya decrypt yükleniyor spinner */
.social-dm-media-loading {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
color: rgba(255, 255, 255, 0.50);
padding: 10px 14px;
}
.social-dm-media-loading-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.20);
border-top-color: rgba(255, 255, 255, 0.65);
border-radius: 50%;
animation: social-spin 700ms linear infinite;
}
@keyframes social-spin {
to { transform: rotate(360deg); }
}
/* Medya decrypt hata */
.social-dm-media-error {
font-size: 11px;
color: rgba(239, 68, 68, 0.85);
padding: 6px 0;
display: flex;
align-items: center;
gap: 5px;
}
/* Lightbox (tam ekran) */
.social-media-lightbox {
position: fixed;
inset: 0;
z-index: calc(var(--z-overlay, 10020) + 15);
background: linear-gradient(180deg, var(--glass-1-tint-top, rgba(28, 28, 32, 0.45)) 0%, var(--glass-1-tint-bot, rgba(20, 20, 24, 0.60)) 100%), var(--glass-1-bg, rgba(15, 15, 18, 0.55));
backdrop-filter: blur(var(--glass-1-blur, 36px)) saturate(var(--glass-1-saturate, 1.8)) brightness(0.95) var(--glass-1-refract, url(#liquid-refraction-1));
-webkit-backdrop-filter: blur(var(--glass-1-blur, 36px)) saturate(var(--glass-1-saturate, 1.8)) brightness(0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
will-change: var(--gpu-will-change);
transform: var(--gpu-transform);
animation: social-lightbox-in 380ms var(--ease-spring) both;
}
@keyframes social-lightbox-in {
0% { opacity: 0; transform: scale(0.98); }
100% { opacity: 1; transform: scale(1); }
}
.social-media-lightbox-close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--glass-3-border, rgba(255, 255, 255, 0.10));
background: linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%), var(--glass-3-bg, rgba(28, 28, 32, 0.78));
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
color: var(--text-1, #ffffff);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow:
var(--inset-top-glow),
var(--inset-bot-shadow),
var(--shadow-contact),
var(--shadow-lift);
transition: background 180ms ease, transform 150ms var(--ease-spring);
z-index: 2;
}
.social-media-lightbox-close:hover {
background: var(--glass-3-bg, rgba(255, 255, 255, 0.15));
transform: scale(1.08) translateY(-1px);
}
.social-media-lightbox-close:active {
transform: scale(0.96);
transition: transform 80ms var(--ease-snappy);
}
.social-media-lightbox-close svg { width: 18px; height: 18px; pointer-events: none; }
.social-media-lightbox-content {
display: flex;
align-items: center;
justify-content: center;
}
.social-media-lightbox-content img,
.social-media-lightbox-content video {
max-width: 100%;
max-height: 80vh;
border-radius: var(--radius-sm, 14px);
object-fit: contain;
box-shadow: var(--shadow-ambient), var(--shadow-lift);
}
.social-media-lightbox-caption {
margin-top: 12px;
font-size: 13px;
color: var(--text-2, rgba(255, 255, 255, 0.55));
text-align: center;
max-width: 600px;
min-height: 0;
}
/* Lightbox aksiyon butonu çubuğu */
.social-media-lb-actions {
display: flex;
gap: 10px;
margin-top: 18px;
align-items: center;
justify-content: center;
}
.social-media-lb-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 20px;
border-radius: var(--radius-pill, 999px);
border: 1px solid var(--glass-3-border, rgba(255, 255, 255, 0.10));
background: linear-gradient(180deg, var(--glass-3-tint-top, rgba(36, 36, 42, 0.65)) 0%, var(--glass-3-tint-bot, rgba(28, 28, 32, 0.82)) 100%), var(--glass-3-bg, rgba(28, 28, 32, 0.78));
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(var(--glass-3-saturate, 1.4));
color: var(--text-1, #e8e8e8);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
box-shadow:
var(--inset-top-glow),
var(--inset-bot-shadow),
var(--shadow-contact),
var(--shadow-lift);
transition: background 180ms ease, border-color 180ms ease, transform 150ms var(--ease-spring);
user-select: none;
}
.social-media-lb-btn:hover {
background: var(--glass-3-bg, rgba(255, 255, 255, 0.15));
border-color: var(--stroke-focus, rgba(255, 255, 255, 0.40));
transform: scale(1.04) translateY(-1px);
}
.social-media-lb-btn:active {
transform: scale(0.97);
transition: transform 80ms var(--ease-snappy);
}
.social-media-lb-btn svg {
width: 15px;
height: 15px;
pointer-events: none;
flex-shrink: 0;
}
.social-media-lb-btn.copied {
border-color: rgba(74, 222, 128, 0.50);
background: rgba(74, 222, 128, 0.12);
color: rgba(74, 222, 128, 0.95);
}
/* ============================================================
Faz 6 — Sesli Mesajlar
============================================================ */
/* Mikrofon butonu (iOS Messages stili, ataç butonuyla aynı dil) */
.social-dm-mic-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.04);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1),
color 240ms cubic-bezier(0.16, 1, 0.3, 1),
transform 220ms cubic-bezier(0.16, 1, 0.3, 1.1),
border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.social-dm-mic-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.18);
transform: scale(1.06) translateY(-1px);
}
.social-dm-mic-btn:active { transform: scale(0.95); }
.social-dm-mic-btn svg { width: 16px; height: 16px; pointer-events: none; }
/* Kayıt aktifken mikrofon kırmızı pulse */
.social-dm-mic-btn.recording {
background: rgba(239, 68, 68, 0.22);
border-color: rgba(239, 68, 68, 0.40);
color: rgb(252, 165, 165);
}
/* ---- Kayıt çubuğu ---- */
.social-dm-recording-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: rgba(239, 68, 68, 0.07);
border-top: 1px solid rgba(239, 68, 68, 0.14);
animation: social-rec-bar-in 200ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes social-rec-bar-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Yanıp sönen kırmızı nokta */
.social-dm-rec-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ef4444;
flex-shrink: 0;
animation: social-rec-pulse 1.1s ease-in-out infinite;
}
@keyframes social-rec-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.75); }
}
/* İptal / Gönder butonları */
.social-dm-rec-cancel,
.social-dm-rec-send {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.10);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 180ms ease, transform 150ms ease;
}
.social-dm-rec-send {
background: rgba(34, 197, 94, 0.20);
border-color: rgba(34, 197, 94, 0.35);
color: rgb(134, 239, 172);
}
.social-dm-rec-cancel:hover { background: rgba(239, 68, 68, 0.28); color: #fca5a5; }
.social-dm-rec-send:hover { background: rgba(34, 197, 94, 0.38); }
.social-dm-rec-cancel:active,
.social-dm-rec-send:active { transform: scale(0.93); }
.social-dm-rec-cancel svg,
.social-dm-rec-send svg { width: 15px; height: 15px; pointer-events: none; }
/* Gerçek zamanlı waveform canvas */
.social-dm-rec-canvas {
flex: 1;
height: 32px;
min-width: 60px;
border-radius: 4px;
display: block;
}
/* Kayıt süresi sayacı */
.social-dm-rec-timer {
font-size: 13px;
font-weight: 600;
color: rgba(239, 68, 68, 0.90);
min-width: 32px;
text-align: right;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
letter-spacing: 0.02em;
}
/* ---- Sesli mesaj oynatıcı baloncuğu ---- */
.social-dm-voice-card {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px 8px 8px;
border-radius: var(--radius-sm, 14px);
min-width: 210px;
max-width: 280px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.18);
}
/* Oynat/Duraklat butonu */
.social-dm-voice-play-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.90);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 180ms ease, transform 150ms ease, border-color 180ms ease;
}
.social-dm-voice-play-btn:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.08); }
.social-dm-voice-play-btn:active { transform: scale(0.93); }
.social-dm-voice-play-btn svg { width: 14px; height: 14px; pointer-events: none; }
.social-dm-voice-play-btn.playing {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.45);
color: rgb(255, 255, 255);
}
/* Waveform alanı: iki katmanlı SVG (unplayed + played) */
.social-dm-voice-wave-wrap {
flex: 1;
position: relative;
height: 32px;
min-width: 80px;
cursor: pointer;
overflow: hidden;
}
.social-dm-voice-wave {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.social-dm-voice-wave .social-dm-vbar {
fill: rgba(255, 255, 255, 0.22);
}
.social-dm-voice-wave-played {
transition: clip-path 80ms linear;
pointer-events: none;
}
.social-dm-voice-wave-played .social-dm-vbar {
fill: rgba(255, 255, 255, 0.85);
}
/* Süre göstergesi */
.social-dm-voice-time {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.50);
min-width: 28px;
text-align: right;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* Hız butonu: 1.0× → 1.5× → 2.0× */
.social-dm-voice-speed-btn {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.60);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 2px 7px;
cursor: pointer;
flex-shrink: 0;
letter-spacing: -0.02em;
transition: background 150ms ease, color 150ms ease;
line-height: 1.5;
}
.social-dm-voice-speed-btn:hover {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.90);
}
/* ============================================================
Faz 6+: Şifre çözülemedi UX — eski anahtar banner
============================================================ */
.social-dm-key-notice {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 12px;
padding: 9px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 12px;
color: rgba(255, 255, 255, 0.90);
line-height: 1.4;
flex-wrap: wrap;
}
.social-dm-key-notice-icon {
flex-shrink: 0;
display: flex;
align-items: center;
opacity: 0.85;
}
.social-dm-key-notice-text {
flex: 1 1 0;
min-width: 0;
}
.social-dm-key-notice-btn {
flex-shrink: 0;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.95);
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
white-space: nowrap;
}
.social-dm-key-notice-btn:hover {
background: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.55);
}
.social-dm-key-notice-toggle {
background: transparent;
border-color: rgba(255, 255, 255, 0.20);
color: rgba(255, 255, 255, 0.70);
}
.social-dm-key-notice-toggle:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.35);
color: rgba(255, 255, 255, 0.90);
}
/* ============================================================
Faz 6+: Sohbet menü (kebab) + toplu seçim + sohbeti silme
============================================================ */
/* Header'daki kebab + drop-down */
.social-dm-menu-wrap {
position: relative;
display: inline-block;
}
.social-dm-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 180px;
background: rgba(28, 28, 32, 0.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 12px;
padding: 6px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
z-index: 50;
}
.social-dm-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: background 120ms ease;
}
.social-dm-menu-item:hover {
background: rgba(255, 255, 255, 0.08);
}
.social-dm-menu-item.danger {
color: rgba(255, 105, 97, 0.95);
}
.social-dm-menu-item.danger:hover {
background: rgba(255, 80, 70, 0.12);
}
.social-dm-menu-item svg {
flex-shrink: 0;
}
/* Seçim modu üst barı */
.social-dm-select-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(40, 40, 50, 0.55);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.social-dm-select-count {
flex: 1;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.social-dm-select-action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}
.social-dm-select-action.danger {
background: rgba(255, 70, 60, 0.18);
border-color: rgba(255, 70, 60, 0.40);
color: rgba(255, 180, 175, 0.98);
}
.social-dm-select-action.danger:hover:not(:disabled) {
background: rgba(255, 70, 60, 0.30);
border-color: rgba(255, 70, 60, 0.60);
color: rgba(255, 220, 215, 1);
}
.social-dm-select-action:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Seçim modu bubble overlay'i (sol tarafa checkbox) */
.social-dm-bubble-wrap.select-mode {
cursor: default;
}
.social-dm-bubble-wrap.select-mode.selectable {
cursor: pointer;
}
.social-dm-select-checkbox {
flex-shrink: 0;
align-self: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.04);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0 6px;
transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
color: white;
}
.social-dm-select-checkbox:hover {
border-color: rgba(255, 255, 255, 0.65);
transform: scale(1.05);
}
.social-dm-select-checkbox.checked {
background: linear-gradient(135deg, #ffffff 0%, #d4d4d8 100%);
border-color: rgba(255, 255, 255, 0.55);
color: #000;
}
/* Seçili balon hafif vurgu */
.social-dm-bubble-wrap.selected .social-dm-bubble {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}
/* Modal aksiyon butonları için danger varyantı */
.social-btn.danger {
background: linear-gradient(135deg, rgba(255, 70, 60, 0.85) 0%, rgba(255, 95, 80, 0.85) 100%);
color: white;
border: 1px solid rgba(255, 95, 80, 0.55);
}
.social-btn.danger:hover {
background: linear-gradient(135deg, rgba(255, 80, 70, 1) 0%, rgba(255, 110, 95, 1) 100%);
border-color: rgba(255, 110, 95, 0.80);
}
.social-btn.danger:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ============================================================
Faz 7.3b: Yeni grup modali — arkadaş checkbox listesi
============================================================ */
.social-newgroup-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
transition: background 140ms ease;
}
.social-newgroup-row:last-child {
border-bottom: none;
}
.social-newgroup-row:hover {
background: rgba(255, 255, 255, 0.04);
}
.social-newgroup-row.selected {
background: rgba(255, 255, 255, 0.10);
}
.social-newgroup-row:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.45);
outline-offset: -2px;
}
.social-newgroup-checkbox {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.30);
background: rgba(255, 255, 255, 0.04);
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
transition: background 140ms ease, border-color 140ms ease;
}
.social-newgroup-checkbox.checked {
background: linear-gradient(135deg, #ffffff 0%, #d4d4d8 100%);
border-color: rgba(255, 255, 255, 0.55);
color: #000;
}
/* ============================================================
Faz 7.3c: Grup chat — sender etiketi
============================================================ */
.social-group-sender-label {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
padding: 0 4px 2px;
letter-spacing: -0.01em;
}
/* Aktif grup chat'i flex column akışı */
[data-group-view="chat"].social-dm-chat-wrap {
flex-direction: column;
}
/* ============================================================
Faz 7.3d: Grup info modal — üye satırı + rol rozeti
============================================================ */
.social-member-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.social-member-row:last-child {
border-bottom: none;
}
.social-member-badge {
flex-shrink: 0;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
letter-spacing: 0.02em;
}
/* Monokrom rol rozetleri — sahip parlak, admin sönük (chroma yerine yoğunluk) */
.social-member-badge.owner {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10));
border: 1px solid rgba(255, 255, 255, 0.34);
color: rgba(255, 255, 255, 0.96);
}
.social-member-badge.admin {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.78);
}
/* Header'daki tıklanabilir info alanı hover hint */
.social-dm-chat-info[data-action="socialOpenGroupInfo"]:hover .social-dm-chat-name {
text-decoration: underline;
text-decoration-color: rgba(255,255,255,0.3);
text-underline-offset: 3px;
}
/* Üye çıkarma butonu — info modal'daki her üye satırının sağında */
.social-member-kick {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(255, 80, 70, 0.30);
background: rgba(255, 80, 70, 0.10);
color: rgba(255, 150, 145, 0.90);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
margin-left: 4px;
}
.social-member-kick:hover {
background: rgba(255, 80, 70, 0.22);
border-color: rgba(255, 80, 70, 0.50);
color: rgba(255, 200, 195, 1);
}
/* Faz 7.4c — Rol değiştirme butonları (promote ↑ / demote ↓) */
.social-member-role-btn {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
margin-left: 4px;
}
.social-member-role-btn.promote {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.30);
color: rgba(255, 255, 255, 0.92);
}
.social-member-role-btn.promote:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.50);
color: rgba(255, 255, 255, 1);
}
.social-member-role-btn.demote {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.70);
}
.social-member-role-btn.demote:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.32);
color: rgba(255, 255, 255, 0.92);
}
/* Faz 7.4d — Sahipliği devretme butonu (👑) */
.social-member-transfer-btn {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
margin-left: 4px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.30);
color: rgba(255, 255, 255, 0.92);
}
.social-member-transfer-btn:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.50);
color: rgba(255, 255, 255, 1);
}
/* ============================================================
Faz 7+: Profil fotoğrafı avatar (Google login için)
.social-item-avatar / .social-dm-chat-avatar içinde ![]()
varsa
yuvarlak crop ile container'ı tam doldurur.
============================================================ */
.social-item-avatar img.social-item-avatar-img,
.social-dm-chat-avatar img.social-item-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* Avatar img varsa parent'in karakter padding'ini sıfırla */
.social-item-avatar:has(img),
.social-dm-chat-avatar:has(img) {
padding: 0;
background: transparent;
}
/* ============================================================
Faz 8a — DM/Grup içinde kalıcı AI modu (composer + header pill + modal)
============================================================ */
/* Eski AI butonu — artık kullanılmıyor (toggle pill ile değiştirildi) */
.social-dm-ai-btn {
display: none !important;
}
/* ── Faz 8b: AI Mod Toggle Pill ── */
.social-ai-toggle {
flex-shrink: 0;
align-self: center; /* capsule align-items:flex-end iken bile dikey ortala */
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.35);
cursor: pointer;
margin-left: 4px;
margin-right: 2px;
transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
color 240ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),
transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.social-ai-toggle:hover {
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
transform: scale(1.05);
}
.social-ai-toggle:active { transform: scale(0.92); }
.social-ai-toggle.active {
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
border-color: rgba(255, 255, 255, 0.35);
color: rgba(255, 255, 255, 1);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.social-ai-toggle.active:hover {
background: linear-gradient(135deg, #9333ea 0%, #db2777 100%);
box-shadow: 0 0 16px rgba(139, 92, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
.social-ai-toggle svg {
pointer-events: none;
}
/* ── Send butonu: AI mod renk geçişi ── */
.social-dm-send-btn.ai-mode:not(:disabled) {
background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
color: rgba(255, 255, 255, 1) !important;
opacity: 1 !important;
transform: scale(1) !important;
cursor: pointer !important;
box-shadow:
0 3px 10px rgba(139, 92, 246, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}
.social-dm-send-btn.ai-mode:not(:disabled):hover {
background: linear-gradient(135deg, #9333ea 0%, #db2777 100%) !important;
box-shadow:
0 4px 14px rgba(139, 92, 246, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.05) !important;
transform: scale(1.06) translateY(-1px) !important;
filter: brightness(1.05) !important;
}
.social-dm-send-btn.ai-mode:not(:disabled):active {
transform: scale(0.95) !important;
}
.social-dm-send-btn .send-icon-ai {
width: 16px;
height: 16px;
}
/* ── Capsule: AI mod glow ── */
.social-dm-composer-capsule.ai-mode {
border-color: rgba(139, 92, 246, 0.36);
box-shadow: 0 0 20px rgba(139, 92, 246, 0.12),
inset 0 0 8px rgba(139, 92, 246, 0.03);
}
.social-dm-composer-capsule.ai-mode:focus-within {
border-color: rgba(139, 92, 246, 0.6);
box-shadow: 0 0 24px rgba(139, 92, 246, 0.22),
inset 0 0 8px rgba(139, 92, 246, 0.04);
}
/* AI mod aktifken header'da gösterilen 'Şifrelenmiyor' pill —
tasarımı E2EE pill ile aynı ama amber/kırmızı renkli */
.social-dm-chat-ai-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.36);
color: rgba(255, 255, 255, 0.95);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
flex-shrink: 1;
min-width: 0;
max-width: 100%;
}
.social-dm-chat-ai-pill svg {
width: 11px;
height: 11px;
flex-shrink: 0;
}
/* Onay modal'ındaki uyarı kutusu (modal body üstünde) */
.social-ai-warn-box {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 10px;
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.95);
font-size: 12.5px;
}
.social-ai-warn-box svg {
flex-shrink: 0;
color: rgba(255, 255, 255, 1);
}
/* AI mesaj bubble — assistant cevapları için ayırt edici cam kimliği
(monokrom: daha parlak cam tint + beyaz sol-rim + refraksiyon). */
.social-dm-bubble.assistant,
.social-dm-bubble.me.assistant,
.social-dm-bubble.them.assistant {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%), rgba(28, 28, 34, 0.50);
border: 1px solid rgba(255, 255, 255, 0.30);
border-left: 2.5px solid rgba(255, 255, 255, 0.55);
/* Perf: SVG refraksiyon yok, hafif blur */
-webkit-backdrop-filter: blur(12px) saturate(150%) brightness(1.04);
backdrop-filter: blur(12px) saturate(150%) brightness(1.04);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.20),
0 4px 14px rgba(0, 0, 0, 0.22);
position: relative;
}
.social-dm-bubble.assistant::before {
content: '';
position: absolute;
left: -6px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.65);
transform: translateY(-50%);
}
/* AI badge — artık kullanılmıyor, geriye uyum için gizlendi */
.social-ai-msg-badge {
display: none;
}
/* AI assistant mesaj balonu — kullanıcıdan farklı renk ile ayırt edilir */
.social-dm-bubble.assistant {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.08) 100%);
border-left: 2.5px solid rgba(255, 255, 255, 0.55);
}
.social-dm-bubble.assistant .social-dm-bubble-text {
color: rgba(255, 255, 255, 0.95);
}
/* ============================================================
Faz 8 — AI "yazıyor" göstergesi + model seçici
============================================================ */
.social-ai-typing-bubble {
display: inline-flex;
align-items: center;
padding: 10px 14px;
min-height: 0;
}
.social-ai-typing-dots {
display: inline-flex;
gap: 4px;
align-items: center;
}
.social-ai-typing-dots span {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
animation: socialAiTyping 1.2s infinite ease-in-out;
}
.social-ai-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.social-ai-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes socialAiTyping {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.social-ai-typing-dots span { animation: none; opacity: 0.7; }
}
/* AI model seçici butonu (header'da, AI aktifken) */
.social-ai-model-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.95);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 0.16s ease, border-color 0.16s ease;
}
.social-ai-model-btn:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.55);
}
.social-ai-model-btn svg { opacity: 0.85; }
/* Model seçim menüsü (floating) */
.social-ai-model-menu {
position: fixed;
z-index: 240;
min-width: 170px;
padding: 6px;
border-radius: 12px;
background: rgba(28, 26, 30, 0.96);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
animation: socialModelMenuIn 0.14s ease;
}
@keyframes socialModelMenuIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.social-ai-model-item {
display: block;
width: 100%;
text-align: left;
padding: 9px 12px;
border: none;
border-radius: 8px;
background: transparent;
color: rgba(255, 255, 255, 0.82);
font-size: 13px;
cursor: pointer;
transition: background 0.14s ease;
}
.social-ai-model-item:hover { background: rgba(255, 255, 255, 0.07); }
.social-ai-model-item.active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 1);
font-weight: 600;
}
/* ============================================================
Faz 9.0 — Liste arama (friends / DM / grup)
============================================================ */
.social-list-search-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
margin: 8px 12px 4px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3) var(--glass-3-refract, url(#liquid-refraction-3));
border-radius: var(--radius-sm, 14px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.18);
transition: background 200ms ease, border-color 200ms ease,
box-shadow 200ms ease;
}
.social-list-search-wrap:focus-within {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
border-color: var(--stroke-focus, rgba(255, 255, 255, 0.55));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 0 3px rgba(255, 255, 255, 0.10);
}
.social-list-search-icon {
width: 14px;
height: 14px;
color: rgba(255, 255, 255, 0.40);
flex-shrink: 0;
pointer-events: none;
}
.social-list-search-wrap:focus-within .social-list-search-icon {
color: rgba(255, 255, 255, 0.65);
}
.social-list-search-input {
flex: 1;
min-width: 0; /* flex shrinking */
background: transparent;
border: none;
outline: none;
color: rgba(255, 255, 255, 0.92);
font-size: 13px;
font-family: inherit;
padding: 1px 0;
}
.social-list-search-input::placeholder {
color: rgba(255, 255, 255, 0.34);
}
.social-list-search-clear {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.06);
border: none;
border-radius: 50%;
color: rgba(255, 255, 255, 0.55);
cursor: pointer;
flex-shrink: 0;
padding: 0;
transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}
.social-list-search-clear:hover {
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.92);
}
.social-list-search-clear:active { transform: scale(0.88); }
.social-list-search-clear svg {
width: 11px;
height: 11px;
pointer-events: none;
}
/* "Eşleşme yok" boş durumu — empty state'in daha kompakt versiyonu */
.social-list-no-match {
padding: 24px 16px;
text-align: center;
color: rgba(255, 255, 255, 0.45);
font-size: 12.5px;
}
.social-list-no-match strong {
display: block;
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 4px;
}
/* ============================================================
Faz 9.1 — In-chat arama (sohbet içi mesaj arama)
============================================================ */
.social-chat-search-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.22);
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%) var(--glass-3-refract, url(#liquid-refraction-3));
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.25);
animation: socialChatSearchSlideIn 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes socialChatSearchSlideIn {
from { transform: translateY(-6px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.social-chat-search-icon {
width: 14px;
height: 14px;
color: rgba(255, 255, 255, 0.50);
flex-shrink: 0;
pointer-events: none;
}
.social-chat-search-input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: rgba(255, 255, 255, 0.95);
font-size: 13px;
font-family: inherit;
padding: 2px 0;
}
.social-chat-search-input::placeholder {
color: rgba(255, 255, 255, 0.34);
}
.social-chat-search-count {
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
flex-shrink: 0;
min-width: 36px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.social-chat-search-nav,
.social-chat-search-close {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.06);
border: none;
border-radius: 50%;
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
flex-shrink: 0;
padding: 0;
transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}
.social-chat-search-nav:hover,
.social-chat-search-close:hover {
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.95);
}
.social-chat-search-nav:active,
.social-chat-search-close:active { transform: scale(0.88); }
.social-chat-search-nav:disabled {
opacity: 0.32;
cursor: default;
background: rgba(255, 255, 255, 0.03);
}
.social-chat-search-nav svg,
.social-chat-search-close svg {
width: 12px;
height: 12px;
pointer-events: none;
}
/* Mesaj içindeki eşleşme highlight () */
.social-search-highlight {
background: rgba(255, 255, 255, 0.36);
color: inherit;
padding: 0 2px;
margin: 0 -1px;
border-radius: 3px;
box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.30);
}
/* Aktif (current) match — daha vurgulu */
.social-dm-bubble.is-current-search-match .social-search-highlight {
background: rgba(255, 255, 255, 0.72);
color: #000000;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85),
0 0 8px rgba(255, 255, 255, 0.45);
}
/* Aktif match bubble'ı hafif glow */
.social-dm-bubble.is-current-search-match {
outline: 2px solid rgba(255, 255, 255, 0.55);
outline-offset: 2px;
}
/* ============================================================
Faz 9.2 — Global cross-conversation arama overlay
============================================================ */
.social-global-search-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 50;
background:
radial-gradient(circle at 50% 0%, rgba(40, 40, 48, 0.30) 0%, transparent 60%),
rgba(10, 10, 15, 0.90);
-webkit-backdrop-filter: blur(28px) saturate(180%) brightness(0.85);
backdrop-filter: blur(28px) saturate(180%) brightness(0.85) var(--glass-1-refract, url(#liquid-refraction-1));
display: flex;
flex-direction: column;
animation: socialGlobalSearchFadeIn 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes socialGlobalSearchFadeIn {
from { opacity: 0; transform: scale(0.985); }
to { opacity: 1; transform: scale(1); }
}
.social-global-search-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.social-global-search-bar {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border: 1px solid var(--stroke-subtle, rgba(255, 255, 255, 0.10));
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3) var(--glass-3-refract, url(#liquid-refraction-3));
border-radius: var(--radius-sm, 14px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 10px rgba(0, 0, 0, 0.25);
transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.social-global-search-bar:focus-within {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
border-color: var(--stroke-focus, rgba(255, 255, 255, 0.55));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 3px rgba(255, 255, 255, 0.10);
}
.social-global-search-close {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
color: rgba(255, 255, 255, 0.75);
cursor: pointer;
flex-shrink: 0;
padding: 0;
transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}
.social-global-search-close:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.social-global-search-close:active { transform: scale(0.92); }
.social-global-search-close svg { width: 14px; height: 14px; pointer-events: none; }
.social-global-search-chips {
display: flex;
gap: 6px;
padding: 8px 12px;
overflow-x: auto;
scrollbar-width: none;
}
.social-global-search-chips::-webkit-scrollbar { display: none; }
.social-global-search-chip {
flex-shrink: 0;
padding: 5px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.70);
border-radius: 999px;
font-size: 12px;
font-family: inherit;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.social-global-search-chip:hover {
background: rgba(255, 255, 255, 0.09);
color: #fff;
}
.social-global-search-chip.active {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.45);
color: rgba(255, 255, 255, 1);
}
/* Faz 9 cila: regex toggle + gönderen/tarih filtreleri */
.social-global-search-regex-btn {
flex-shrink: 0;
width: 30px;
height: 26px;
margin-left: 4px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.55);
font-family: 'SF Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.social-global-search-regex-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.social-global-search-regex-btn.active {
background: rgba(255, 255, 255, 0.20);
border-color: rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 1);
}
.social-global-search-filters {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px 8px;
flex-wrap: wrap;
}
.social-global-search-sender-wrap {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 140px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
color: rgba(255, 255, 255, 0.45);
}
.social-global-search-sender-input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 12px;
font-family: inherit;
}
.social-global-search-sender-input::placeholder { color: rgba(255, 255, 255, 0.40); }
.social-global-search-date-chips { display: flex; gap: 4px; flex-shrink: 0; }
.social-global-search-date-chip {
padding: 5px 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.65);
border-radius: 999px;
font-size: 11.5px;
font-family: inherit;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.social-global-search-date-chip:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.social-global-search-date-chip.active {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.45);
color: rgba(255, 255, 255, 1);
}
.social-global-search-results {
flex: 1;
overflow-y: auto;
padding: 4px 0 12px;
}
.social-global-search-empty p {
margin: 0;
}
.social-global-search-group {
margin: 4px 0 8px;
padding: 0 12px;
}
.social-global-search-group-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 4px 6px;
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
}
.social-global-search-scope-badge {
display: inline-block;
padding: 1px 7px;
font-size: 9.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
color: rgba(255, 255, 255, 0.75);
}
.social-global-search-scope-badge.dm {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.30);
color: rgba(255, 255, 255, 1);
}
.social-global-search-scope-badge.group {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.30);
color: rgba(255, 255, 255, 1);
}
.social-global-search-group-label {
flex: 1;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.social-global-search-group-count {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.social-global-search-result-row {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 10px;
margin-bottom: 4px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
border: 1px solid var(--stroke-hairline, rgba(255, 255, 255, 0.06));
border-radius: var(--radius-sm, 14px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
cursor: pointer;
transition: background var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)),
box-shadow var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.social-global-search-result-row:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
border-color: var(--stroke-subtle, rgba(255, 255, 255, 0.14));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 3px 12px rgba(0, 0, 0, 0.24);
transform: translateY(-1px);
}
.social-global-search-result-row:active { transform: scale(0.995); }
.social-global-search-result-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.social-global-search-result-sender {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.social-global-search-result-time {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.40);
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.social-global-search-result-text {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.45;
word-break: break-word;
}
.social-global-search-result-text mark.social-search-highlight {
/* Result preview için biraz daha kompakt highlight */
padding: 0 2px;
}
/* ============================================================
Faz 10.0 — WebRTC sesli arama overlay'leri (incoming/outgoing/in-call)
============================================================ */
.social-call-overlay {
/* Default: sosyal panel sidebar'ı içinde absolute (panel ölçülerine sığar).
Fullscreen butonu = browser Fullscreen API → overlay viewport'u kaplar
(Fullscreen API parent containing block'u bypass eder). */
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: var(--z-overlay, 10020);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, var(--glass-1-tint-top, rgba(28, 28, 32, 0.45)) 0%, var(--glass-1-tint-bot, rgba(20, 20, 24, 0.60)) 100%), var(--glass-1-bg, rgba(15, 15, 18, 0.55));
backdrop-filter: blur(var(--glass-1-blur, 36px)) saturate(var(--glass-1-saturate, 1.8)) brightness(1.05) var(--glass-1-refract);
-webkit-backdrop-filter: blur(var(--glass-1-blur, 36px)) saturate(var(--glass-1-saturate, 1.8)) brightness(1.05);
box-shadow:
var(--inset-top-glow),
var(--inset-bot-shadow),
var(--inset-left-rim),
var(--inset-right-rim),
var(--inset-top-bloom),
var(--inset-bot-depth),
var(--shadow-contact),
var(--shadow-lift),
var(--shadow-ambient);
will-change: var(--gpu-will-change);
transform: var(--gpu-transform);
animation: socialCallFadeIn 380ms var(--ease-spring);
}
@keyframes socialCallFadeIn {
0% { opacity: 0; transform: translateY(20px) scale(0.97); }
60% { opacity: 0.95; transform: translateY(-2px) scale(1.005); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.social-call-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px;
max-width: 320px;
text-align: center;
}
.social-call-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 255, 255, 0.14);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 38px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 8px 24px rgba(0, 0, 0, 0.35);
}
.social-call-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.social-call-avatar-pulse {
position: relative;
}
.social-call-avatar-pulse::before,
.social-call-avatar-pulse::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.55);
animation: socialCallPulse 1.6s ease-out infinite;
pointer-events: none;
}
.social-call-avatar-pulse::after { animation-delay: 0.8s; }
@keyframes socialCallPulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.55); opacity: 0; }
}
/* Outgoing'de pulse mavi-yeşil, incoming'de sıcak yeşil */
.social-call-incoming .social-call-avatar-pulse::before,
.social-call-incoming .social-call-avatar-pulse::after {
border-color: rgba(110, 220, 130, 0.60);
}
.social-call-name {
font-size: 22px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
line-height: 1.2;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.social-call-status {
font-size: 14px;
color: rgba(255, 255, 255, 0.62);
letter-spacing: 0.02em;
}
.social-call-duration {
font-variant-numeric: tabular-nums;
font-size: 18px;
color: rgba(255, 255, 255, 0.85);
}
.social-call-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 18px;
margin-top: 24px;
max-width: 100%;
}
.social-call-action-btn {
width: 64px;
height: 64px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
border: 1px solid rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
backdrop-filter: blur(var(--glass-3-blur, 12px)) saturate(1.3);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
padding: 0;
transition: background 180ms ease, border-color 180ms ease,
transform 140ms ease, box-shadow 180ms ease;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 6px 18px rgba(0, 0, 0, 0.35);
}
.social-call-action-btn:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.22);
}
.social-call-action-btn:active { transform: scale(0.92); }
.social-call-action-btn svg {
width: 26px;
height: 26px;
pointer-events: none;
}
.social-call-action-btn.accept {
background: linear-gradient(135deg, rgba(80, 200, 120, 0.85), rgba(50, 170, 95, 0.75));
border-color: rgba(110, 220, 140, 0.7);
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.30),
0 6px 20px rgba(60, 180, 100, 0.45);
/* Hafif sallanma — kabul butonu dikkat çekici olsun */
animation: socialCallAcceptShake 1.4s ease-in-out infinite;
}
.social-call-action-btn.accept:hover {
background: linear-gradient(135deg, rgba(95, 220, 135, 0.95), rgba(60, 190, 110, 0.85));
animation-play-state: paused;
}
@keyframes socialCallAcceptShake {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-10deg); }
40% { transform: rotate(10deg); }
60% { transform: rotate(-6deg); }
80% { transform: rotate(6deg); }
}
.social-call-action-btn.reject {
background: linear-gradient(135deg, rgba(255, 80, 90, 0.85), rgba(220, 50, 60, 0.78));
border-color: rgba(255, 110, 120, 0.7);
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 6px 20px rgba(220, 60, 70, 0.45);
}
.social-call-action-btn.reject:hover {
background: linear-gradient(135deg, rgba(255, 95, 105, 0.95), rgba(230, 60, 70, 0.88));
}
.social-call-action-btn.secondary.active {
background: rgba(255, 255, 255, 0.20);
border-color: rgba(255, 255, 255, 0.50);
color: rgba(255, 255, 255, 1);
}
/* Faz 10.4a: Ekran paylaşımı aktif → monokrom beyaz vurgu (mute'tan ayır) */
#socialCallScreenShareBtn.active,
#socialGroupCallScreenShareBtn.active {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.55);
color: rgba(255, 255, 255, 1);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.28);
}
/* ============================================================
Faz 10.4d — Active speaker detection (grup tile glow)
============================================================ */
.social-group-call-tile.is-speaking {
outline: 2px solid rgba(80, 220, 130, 0.75);
outline-offset: -2px;
box-shadow: 0 0 16px rgba(80, 220, 130, 0.35);
transition: outline-color 120ms ease, box-shadow 120ms ease;
}
/* Video mode'da is-speaking outline biraz daha kuvvetli */
.social-group-call-tile.video-active.is-speaking {
outline-width: 3px;
}
/* ============================================================
Faz 10.4f — Bağlantı kalitesi göstergesi (signal bars)
============================================================ */
/* DM in-call overlay'de duration yanında */
.social-call-quality {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
vertical-align: middle;
opacity: 0.85;
}
.social-call-quality svg .qb1,
.social-call-quality svg .qb2,
.social-call-quality svg .qb3 {
opacity: 0.25;
transition: opacity 200ms ease, fill 200ms ease;
}
/* Good: 3 bar yeşil */
.social-call-quality.quality-good svg {
color: rgba(80, 220, 130, 1);
}
.social-call-quality.quality-good svg .qb1,
.social-call-quality.quality-good svg .qb2,
.social-call-quality.quality-good svg .qb3 {
opacity: 1;
}
/* Fair: 2 bar amber */
.social-call-quality.quality-fair svg {
color: rgba(255, 255, 255, 1);
}
.social-call-quality.quality-fair svg .qb1,
.social-call-quality.quality-fair svg .qb2 {
opacity: 1;
}
/* Poor: 1 bar kırmızı */
.social-call-quality.quality-poor svg {
color: rgba(255, 100, 100, 1);
}
.social-call-quality.quality-poor svg .qb1 {
opacity: 1;
}
/* Grup tile köşesinde küçük signal bar — CSS-only via ::before */
.social-group-call-tile.quality-good::before,
.social-group-call-tile.quality-fair::before,
.social-group-call-tile.quality-poor::before {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
z-index: 4;
box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35);
}
.social-group-call-tile.quality-good::before {
background: rgba(80, 220, 130, 1);
}
.social-group-call-tile.quality-fair::before {
background: rgba(255, 255, 255, 1);
}
.social-group-call-tile.quality-poor::before {
background: rgba(255, 100, 100, 1);
}
/* Tile'a position:relative kazandır (zaten relative ama emin olalım) */
.social-group-call-tile {
position: relative;
}
/* ============================================================
Faz 10.5 — Beyaz Tahta (Whiteboard) overlay + toolbar + canvas
============================================================ */
.social-whiteboard-overlay {
position: absolute;
inset: 0;
z-index: calc(var(--z-overlay, 10020) + 5);
display: flex;
background: var(--surface-base, #0a0a0c);
will-change: var(--gpu-will-change);
transform: var(--gpu-transform);
animation: socialWhiteboardFadeIn 380ms var(--ease-spring);
}
@keyframes socialWhiteboardFadeIn {
0% { opacity: 0; transform: scale(0.985); }
100% { opacity: 1; transform: scale(1); }
}
/* Sol toolbar — 56px sabit genişlik */
.social-whiteboard-toolbar {
width: 56px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 12px 6px;
background: linear-gradient(180deg, var(--glass-2-tint-top, rgba(28, 28, 32, 0.55)) 0%, var(--glass-2-tint-bot, rgba(20, 20, 24, 0.72)) 100%), var(--glass-2-bg, rgba(20, 20, 24, 0.66));
backdrop-filter: blur(var(--glass-2-blur, 22px)) saturate(var(--glass-2-saturate, 1.5)) brightness(1.04) var(--glass-2-refract);
-webkit-backdrop-filter: blur(var(--glass-2-blur, 22px)) saturate(var(--glass-2-saturate, 1.5)) brightness(1.04);
border-right: 1px solid var(--glass-2-border, rgba(255, 255, 255, 0.08));
box-shadow:
var(--inset-top-glow),
var(--inset-bot-shadow),
var(--inset-left-rim),
var(--inset-right-rim),
var(--shadow-contact),
var(--shadow-lift);
overflow-y: auto;
}
.social-whiteboard-tool-group,
.social-whiteboard-color-group,
.social-whiteboard-brush-group,
.social-whiteboard-action-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.social-whiteboard-tool-group { padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.social-whiteboard-color-group { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.social-whiteboard-brush-group { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.social-whiteboard-action-group { padding-top: 8px; }
/* Faz 10.5c: brush size butonu (dot icon ortalı) */
.social-whiteboard-brush {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 8px;
cursor: pointer;
padding: 0;
transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.social-whiteboard-brush:hover {
background: rgba(255, 255, 255, 0.09);
}
.social-whiteboard-brush:active { transform: scale(0.92); }
.social-whiteboard-brush.active {
background: rgba(255, 255, 255, 0.20);
border-color: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}
.social-whiteboard-brush .brush-dot {
display: inline-block;
background: rgba(255, 255, 255, 0.88);
border-radius: 50%;
flex-shrink: 0;
}
.social-whiteboard-brush.active .brush-dot {
background: rgba(255, 255, 255, 1);
}
/* Faz 10.5d: text input modal (canvas üstüne floating, click pozisyonuna yerleşir) */
.social-whiteboard-text-input {
position: fixed;
z-index: 230;
display: none;
pointer-events: auto;
}
.social-whiteboard-text-input input {
padding: 6px 10px;
background: rgba(20, 20, 28, 0.95);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1.5px solid rgba(255, 255, 255, 0.55);
border-radius: 8px;
color: rgba(255, 255, 255, 0.95);
font-size: 14px;
font-family: inherit;
outline: none;
min-width: 180px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45),
0 0 0 3px rgba(255, 255, 255, 0.18);
}
.social-whiteboard-text-input input::placeholder {
color: rgba(255, 255, 255, 0.40);
font-size: 12px;
}
/* Tool butonu (pen, eraser) */
.social-whiteboard-tool {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 10px;
color: rgba(255, 255, 255, 0.75);
cursor: pointer;
padding: 0;
transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.social-whiteboard-tool:hover {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.95);
}
.social-whiteboard-tool:active { transform: scale(0.93); }
.social-whiteboard-tool.active {
background: rgba(255, 255, 255, 0.20);
border-color: rgba(255, 255, 255, 0.55);
color: rgba(255, 255, 255, 1);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.28);
}
.social-whiteboard-tool svg {
width: 18px;
height: 18px;
pointer-events: none;
}
/* Renk butonu — küçük dolu daire */
.social-whiteboard-color {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.18);
cursor: pointer;
padding: 0;
transition: transform 120ms ease, border-color 160ms ease,
box-shadow 160ms ease;
}
.social-whiteboard-color:hover { transform: scale(1.10); }
.social-whiteboard-color:active { transform: scale(0.92); }
.social-whiteboard-color.active {
border-color: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
transform: scale(1.05);
}
/* Action butonu (undo, clear, close) */
.social-whiteboard-action {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 10px;
color: rgba(255, 255, 255, 0.75);
cursor: pointer;
padding: 0;
transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}
.social-whiteboard-action:hover {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.95);
}
.social-whiteboard-action:active { transform: scale(0.93); }
.social-whiteboard-action.danger {
background: rgba(255, 80, 90, 0.10);
border-color: rgba(255, 80, 90, 0.32);
color: rgba(255, 160, 160, 1);
}
.social-whiteboard-action.danger:hover {
background: rgba(255, 80, 90, 0.20);
color: rgba(255, 200, 200, 1);
}
.social-whiteboard-action svg {
width: 16px;
height: 16px;
pointer-events: none;
}
/* Canvas wrap — tüm kalan alan */
.social-whiteboard-canvas-wrap {
flex: 1;
position: relative;
overflow: hidden;
background:
linear-gradient(135deg, #0e0f15, #1a1b25);
/* Subtle grid pattern */
background-image:
linear-gradient(135deg, #0e0f15, #1a1b25),
repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(255,255,255,0.025) 39px, rgba(255,255,255,0.025) 40px),
repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255,255,255,0.025) 39px, rgba(255,255,255,0.025) 40px);
background-blend-mode: normal;
}
#socialWhiteboardCanvas {
display: block;
width: 100%;
height: 100%;
cursor: crosshair;
touch-action: none; /* mobile pinch-zoom yerine çizim */
}
/* Mobile: toolbar tepeye al, tam genişlik (yatay scroll) */
@media (max-width: 480px) {
.social-whiteboard-overlay {
flex-direction: column;
}
.social-whiteboard-toolbar {
width: 100%;
height: 56px;
flex-direction: row;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
overflow-x: auto;
overflow-y: hidden;
gap: 12px;
}
.social-whiteboard-tool-group,
.social-whiteboard-color-group,
.social-whiteboard-brush-group,
.social-whiteboard-action-group {
flex-direction: row;
padding: 0 6px;
}
.social-whiteboard-tool-group,
.social-whiteboard-color-group,
.social-whiteboard-brush-group {
border-bottom: none;
border-right: 1px solid rgba(255,255,255,0.08);
}
}
/* Grup self tile ekran paylaşırken: mirror'sız (kullanıcı kendi ekranını
normal yönde görür) + ince mavi border vurgu */
.social-group-call-tile.self.screen-sharing.video-active {
outline: 2px solid rgba(255, 255, 255, 0.55);
outline-offset: -2px;
}
.social-group-call-tile.self.screen-sharing.video-active .social-group-call-tile-video {
transform: none !important; /* scaleX(-1) iptal */
}
/* ============================================================
Faz 10.1 — Görüntülü arama (video mode layout)
============================================================ */
/* Audio mode'da video elementleri gizli */
.social-call-remote-video,
.social-call-local-video {
display: none;
}
/* Video mode: in-call overlay'i full screen, remote video background,
local video PiP sağ-alt köşede, controls alta */
.social-call-overlay.video-mode {
background: #050507;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.social-call-overlay.video-mode .social-call-remote-video {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: #050507;
}
.social-call-overlay.video-mode .social-call-local-video {
display: block;
position: absolute;
/* Sidebar mode'da action bar 2 satır wrap edebilir (~130px); PiP onun üstünde */
bottom: 140px;
right: 12px;
/* Sidebar'da daha kompakt PiP */
width: 84px;
height: 118px;
border-radius: 12px;
object-fit: cover;
border: 1.5px solid rgba(255, 255, 255, 0.28);
background: #0a0a0e;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.50),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
/* Kendi görüntüsünü mirror et (selfie kamerası natural) */
transform: scaleX(-1);
z-index: 2;
}
/* Video mode'da content'i top-bar (name+duration) ve bottom-bar (controls) yap */
.social-call-overlay.video-mode .social-call-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px 16px;
max-width: none;
background:
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);
z-index: 3;
pointer-events: none; /* sadece çocukları interaktif */
}
.social-call-overlay.video-mode .social-call-content > * {
pointer-events: auto;
}
/* Avatar video mode'da gizli (remote video zaten gösteriliyor) */
.social-call-overlay.video-mode .social-call-avatar {
display: none;
}
.social-call-overlay.video-mode .social-call-name {
align-self: center;
font-size: 18px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.60);
}
.social-call-overlay.video-mode .social-call-status {
align-self: center;
margin-top: -8px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
}
.social-call-overlay.video-mode .social-call-actions {
align-self: center;
margin-top: auto;
margin-bottom: 0;
/* Sidebar mode: küçük gap + flex-wrap (9 buton sığacak) */
flex-wrap: wrap;
gap: 10px 12px;
max-width: 100%;
padding: 0 8px;
}
.social-call-overlay.video-mode .social-call-action-btn {
/* Sidebar mode'da daha küçük butonlar (9 tane sığsın). Fullscreen'de büyür. */
width: 44px;
height: 44px;
}
.social-call-overlay.video-mode .social-call-action-btn svg {
width: 18px;
height: 18px;
}
/* Mobile: local PiP'i biraz daha küçük */
@media (max-width: 480px) {
.social-call-overlay.video-mode .social-call-local-video {
width: 76px;
height: 108px;
bottom: 96px;
right: 12px;
}
}
/* ============================================================
Faz 10.5+ UX: Video çağrı polish — fullscreen + auto-hide + PiP corners
============================================================ */
/* Top bar: name + duration crisp, backdrop-blur, always visible */
.social-call-overlay.video-mode .social-call-name {
background: rgba(15, 15, 20, 0.45);
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.10);
padding: 8px 16px;
border-radius: 999px;
text-shadow: none;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.01em;
align-self: center;
margin-top: 4px;
pointer-events: auto;
transition: opacity 240ms ease, transform 240ms ease;
}
.social-call-overlay.video-mode .social-call-status {
background: rgba(15, 15, 20, 0.40);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 4px 12px;
border-radius: 999px;
margin-top: 6px;
text-shadow: none;
display: inline-flex;
align-items: center;
gap: 8px;
pointer-events: auto;
transition: opacity 240ms ease, transform 240ms ease;
}
/* Auto-hide: controls-hidden class iken üst+alt UI'lar fade'lensin */
.social-call-overlay.video-mode.controls-hidden .social-call-name,
.social-call-overlay.video-mode.controls-hidden .social-call-status {
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
}
.social-call-overlay.video-mode.controls-hidden .social-call-actions {
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 240ms ease, transform 240ms ease;
}
.social-call-overlay.video-mode .social-call-actions {
transition: opacity 240ms ease, transform 240ms ease;
}
/* Local PiP: 4 köşe snap + tıklanabilir cycle */
.social-call-overlay.video-mode .social-call-local-video {
cursor: pointer;
transition: top 280ms cubic-bezier(0.32, 0.72, 0, 1),
right 280ms cubic-bezier(0.32, 0.72, 0, 1),
bottom 280ms cubic-bezier(0.32, 0.72, 0, 1),
left 280ms cubic-bezier(0.32, 0.72, 0, 1),
transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
opacity 240ms ease;
}
.social-call-overlay.video-mode .social-call-local-video:hover {
border-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55),
0 0 0 2px rgba(255, 255, 255, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Default = br (bottom-right) — sidebar mode 140px (action bar 2-row wrap için) */
.social-call-overlay.video-mode.pip-br .social-call-local-video,
.social-call-overlay.video-mode .social-call-local-video {
top: auto; right: 12px; bottom: 140px; left: auto;
}
.social-call-overlay.video-mode.pip-bl .social-call-local-video {
top: auto; right: auto; bottom: 140px; left: 12px;
}
.social-call-overlay.video-mode.pip-tr .social-call-local-video {
top: 70px; right: 12px; bottom: auto; left: auto;
}
.social-call-overlay.video-mode.pip-tl .social-call-local-video {
top: 70px; right: auto; bottom: auto; left: 12px;
}
/* Auto-hide sırasında PiP de hafifçe sönümlensin (ama görünür kalsın) */
.social-call-overlay.video-mode.controls-hidden .social-call-local-video {
opacity: 0.65;
}
.social-call-overlay.video-mode.controls-hidden .social-call-local-video:hover {
opacity: 1;
}
/* Fullscreen mode: viewport tamamı; daha geniş layout + daha büyük butonlar */
.social-call-overlay.is-fullscreen,
.social-call-overlay:fullscreen,
.social-call-overlay:-webkit-full-screen {
background: #000;
}
/* Fullscreen video mode: top bar üstte ortalı + bottom controls büyük */
.social-call-overlay.is-fullscreen.video-mode .social-call-content {
padding: 32px 28px;
background:
linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 16%,
rgba(0,0,0,0) 70%, rgba(0,0,0,0.75) 100%);
}
.social-call-overlay.is-fullscreen.video-mode .social-call-name {
font-size: 22px;
padding: 10px 22px;
}
.social-call-overlay.is-fullscreen.video-mode .social-call-status {
padding: 6px 16px;
}
.social-call-overlay.is-fullscreen.video-mode .social-call-action-btn {
width: 64px;
height: 64px;
}
.social-call-overlay.is-fullscreen.video-mode .social-call-action-btn svg {
width: 26px;
height: 26px;
}
.social-call-overlay.is-fullscreen.video-mode .social-call-actions {
/* Fullscreen'de geniş alan var: tek satır + büyük gap */
flex-wrap: nowrap;
gap: 20px;
padding: 0;
}
/* Fullscreen'de local PiP daha büyük */
.social-call-overlay.is-fullscreen.video-mode .social-call-local-video {
width: 200px;
height: 280px;
border-radius: 16px;
}
.social-call-overlay.is-fullscreen.video-mode.pip-tr .social-call-local-video,
.social-call-overlay.is-fullscreen.video-mode.pip-tl .social-call-local-video {
top: 32px;
}
.social-call-overlay.is-fullscreen.video-mode.pip-br .social-call-local-video,
.social-call-overlay.is-fullscreen.video-mode.pip-bl .social-call-local-video {
bottom: 130px;
}
.social-call-overlay.is-fullscreen.video-mode.pip-tr .social-call-local-video,
.social-call-overlay.is-fullscreen.video-mode.pip-br .social-call-local-video {
right: 32px;
}
.social-call-overlay.is-fullscreen.video-mode.pip-tl .social-call-local-video,
.social-call-overlay.is-fullscreen.video-mode.pip-bl .social-call-local-video {
left: 32px;
}
/* Mobile fullscreen: PiP biraz daha küçük */
@media (max-width: 768px) {
.social-call-overlay.is-fullscreen.video-mode .social-call-local-video {
width: 120px;
height: 168px;
}
}
/* Fullscreen button active state */
#socialCallFullscreenBtn.active {
background: rgba(255, 255, 255, 0.20);
border-color: rgba(255, 255, 255, 0.50);
color: rgba(255, 255, 255, 1);
}
/* ============================================================
Faz 10.3b — Grup arama overlay (mesh, audio-only MVP)
============================================================ */
/* Aktif grup çağrısı overlay'i — DM in-call overlay ile aynı z-index 200
katmanı; layout farklı (header + grid + footer) */
.social-group-call-in-call {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
padding: 0;
}
.social-group-call-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: rgba(0, 0, 0, 0.30);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.social-group-call-title {
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.social-group-call-duration {
font-size: 13px;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.65);
flex-shrink: 0;
margin-left: 12px;
}
.social-group-call-grid {
flex: 1;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 14px;
overflow-y: auto;
align-content: start;
}
/* Adaptive grid: 2+ kişi → 2 sütun */
.social-group-call-grid[data-count="2"],
.social-group-call-grid[data-count="3"],
.social-group-call-grid[data-count="4"],
.social-group-call-grid[data-count="5"],
.social-group-call-grid[data-count="6"] {
grid-template-columns: 1fr 1fr;
}
.social-group-call-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 10px;
min-height: 110px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
transition: border-color 200ms ease, background 200ms ease, transform 140ms ease;
}
.social-group-call-tile.self {
border-color: rgba(255, 255, 255, 0.30);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
}
.social-group-call-tile.self.muted {
border-color: rgba(255, 255, 255, 0.55);
}
.social-group-call-tile.peer-failed {
border-color: rgba(255, 90, 90, 0.45);
opacity: 0.55;
}
.social-group-call-tile-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 255, 255, 0.16);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
}
.social-group-call-tile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.social-group-call-tile-name {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.86);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-weight: 500;
}
.social-group-call-footer {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px 12px;
padding: 14px 12px;
background: rgba(0, 0, 0, 0.30);
border-top: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
max-width: 100%;
}
.social-group-call-footer .social-call-action-btn {
width: 44px;
height: 44px;
}
.social-group-call-footer .social-call-action-btn svg {
width: 18px;
height: 18px;
}
/* Grup fullscreen'de butonlar büyür */
.social-call-overlay.is-fullscreen .social-group-call-footer {
flex-wrap: nowrap;
gap: 20px;
padding: 18px 22px;
}
.social-call-overlay.is-fullscreen .social-group-call-footer .social-call-action-btn {
width: 60px;
height: 60px;
}
.social-call-overlay.is-fullscreen .social-group-call-footer .social-call-action-btn svg {
width: 24px;
height: 24px;
}
/* Incoming grup çağrısı — DM incoming ile aynı layout; data tüm CSS DM
.social-call-incoming class chain'ini paylaşıyor, ek özel kural yok */
.social-group-call-incoming .social-call-avatar {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
border-color: rgba(255, 255, 255, 0.35);
}
.social-group-call-incoming .social-call-avatar-pulse::before,
.social-group-call-incoming .social-call-avatar-pulse::after {
border-color: rgba(255, 255, 255, 0.55);
}
/* Mobile: tek sütun bile fazla; tile padding daralt */
@media (max-width: 480px) {
.social-group-call-grid {
padding: 10px;
gap: 8px;
}
.social-group-call-tile {
padding: 12px 8px;
min-height: 96px;
}
.social-group-call-tile-avatar {
width: 48px;
height: 48px;
font-size: 18px;
}
}
/* ============================================================
Faz 10.3c — Grup görüntülü arama (per-tile video + mirror + overlays)
============================================================ */
/* Audio mode'da video elementleri gizli */
.social-group-call-tile-video {
display: none;
}
/* Tile içinde video aktif olduğunda: video background olur,
avatar gizlenir, name bottom-overlay alır */
.social-group-call-tile.video-active {
padding: 0;
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
min-height: 0; /* aspect-ratio yönetiyor */
background: #050507;
}
.social-group-call-tile.video-active .social-group-call-tile-video {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.social-group-call-tile.video-active .social-group-call-tile-avatar {
display: none;
}
.social-group-call-tile.video-active .social-group-call-tile-name {
position: absolute;
left: 8px;
right: 8px;
bottom: 6px;
padding: 3px 8px;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
border-radius: 6px;
font-size: 11.5px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
z-index: 2;
}
/* Self tile video preview mirror'la (selfie natural feel) */
.social-group-call-tile.self.video-active .social-group-call-tile-video {
transform: scaleX(-1);
}
/* Kamera kapalı: video element var ama track disabled → avatar fallback geri gelsin
(sadece self için; remote için peer'ın video track disabled olduğunda
ontrack'te kontrol edilemediği için bu class peer'a da set'lenebilir) */
.social-group-call-tile.camera-off .social-group-call-tile-video {
visibility: hidden;
}
.social-group-call-tile.camera-off {
/* Avatar gözüksün (video-active class'ı da olabilir ama camera-off override eder) */
aspect-ratio: auto;
padding: 16px 10px;
min-height: 110px;
}
.social-group-call-tile.camera-off .social-group-call-tile-avatar {
display: inline-flex;
}
.social-group-call-tile.camera-off .social-group-call-tile-name {
position: static;
background: none;
padding: 0;
font-size: 12.5px;
text-shadow: none;
}
/* Mute göstergesi video tile'da köşede mic-off iconla aktif/değiş 10.4'te;
şimdilik tile border'ı amber */
.social-group-call-tile.video-active.muted {
outline: 2px solid rgba(255, 255, 255, 0.55);
outline-offset: -2px;
}
/* Mobile: video tile aspect ratio biraz daha kompakt */
@media (max-width: 480px) {
.social-group-call-tile.video-active {
aspect-ratio: 3 / 4; /* portrait, dikey ekranda 2 sütunda daha verimli */
}
}
/* Reduced motion fallbacks */
@media (prefers-reduced-motion: reduce) {
.social-call-overlay,
.social-whiteboard-overlay {
animation: none !important;
transform: none !important;
}
}
/* ============================================================
Faz 10.6 — Reactions (emoji burst) + Picker + Speaker view + Drag PiP
============================================================ */
/* Reaction picker wrap (button + picker absolute above) */
.social-call-reaction-wrap {
position: relative;
display: inline-flex;
}
/* Reaction picker — capsule glass strip with 8 emoji */
.social-call-reaction-picker {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(8px) scale(0.92);
display: flex;
gap: 4px;
padding: 8px 10px;
background: rgba(20, 22, 32, 0.78);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
box-shadow:
0 10px 32px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
opacity: 0;
pointer-events: none;
transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
z-index: 4;
white-space: nowrap;
}
.social-call-reaction-picker.visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
}
/* Per-emoji reaction button */
.social-call-reaction-emoji {
width: 38px;
height: 38px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
font-size: 22px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 160ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
-webkit-tap-highlight-color: transparent;
}
.social-call-reaction-emoji:hover {
background: rgba(255, 255, 255, 0.10);
transform: scale(1.18);
}
.social-call-reaction-emoji:active {
transform: scale(0.92);
}
/* Reaction layer — full overlay (in-call) where bursts fly up */
.social-call-reaction-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 3;
}
/* Per-tile reaction layer (grup) */
.social-reaction-tile-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: visible;
z-index: 5;
}
/* Reaction burst element — animation defines float */
.social-reaction-burst {
user-select: none;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.50));
}
/* Float keyframe: yukarı, hafif sallanma, son ~600ms fade out */
@keyframes socialReactionFloat {
0% {
transform: translate(var(--rxDX, 0px), 0) scale(0.75);
opacity: 0;
}
12% {
transform: translate(var(--rxDX, 0px), -8px) scale(1.15);
opacity: 1;
}
60% {
transform: translate(calc(var(--rxDX, 0px) + 12px), -140px) scale(1) rotate(6deg);
opacity: 1;
}
100% {
transform: translate(calc(var(--rxDX, 0px) - 6px), -260px) scale(0.85) rotate(-4deg);
opacity: 0;
}
}
/* Mobile: picker daha kompakt */
@media (max-width: 480px) {
.social-call-reaction-picker {
padding: 6px 8px;
gap: 2px;
}
.social-call-reaction-emoji {
width: 34px;
height: 34px;
font-size: 20px;
}
}
/* ============================================================
Faz 10.6 — Speaker view (grup, video mode)
Aktif konuşan tile büyük, diğerleri alt strip
============================================================ */
.social-call-overlay.video-mode.speaker-view .social-group-call-grid {
display: grid;
grid-template-rows: 1fr 110px;
grid-template-columns: 1fr;
gap: 8px;
padding: 0;
}
.social-call-overlay.video-mode.speaker-view .social-group-call-tile {
border-radius: 14px;
aspect-ratio: auto;
height: auto;
}
/* Büyük konuşan tile (row 1, full width) */
.social-call-overlay.video-mode.speaker-view .social-group-call-tile.is-speaker {
grid-row: 1;
grid-column: 1;
min-height: 0;
width: 100%;
height: 100%;
border-radius: 16px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}
/* Strip tile'lar (row 2) — yatay scroll */
.social-call-overlay.video-mode.speaker-view .social-group-call-grid {
grid-template-areas:
"big"
"strip";
}
.social-call-overlay.video-mode.speaker-view .social-group-call-tile.is-speaker {
grid-area: big;
}
/* Speaker view'da geri kalan tile'lar strip'te */
.social-call-overlay.video-mode.speaker-view .social-group-call-tile:not(.is-speaker) {
grid-area: strip;
width: 90px;
height: 90px;
aspect-ratio: 1 / 1;
border-radius: 12px;
flex-shrink: 0;
}
/* Strip layout (multiple non-speaker tile'lar yatay) */
.social-call-overlay.video-mode.speaker-view .social-group-call-grid {
grid-template-areas: "big" "strip";
}
.social-call-overlay.video-mode.speaker-view
.social-group-call-tile:not(.is-speaker) ~ .social-group-call-tile:not(.is-speaker) {
display: inline-block;
}
/* Speaker view btn active state */
#socialGroupCallSpeakerViewBtn.active {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.52);
color: #e8e8ea;
}
/* ============================================================
Faz 10.6 — Drag-able PiP (pointer-driven, snap to nearest corner)
============================================================ */
.social-call-overlay.video-mode .social-call-local-video.is-dragging {
transition: none;
cursor: grabbing;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.70),
0 0 0 3px rgba(255, 255, 255, 0.40);
}
/* PiP API active glow */
#socialCallPipBtn.active,
#socialGroupCallPipBtn.active {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.52);
color: #e8e8ea;
}
/* ============================================================
Faz 12 — Ana AI chat'e arkadaş davet (shared session)
============================================================ */
/* Davet butonu (dynamic island içinde) — Faz 12 v4: liquid-glass ikon
(img/icons/user-plus.svg) kullanır; görünüm/renk/boyut/hover tamamen
.island-shortcut'tan miras alınır. Özel override YOK (mavi de yok). */
/* Faz 12 v2: Active chip + stacked avatars + count CSS KALDIRILDI.
Shared chat artık normal chat-item olarak sidebar'da görünür. */
/* Ortak sohbet inline notu (member join/leave) */
.ai-shared-inline-note {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 12px auto;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 999px;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
width: fit-content;
max-width: 90%;
animation: aiSharedInlineNoteIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes aiSharedInlineNoteIn {
0% { opacity: 0; transform: translateY(-4px) scale(0.92); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-shared-inline-note-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #6ee7a3;
box-shadow: 0 0 8px rgba(110, 231, 163, 0.55);
}
.ai-shared-inline-note.note-leave .ai-shared-inline-note-dot {
background: #ffffff;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
}
.ai-shared-inline-note-text {
letter-spacing: 0.01em;
}
/* Banner pulse keyframe (sidebar dot için hâlâ kullanılıyor) */
@keyframes aiSharedBannerDotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(110, 231, 163, 0.6); }
50% { box-shadow: 0 0 0 8px rgba(110, 231, 163, 0); }
}
/* Faz 12+++ Refactor: shared chat artık #chatMessages içinde render edilir.
Mesajlar normal chat'le aynı container'da; sender header ile ayrılır.
*/
/* Faz 12 simplification: shared mode "ekstra" görselleri kaldırıldı.
Normal chat hissi — sadece sidebar entry'si ile prominence + compact banner.
- Dynamic island green tint: KALDIRILDI
- Sidebar dim: KALDIRILDI (kullanıcı serbest navigasyon)
- Composer green border: KALDIRILDI
- Sidebar guard (confirm modal) hâlâ aktif — yanlışlıkla çıkma korunması
*/
/* Faz 12 v2: Sidebar "ai-shared-sidebar-*" özel section CSS'leri KALDIRILDI.
Shared chat artık normal .chat-item olarak görünür. Subtitle'da subtle
"X ile • N kişi" muted text indicator (chat-shared-subtitle class). */
.chat-item.is-shared .chat-shared-subtitle {
display: flex;
align-items: center;
font-size: 12px;
color: rgba(110, 231, 163, 0.65);
letter-spacing: 0.01em;
}
.chat-item.is-shared .chat-shared-subtitle svg {
color: rgba(110, 231, 163, 0.85);
flex-shrink: 0;
}
/* Faz 12 v2 (revize): Ortak sohbet artık normal chat ekranıyla BİREBİR render
edilir (.message.user-message / .message.ai-message). Peer (arkadaş) mesajı
sol ai-message layout'unu kullanır; tek fark header'da model-badge yerine
arkadaşın küçük avatarı + adı gösterilir. */
.ai-shared-peer-badge {
gap: 7px;
}
.ai-shared-peer-badge-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.18));
}
/* model-badge img (20px contain) kuralını ezerek yuvarlak avatarı doldur */
.ai-shared-peer-badge-avatar img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
display: block;
border-radius: 50%;
}
/* Fotoğrafsız fallback — baş harf (hem header hem sol avatar) */
.avatar-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-weight: 700;
color: #fff;
line-height: 1;
}
.ai-shared-peer-badge-avatar .avatar-letter {
font-size: 10px;
}
.ai-shared-self-msg .message-avatar .avatar-letter,
.ai-shared-peer-msg .message-avatar .avatar-letter {
font-size: 15px;
}
/* Profil fotoğrafı — self + peer sol avatarı 36px daireyi doldursun (cover).
Normal chat'in model-logo'ya yönelik 24px-contain kuralını ezer; ortak
sohbette herkesin kendi fotoğrafı (ör. Google) yuvarlak avatar gibi görünür. */
.ai-shared-self-msg .message-avatar img,
.ai-shared-peer-msg .message-avatar img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
border-radius: 50%;
}
/* Faz 12 v2: Shared mesaj normal AI chat bubble layout — sadece peer mesajının
İLK'inde küçük header (Telegram pattern, ardışık aynı sender gruplanır).
Self → right side normal user bubble, AI → left normal AI bubble, Peer → left bubble + header */
.ai-shared-msg-row {
margin: 0;
}
.ai-shared-msg-row.message-peer .ai-shared-msg-header + .ai-shared-msg-body {
/* Peer body header'dan sonra, küçük gap */
margin-top: 2px;
}
.ai-shared-msg-row .ai-shared-msg-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.ai-shared-msg-row .ai-shared-msg-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 11px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.ai-shared-msg-row .ai-shared-msg-avatar img {
width: 100%; height: 100%; object-fit: cover;
}
.ai-shared-msg-row.message-ai .ai-shared-msg-avatar {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.18));
color: #ffffff;
}
.ai-shared-msg-row .ai-shared-msg-name {
font-size: 12.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.78);
}
.ai-shared-msg-row.message-ai .ai-shared-msg-name {
color: #ffffff;
}
.ai-shared-msg-row .ai-shared-msg-body {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.05);
border-radius: 14px;
font-size: 14.5px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
max-width: 80%;
margin-left: 32px; /* avatar align */
}
.ai-shared-msg-row.message-ai .ai-shared-msg-body {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border-left: 2px solid rgba(255, 255, 255, 0.40);
}
/* Empty state — shared session ilk açıldığında */
.empty-state.ai-shared-empty-conv .empty-state-icon {
color: #6ee7a3;
}
/* Modal overlay (3 modal aynı pattern: invite list, incoming, info) */
.ai-shared-modal {
position: fixed;
inset: 0;
z-index: 10050;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.ai-shared-modal-backdrop {
position: absolute;
inset: 0;
background: var(--modal-scrim);
-webkit-backdrop-filter: var(--modal-scrim-filter);
backdrop-filter: var(--modal-scrim-filter);
animation: aiSharedFadeIn 200ms ease;
}
@keyframes aiSharedFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Monokrom macro glass + gerçek kırılma (mavi ton kaldırıldı) */
.ai-shared-modal-card {
position: relative;
isolation: isolate;
width: 100%;
max-width: 440px;
max-height: 80vh;
background:
linear-gradient(180deg, var(--glass-1-tint-top) 0%, var(--glass-1-tint-bot) 100%),
var(--glass-1-bg) !important;
-webkit-backdrop-filter: blur(var(--glass-1-blur)) saturate(var(--glass-1-saturate)) brightness(1.05);
backdrop-filter: blur(var(--glass-1-blur)) saturate(var(--glass-1-saturate)) brightness(1.05) var(--glass-1-refract);
border: 1px solid var(--glass-1-border) !important;
border-radius: var(--radius-md, 22px) !important;
box-shadow: var(--glass-card-shadow) !important;
color: rgba(255, 255, 255, 0.92);
padding: 24px 24px 22px !important;
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
animation: aiSharedSlideIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.ai-shared-modal-card::before {
content: "" !important;
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background: var(--glass-specular) !important;
mix-blend-mode: overlay;
opacity: 0.8;
}
.ai-shared-modal-card > * { position: relative; z-index: 1; }
@keyframes aiSharedSlideIn {
from { opacity: 0; transform: translateY(24px) scale(0.93); filter: blur(4px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}
.ai-shared-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 2;
}
.ai-shared-modal-header h3 {
margin: 0;
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
color: #fff !important;
display: flex;
align-items: center;
gap: 8px;
}
.ai-shared-modal-header h3 svg.header-icon-social {
color: #ffffff !important;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
}
.ai-shared-modal-close {
width: 32px;
height: 32px;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
z-index: 2;
}
.ai-shared-modal-close:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
transform: rotate(90deg) scale(1.08) !important;
}
.ai-shared-modal-subtitle {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.6) !important;
line-height: 1.45;
z-index: 2;
}
/* Friends list (davet seçim modal) */
.ai-shared-friends-list {
display: flex;
flex-direction: column;
gap: 8px !important;
overflow-y: auto;
max-height: 50vh;
margin: 6px -8px -4px;
padding: 4px 8px;
z-index: 2;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
/* sleek glass custom scrollbar */
.ai-shared-friends-list::-webkit-scrollbar {
width: 5px;
}
.ai-shared-friends-list::-webkit-scrollbar-track {
background: transparent;
}
.ai-shared-friends-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.06);
border-radius: 99px;
border: 1px solid transparent;
background-clip: padding-box;
transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-shared-friends-list::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.18);
background-clip: padding-box;
}
.ai-shared-friends-list::-webkit-scrollbar-thumb:active {
background: rgba(255, 255, 255, 0.28);
background-clip: padding-box;
}
.ai-shared-friend-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px !important;
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 16px !important;
cursor: pointer;
color: inherit;
text-align: left;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 6px rgba(0, 0, 0, 0.1);
transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ai-shared-friend-row:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
transform: translateX(4px) translateY(-1px) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.25) !important;
}
.ai-shared-friend-row:active {
transform: translateX(2px) scale(0.99) !important;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2) !important;
}
.ai-shared-friend-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
font-weight: 600;
font-size: 16px;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.ai-shared-friend-info {
display: flex;
flex-direction: column;
}
.ai-shared-friend-name {
color: #fff;
font-weight: 600;
font-size: 13.5px;
}
.ai-shared-friend-email {
color: rgba(255, 255, 255, 0.55) !important;
font-size: 11.5px;
margin-top: 1px;
}
.ai-shared-friend-invite-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.5);
margin-left: auto;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-shared-friend-row:hover .ai-shared-friend-invite-icon {
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.32) !important;
color: #ffffff !important;
transform: rotate(-45deg) scale(1.08) !important;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.18) !important;
}
.ai-shared-friend-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ai-shared-friend-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ai-shared-friend-name {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-shared-friend-email {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-shared-friend-invite-icon {
color: rgba(255, 255, 255, 0.45);
display: inline-flex;
}
.ai-shared-empty {
padding: 28px 16px;
text-align: center;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
line-height: 1.5;
}
/* Incoming invite modal (yeşil pulse büyük avatar) */
.ai-shared-incoming-card {
align-items: center;
text-align: center;
padding: 32px 28px 24px;
max-width: 360px;
}
.ai-shared-incoming-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(60, 200, 120, 0.22), rgba(40, 160, 90, 0.10));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 600;
color: #fff;
margin-bottom: 4px;
position: relative;
overflow: hidden;
box-shadow: 0 8px 24px rgba(60, 200, 120, 0.30),
0 0 0 1px rgba(60, 200, 120, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.ai-shared-incoming-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ai-shared-incoming-avatar::before,
.ai-shared-incoming-avatar::after {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid rgba(60, 200, 120, 0.40);
animation: aiSharedPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
pointer-events: none;
}
.ai-shared-incoming-avatar::after { animation-delay: 1s; }
@keyframes aiSharedPulse {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.4); opacity: 0; }
}
.ai-shared-incoming-name {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
margin-top: 6px;
}
.ai-shared-incoming-subtitle {
font-size: 14px;
color: rgba(255, 255, 255, 0.62);
margin-bottom: 18px;
}
.ai-shared-incoming-actions {
display: flex;
gap: 14px;
width: 100%;
justify-content: center;
margin-top: 4px;
}
.ai-shared-btn-accept,
.ai-shared-btn-reject {
flex: 1;
max-width: 140px;
padding: 12px 18px;
border-radius: 14px;
border: 1px solid transparent;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: transform 140ms ease, background 160ms ease, box-shadow 160ms ease;
}
.ai-shared-btn-accept {
background: linear-gradient(135deg, #3ec888, #2ca06a);
color: #fff;
box-shadow: 0 4px 14px rgba(60, 200, 120, 0.40);
}
.ai-shared-btn-accept:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(60, 200, 120, 0.55);
}
.ai-shared-btn-reject {
background: rgba(220, 60, 60, 0.18);
color: #ffb4b4;
border-color: rgba(220, 60, 60, 0.30);
}
.ai-shared-btn-reject:hover {
background: rgba(220, 60, 60, 0.28);
transform: translateY(-1px);
}
/* Info modal (üyeler + ayrıl) */
/* ============================================================
Faz 12 v3 — Ortak sohbet: dinamik ada katılımcıları + kick butonu
============================================================ */
/* Dinamik adada katılımcı avatar yığını (overlap stack, tıklayınca ortaklar modalı) */
.island-participants {
height: 36px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
cursor: pointer;
padding: 0 8px 0 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
0 2px 8px -2px rgba(0, 0, 0, 0.35);
transition: background var(--motion-base, 0.2s) var(--ease-spring, ease),
border-color var(--motion-base, 0.2s) var(--ease-spring, ease),
transform var(--motion-fast, 0.12s) var(--ease-spring, ease),
box-shadow var(--motion-base, 0.2s) var(--ease-spring, ease);
}
.island-participants:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
border-color: rgba(255, 255, 255, 0.18);
transform: translateY(-1px);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
0 4px 12px -4px rgba(0, 0, 0, 0.5),
0 0 1px rgba(255, 255, 255, 0.2);
}
.island-participants:active {
transform: scale(0.96);
filter: brightness(0.94);
}
.island-participant-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
/* Faz 12 v4: indigo gradient kaldırıldı — saf monokrom cam (tema "no chroma"). */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07));
border: 1.5px solid rgba(20, 20, 26, 0.95);
margin-left: -8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
}
.island-participant-avatar:first-child { margin-left: 0; }
.island-participant-avatar img { width: 100%; height: 100%; object-fit: cover; }
.island-participant-letter {
font-size: 11px;
font-weight: 700;
color: #e8e8ea;
}
.island-participant-more {
background: rgba(255, 255, 255, 0.14);
color: #d4d4d8;
font-size: 10px;
font-weight: 700;
}
/* Faz 12 v4: Live Activity — ortak sohbet açıkken (.is-shared-active) katılımcı
yığını öne çıkar + ince monokrom canlı nabız. Tema saf monokrom (mavi yok). */
.dynamic-island.is-shared-active {
padding-right: 20px;
}
.dynamic-island.is-shared-active .island-participants {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%);
border-color: rgba(255, 255, 255, 0.14);
}
.dynamic-island.is-shared-active .island-participants::after {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
margin-left: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
animation: islandLivePulse 2.2s var(--ease-smooth, ease) infinite;
}
@keyframes islandLivePulse {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
.dynamic-island.is-shared-active .island-participants::after {
animation: none;
}
}
/* Ortaklar modalında "sohbetten çıkar" (kick) butonu — yalnız sahibe görünür */
.ai-shared-kick-btn {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 9px;
border: 1px solid rgba(255, 90, 90, 0.22);
background: rgba(255, 70, 70, 0.10);
color: #ff8585;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.ai-shared-kick-btn:hover {
background: rgba(255, 70, 70, 0.20);
border-color: rgba(255, 90, 90, 0.42);
transform: scale(1.06);
}
.ai-shared-kick-btn:active { transform: scale(0.96); }
.ai-shared-participants-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 40vh;
overflow-y: auto;
margin: 4px 0;
}
.ai-shared-participant-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
}
.ai-shared-participant-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.12));
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
font-weight: 600;
font-size: 14px;
}
.ai-shared-participant-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ai-shared-participant-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ai-shared-participant-name {
font-size: 14px;
font-weight: 600;
}
.ai-shared-participant-email {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
}
.ai-shared-owner-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
border-radius: 6px;
margin-left: 4px;
letter-spacing: 0.04em;
}
.ai-shared-info-actions {
margin-top: 8px;
display: flex;
justify-content: center;
}
.ai-shared-btn-leave {
padding: 10px 22px;
background: rgba(220, 60, 60, 0.18);
color: #ffb4b4;
border: 1px solid rgba(220, 60, 60, 0.30);
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 160ms ease, transform 140ms ease;
}
.ai-shared-btn-leave:hover {
background: rgba(220, 60, 60, 0.28);
transform: translateY(-1px);
}
/* Shared sohbet mesaj satırı (ana chat içinde render) */
.ai-shared-msg-row {
margin-bottom: 14px;
}
.ai-shared-msg-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.ai-shared-msg-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.12));
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 11px;
font-weight: 600;
}
.ai-shared-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ai-shared-msg-name {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.78);
}
.ai-shared-msg-body {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.05);
border-radius: 14px;
font-size: 14.5px;
line-height: 1.5;
}
.message-ai.ai-shared-msg-row .ai-shared-msg-body {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
border-left: 2.5px solid rgba(255, 255, 255, 0.45);
}
/* Shared mesaj — görseller (user mesajları) */
.ai-shared-msg-images {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0 8px;
}
.ai-shared-msg-image {
max-width: 280px;
max-height: 240px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.10);
object-fit: cover;
cursor: zoom-in;
background: #0a0a0e;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.ai-shared-msg-image:hover {
transform: scale(1.02);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40);
}
/* Shared mesaj — kod dosyaları (IDE benzeri kart) */
.ai-shared-msg-codefiles {
display: flex;
flex-direction: column;
gap: 8px;
margin: 8px 0 4px;
}
.ai-shared-codefile {
background: rgba(10, 10, 14, 0.65);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
overflow: hidden;
}
.ai-shared-codefile-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 12px;
color: rgba(255, 255, 255, 0.72);
}
.ai-shared-codefile-name {
flex: 1;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-shared-codefile-lang {
font-size: 11px;
padding: 2px 8px;
background: rgba(255, 255, 255, 0.18);
color: #e8e8ea;
border-radius: 6px;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.ai-shared-codefile-body {
margin: 0;
padding: 12px 14px;
background: transparent;
font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 12.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
overflow-x: auto;
max-height: 320px;
overflow-y: auto;
white-space: pre;
}
.ai-shared-codefile-body code {
font-family: inherit;
background: transparent;
padding: 0;
white-space: pre;
}
/* Mobile */
@media (max-width: 480px) {
.ai-shared-modal-card { padding: 18px 16px; }
.ai-shared-incoming-avatar { width: 80px; height: 80px; font-size: 30px; }
.ai-shared-incoming-name { font-size: 19px; }
}
/* ============================================================
Faz 12+ — DM thread'inde sistem mesajları (missed call + AI invite)
============================================================ */
.social-dm-sys-msg {
display: flex;
align-items: center;
gap: 12px;
margin: 8px auto;
padding: 10px 12px 10px 14px;
max-width: 86%;
width: fit-content;
/* Faz 12 v5: malzeme artık .glass-3'ten (tokens.css) — tek-seferlik cam kaldırıldı.
background / backdrop-filter / border / border-radius / box-shadow .glass-3 sağlıyor. */
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
animation: socialSysMsgIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
transition: opacity 240ms ease, transform 240ms ease, border-color 240ms ease;
}
/* glass-3 ::before specular sheen'i içeriğin (z-index:1) ALTINDA kalsın */
.social-dm-sys-msg > * {
position: relative;
z-index: 2;
}
@keyframes socialSysMsgIn {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Avatar (sol) */
.social-dm-sys-msg .sys-avatar {
position: relative;
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: #fff;
}
.social-dm-sys-msg .sys-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.social-dm-sys-msg .sys-avatar-letter {
letter-spacing: 0.01em;
}
/* Içerik (orta — title + meta) */
.social-dm-sys-msg .sys-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.social-dm-sys-msg .sys-title {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
line-height: 1.35;
}
.social-dm-sys-msg .sys-icon {
display: inline-flex;
align-items: center;
}
.social-dm-sys-msg .sys-icon-missed {
color: rgba(255, 255, 255, 0.62);
}
.social-dm-sys-msg .sys-icon-ai {
color: rgba(255, 255, 255, 0.62);
}
.social-dm-sys-msg .sys-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: rgba(255, 255, 255, 0.50);
flex-wrap: wrap;
}
.social-dm-sys-msg .sys-time {
letter-spacing: 0.02em;
}
/* Sağ aksiyon butonları */
.social-dm-sys-msg .sys-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.social-dm-sys-msg .sys-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.88);
border-radius: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: background 160ms ease, transform 140ms ease, border-color 160ms ease;
}
.social-dm-sys-msg .sys-btn:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-1px);
}
.social-dm-sys-msg .sys-btn:active {
transform: scale(0.96);
}
.social-dm-sys-msg .sys-btn-primary {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.92);
}
.social-dm-sys-msg .sys-btn-primary:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.30);
}
.social-dm-sys-msg .sys-btn-accept {
background: linear-gradient(135deg, rgba(60, 200, 120, 0.30), rgba(40, 160, 90, 0.18));
border-color: rgba(60, 200, 120, 0.50);
color: #c6f6d5;
}
.social-dm-sys-msg .sys-btn-reject {
background: rgba(220, 60, 60, 0.18);
border-color: rgba(220, 60, 60, 0.36);
color: #ffb4b4;
}
.social-dm-sys-msg .sys-btn-secondary {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.78);
}
/* Tür-bazlı border accent */
.social-dm-sys-msg.system-missed-call {
border-left: 3px solid rgba(255, 255, 255, 0.28);
}
.social-dm-sys-msg.system-ai-invite {
border-left: 3px solid rgba(255, 255, 255, 0.28);
}
/* Tier 2.6: plaintext warning */
.social-dm-sys-msg .sys-warning {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: rgba(255, 255, 255, 0.62);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
padding: 3px 8px;
border-radius: 999px;
width: fit-content;
margin-top: 2px;
}
/* Status badge */
.social-dm-sys-msg .sys-status {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.02em;
transition: background 240ms ease, color 240ms ease, transform 240ms ease;
}
.social-dm-sys-msg .sys-status-pending {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.72);
}
.social-dm-sys-msg .sys-status-accepted {
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.92);
animation: socialStatusMorphAccepted 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes socialStatusMorphAccepted {
0% { transform: scale(0.7); opacity: 0; }
40% { transform: scale(1.15); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.social-dm-sys-msg .sys-status-rejected,
.social-dm-sys-msg .sys-status-expired {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.50);
}
.social-dm-sys-msg .sys-status-ended {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.72);
}
.social-dm-sys-msg .sys-countdown {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.social-dm-sys-msg .sys-online-dot {
display: inline-block;
width: 7px;
height: 7px;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
margin-left: 4px;
vertical-align: middle;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.50);
animation: socialOnlinePulse 2s ease-in-out infinite;
}
@keyframes socialOnlinePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.50); }
50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}
/* Tier 1.3 status morph: pending → accepted/rejected'a geçişte tüm row hafifçe morph */
.social-dm-sys-msg.status-accepted {
border-color: rgba(255, 255, 255, 0.20);
}
.social-dm-sys-msg.status-accepted .sys-icon-ai {
color: rgba(255, 255, 255, 0.88);
}
.social-dm-sys-msg.status-rejected,
.social-dm-sys-msg.status-cancelled,
.social-dm-sys-msg.status-expired {
opacity: 0.65;
}
.social-dm-sys-msg.status-loading {
opacity: 0.7;
pointer-events: none;
}
.social-dm-sys-msg .sys-loading {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
font-style: italic;
}
/* Tier 2.7 — ended session summary */
.social-dm-sys-msg .sys-summary {
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
}
.social-dm-sys-msg .sys-summary-topic {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.72);
font-style: italic;
}
.social-dm-sys-msg .sys-summary-meta {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.42);
}
/* Tier 1.5: smart batching (collapsed) */
.social-dm-sys-msg.system-batch .sys-batch-badge {
position: absolute;
bottom: -2px;
right: -2px;
background: rgba(255, 255, 255, 0.20);
color: rgba(255, 255, 255, 0.95);
font-size: 9px;
font-weight: 800;
min-width: 16px;
height: 16px;
border-radius: 999px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(20, 22, 28, 0.95);
letter-spacing: 0.02em;
}
.social-dm-sys-msg .sys-expand-btn {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.60);
font-size: 11px;
cursor: pointer;
padding: 0;
text-decoration: none;
font-weight: 600;
transition: color 140ms ease;
}
.social-dm-sys-msg .sys-expand-btn:hover {
color: rgba(255, 255, 255, 0.85);
text-decoration: underline;
}
.social-dm-sys-batch-collapse {
text-align: center;
margin: 4px 0 8px;
}
.social-dm-sys-batch-collapse button {
background: transparent;
border: 1px dashed rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.55);
font-size: 11.5px;
padding: 4px 12px;
border-radius: 999px;
cursor: pointer;
transition: color 140ms ease, border-color 140ms ease;
}
.social-dm-sys-batch-collapse button:hover {
color: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.35);
}
/* Mobile */
@media (max-width: 480px) {
.social-dm-sys-msg {
max-width: 100%;
padding: 8px 10px;
gap: 8px;
}
.social-dm-sys-msg .sys-btn span {
display: none; /* sadece ikon mobilde */
}
.social-dm-sys-msg .sys-btn {
padding: 6px 8px;
}
.social-dm-sys-msg .sys-actions {
gap: 4px;
}
}
/* Reduced motion: animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
.social-dm-sys-msg,
.social-dm-sys-msg .sys-status-accepted {
animation: none !important;
transition: none !important;
}
}
/* ============================================================
L5 fix — Mobile keyboard handling: call overlays viewport-safe
visualViewport API + dvh unit ile keyboard açıldığında overlay
içeriği sıkışmıyor, butonlar görünür kalıyor.
============================================================ */
@media (max-width: 768px) {
.social-call-overlay {
/* dvh = dynamic viewport height (keyboard hesaba katılır) */
height: 100dvh !important;
max-height: 100dvh !important;
/* Eski browser fallback: ekran kenarlarına yapıştır */
min-height: -webkit-fill-available;
}
/* In-call action butonları daima viewport içinde kalsın */
.social-call-overlay .social-call-actions {
padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Group call footer da safe-area aware */
.social-group-call-footer {
padding-bottom: max(14px, env(safe-area-inset-bottom, 0));
}
}
/* ============================================================
Faz 12+ Tier 3.11 — Activity Timeline modal
============================================================ */
.social-activity-card {
max-width: 520px;
max-height: 80vh;
}
.social-activity-filters {
display: flex;
gap: 6px;
margin: 4px 0 10px;
flex-wrap: wrap;
}
.social-activity-chip {
padding: 6px 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.70);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background 160ms ease, color 160ms ease;
}
.social-activity-chip:hover {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.92);
}
.social-activity-chip.active {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.14));
color: #e8e8ea;
border-color: rgba(255, 255, 255, 0.40);
}
.social-activity-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 60vh;
overflow-y: auto;
margin: 0 -6px;
padding: 0 6px;
}
.social-activity-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 14px;
/* Faz 12 v5: malzeme .glass-3'ten (tokens.css) — tek-seferlik cam kaldırıldı. */
color: inherit;
text-align: left;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
}
/* glass-3 ::before specular sheen içeriğin altında kalsın */
.social-activity-row > * {
position: relative;
z-index: 2;
}
.social-activity-row:hover {
border-color: rgba(255, 255, 255, 0.22);
transform: translateX(4px) translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 6px 16px rgba(0, 0, 0, 0.28);
filter: brightness(1.08);
}
.social-activity-row.missed {
border-left: 3px solid rgba(255, 255, 255, 0.28);
}
.social-activity-row.ai-invite {
border-left: 3px solid rgba(255, 255, 255, 0.28);
}
.social-activity-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07));
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 14px;
font-weight: 700;
color: #fff;
}
.social-activity-avatar img {
width: 100%; height: 100%; object-fit: cover;
}
.social-activity-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.social-activity-title {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.social-activity-icon {
display: inline-flex;
flex-shrink: 0;
}
.social-activity-icon.icon-missed { color: rgba(255, 255, 255, 0.62); }
.social-activity-icon.icon-ai { color: rgba(255, 255, 255, 0.62); }
.social-activity-meta {
display: flex;
align-items: center;
gap: 8px;
}
.social-activity-time {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.social-activity-status {
font-size: 10.5px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.social-activity-status.status-pending {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.72);
}
.social-activity-status.status-accepted {
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.92);
}
.social-activity-status.status-rejected {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.50);
}
.social-activity-status.status-ended {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.72);
}
/* Header'daki etkinlik dot'u */
.social-panel-icon-btn {
position: relative;
}
.social-activity-dot {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
background: #ff5e5e;
border-radius: 50%;
border: 2px solid rgba(20, 22, 28, 0.92);
box-shadow: 0 0 6px rgba(255, 100, 100, 0.55);
animation: socialActivityDotPulse 2s ease-in-out infinite;
}
@keyframes socialActivityDotPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.85; }
}
/* ============================================================
Faz 12 cila — PWA "Ana ekrana ekle" banner'ı
============================================================ */
.pwa-install-banner {
position: fixed;
isolation: isolate;
left: 50%;
bottom: 18px;
transform: translate(-50%, 140%);
z-index: 300;
display: flex;
align-items: center;
gap: 12px;
max-width: 440px;
width: calc(100% - 32px);
padding: 12px 14px;
border-radius: var(--radius-sm, 14px);
background:
linear-gradient(180deg, var(--glass-3-tint-top) 0%, var(--glass-3-tint-bot) 100%),
var(--glass-3-bg);
border: 1px solid var(--glass-3-border);
box-shadow:
var(--inset-top-glow),
var(--inset-bot-shadow),
var(--inset-top-bloom),
var(--shadow-contact),
var(--shadow-lift),
var(--shadow-ambient);
backdrop-filter: blur(var(--glass-3-blur)) saturate(var(--glass-3-saturate)) brightness(1.03) var(--glass-3-refract);
-webkit-backdrop-filter: blur(var(--glass-3-blur)) saturate(var(--glass-3-saturate)) brightness(1.03);
opacity: 0;
pointer-events: none;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.pwa-install-banner::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.03) 40%,
transparent 55%);
mix-blend-mode: overlay;
opacity: 0.55;
}
.pwa-install-banner > * { position: relative; z-index: 1; }
.pwa-install-banner.visible {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.pwa-install-logo {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 9px;
object-fit: cover;
}
.pwa-install-text {
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.88);
}
.pwa-install-text strong { color: #fff; font-weight: 700; }
.pwa-install-btn {
flex-shrink: 0;
padding: 8px 16px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.20);
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.pwa-install-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.26); transform: translateY(-1px); }
.pwa-install-close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background 0.16s ease, color 0.16s ease;
}
.pwa-install-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
@media (max-width: 480px) {
.pwa-install-banner { bottom: 12px; padding: 10px 12px; gap: 9px; }
.pwa-install-text { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.pwa-install-banner { transition: opacity 0.3s ease; transform: translate(-50%, 0); }
}
/* ============================================================
FAZ 14 — 2FA (TOTP) kurulum modalı
============================================================ */
.twofa-modal-backdrop {
position: fixed;
inset: 0;
/* Ayarlar modalı (z-index 10010) içinden açıldığı için onun üstünde olmalı */
z-index: 10020;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background: var(--modal-scrim);
backdrop-filter: var(--modal-scrim-filter);
-webkit-backdrop-filter: var(--modal-scrim-filter);
}
/* Macro glass kart — gerçek saydamlık + kırılma + specular */
.twofa-modal-card {
position: relative;
isolation: isolate;
width: 100%;
max-width: 380px;
max-height: 90vh;
overflow-y: auto;
padding: 22px;
border-radius: var(--radius-md, 22px);
background:
linear-gradient(180deg, var(--glass-1-tint-top) 0%, var(--glass-1-tint-bot) 100%),
var(--glass-1-bg);
backdrop-filter: blur(var(--glass-1-blur)) saturate(var(--glass-1-saturate)) brightness(1.05) var(--glass-1-refract);
-webkit-backdrop-filter: blur(var(--glass-1-blur)) saturate(var(--glass-1-saturate)) brightness(1.05);
border: 1px solid var(--glass-1-border);
box-shadow: var(--glass-card-shadow);
text-align: center;
animation: glassSpringEntrance 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.twofa-modal-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background: var(--glass-specular);
mix-blend-mode: overlay;
opacity: 0.78;
}
.twofa-modal-card > * { position: relative; z-index: 1; }
@media (max-width: 480px) {
.twofa-modal-card::after {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
pointer-events: none;
z-index: 2;
}
}
.twofa-modal-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: #fff; }
.twofa-modal-step { margin: 14px 0 8px; font-size: 13px; color: rgba(255, 255, 255, 0.82); text-align: left; }
.twofa-modal-hint { margin: 6px 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); text-align: left; }
.twofa-qr {
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
margin: 6px auto;
padding: 10px;
width: 200px;
background: #fff;
border-radius: 12px;
color: #333;
font-size: 12px;
}
.twofa-qr img, .twofa-qr canvas { display: block; }
.twofa-secret {
display: block;
margin: 4px 0 6px;
padding: 9px 12px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
font-family: 'SF Mono', ui-monospace, monospace;
font-size: 13px;
letter-spacing: 1.5px;
color: var(--text-1, #e8e8ea);
word-break: break-all;
}
.twofa-code-input {
width: 100%;
margin: 4px 0 2px;
padding: 11px 14px;
border-radius: 11px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.05);
color: #fff;
font-size: 18px;
letter-spacing: 4px;
text-align: center;
font-family: inherit;
outline: none;
box-sizing: border-box;
}
.twofa-code-input:focus { border-color: rgba(255, 255, 255, 0.55); }
.twofa-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.twofa-btn-primary, .twofa-btn-secondary {
flex: 1;
padding: 12px 14px;
border-radius: var(--radius-sm, 14px);
border: 1px solid rgba(255, 255, 255, 0.16);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
0 2px 6px rgba(0, 0, 0, 0.25),
0 8px 24px rgba(0, 0, 0, 0.20);
transition: all var(--motion-base, 240ms) var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.twofa-btn-primary {
background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%), rgba(255, 255, 255, 0.08);
color: #fff;
}
.twofa-btn-primary:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%), rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.26);
}
.twofa-btn-primary.twofa-btn-danger {
background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%), linear-gradient(135deg, #ef4444, #dc2626);
border-color: rgba(239, 68, 68, 0.4);
color: #fff;
}
.twofa-btn-primary.twofa-btn-danger:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%), linear-gradient(135deg, #f87171, #e11d48);
border-color: rgba(239, 68, 68, 0.6);
}
.twofa-btn-secondary {
background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%), rgba(255, 255, 255, 0.08);
color: #fff;
}
.twofa-btn-secondary:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%), rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.26);
}
.twofa-btn-primary:active, .twofa-btn-secondary:active {
transform: scale(0.985);
filter: brightness(0.92);
}
.twofa-btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.twofa-btn-icon svg { flex-shrink: 0; opacity: 0.85; }
.twofa-recovery-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 14px 0 4px;
}
.twofa-recovery-item {
padding: 8px 6px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: 'SF Mono', ui-monospace, monospace;
font-size: 13px;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.95);
text-align: center;
}
/* ============================================================
Liquid Glass — çapraz cila: scrollbar / erişilebilirlik / fallback
(Sosyal panelin tam liquid glass yeniden tasarımı son katmanı)
============================================================ */
/* Cam scrollbar thumb'ları — düz renk yerine dikey gradient + parlama */
.social-panel-content::-webkit-scrollbar-thumb,
.social-tab-panel::-webkit-scrollbar-thumb,
.social-dm-messages::-webkit-scrollbar-thumb,
.social-list::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.08)) !important;
background-clip: padding-box;
border-radius: 99px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.social-panel-content::-webkit-scrollbar-thumb:hover,
.social-tab-panel::-webkit-scrollbar-thumb:hover,
.social-dm-messages::-webkit-scrollbar-thumb:hover,
.social-list::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)) !important;
background-clip: padding-box;
}
/* Reduced-motion — yeni "canlı" katmanları durdur (aura/morph/shimmer/giriş) */
@media (prefers-reduced-motion: reduce) {
.social-aura-orb { animation: none !important; }
.social-aura { transition: none !important; }
.sx-morph,
.social-item,
.social-item-btn,
.social-panel-icon-btn,
.social-btn,
.social-dm-file-card,
.social-global-search-result-row,
.social-empty-action {
transition: background 120ms linear, border-color 120ms linear, color 120ms linear !important;
}
.sx-morph:hover,
.social-item:hover,
.social-empty-action:hover,
.social-btn:hover,
.social-dm-file-card:hover,
.social-global-search-result-row:hover { transform: none !important; }
.social-dm-bubble { animation: none !important; }
.social-loading { animation: none !important; -webkit-text-fill-color: var(--text-secondary, #b0b0b0); }
.social-activity-dot,
.social-dm-rec-dot { animation: none !important; }
.social-call-action-btn.accept { animation: none !important; }
}
/* @supports fallback — backdrop-filter yoksa katı tint (görünüm korunur,
sadece arka plan bulanıklığı düşer; içerik okunaklı kalır) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.social-panel { background: rgba(18, 18, 22, 0.96); }
.social-modal,
.social-call-overlay,
.social-whiteboard-toolbar,
.twofa-modal-card { background: rgba(22, 22, 27, 0.98); }
.social-global-search-overlay { background: rgba(12, 12, 17, 0.98); }
.social-dm-bubble.them { background: rgba(34, 34, 40, 0.96); }
.social-dm-bubble.me { background: rgba(58, 58, 66, 0.96); }
.social-dm-bubble.assistant { background: rgba(44, 44, 52, 0.96); }
.social-item:hover,
.social-item.active { background: rgba(40, 40, 46, 0.92); }
.social-dm-composer-capsule { background: rgba(38, 38, 44, 0.92); }
}