/* Rabitalk UI polish V12 — tactile controls, clearer hierarchy, video-call dock */
:root{
  --rt-action-purple:#7c3aed;
  --rt-action-purple-2:#8b5cf6;
  --rt-action-green:#23d5ab;
  --rt-action-panel:#202638;
  --rt-action-panel-2:#293148;
  --rt-action-line:rgba(255,255,255,.11);
  --rt-action-shadow:0 10px 28px rgba(0,0,0,.25);
  --rt-action-glow:0 10px 28px rgba(91,52,180,.28);
}

/* Shared tactile behavior. Visual treatment stays scoped so utility controls keep their shape. */
button,.btn,.call-btn,.icon-btn,.identity-photo-action,.language-setting-row,a.primary,a.secondary{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button,.btn,.call-btn,.icon-btn,.identity-photo-action,.language-setting-row{
  transition:transform .16s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;
}
button:not(:disabled):active{filter:brightness(1.06)}
.btn:not(:disabled):active,.call-btn:not(:disabled):active,.icon-btn:active,.identity-photo-action:active,.language-setting-row:active,.primary:not(:disabled):active,.secondary:not(:disabled):active{
  transform:translateY(1px) scale(.975);
}
button:focus-visible,.btn:focus-visible,.call-btn:focus-visible,.icon-btn:focus-visible,.identity-photo-action:focus-visible,.language-setting-row:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(167,139,250,.9);
  outline-offset:2px;
}
button:disabled,.btn:disabled{cursor:not-allowed!important;transform:none!important;box-shadow:none!important}

/* Primary actions: same energetic language as Meeting / Video controls. */
.primary,.btn:not(.secondary),.search-bar button,.story-publish,#vc-beauty-apply{
  border:1px solid rgba(196,181,253,.24)!important;
  background:linear-gradient(145deg,#6937d1 0%,#7c3aed 52%,#8b5cf6 100%)!important;
  color:#fff!important;
  box-shadow:var(--rt-action-glow),inset 0 1px 0 rgba(255,255,255,.13)!important;
  font-weight:800;
}
.primary:not(:disabled):hover,.btn:not(.secondary):not(:disabled):hover,.search-bar button:not(:disabled):hover,.story-publish:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 13px 34px rgba(91,52,180,.38),inset 0 1px 0 rgba(255,255,255,.16)!important;
}

/* Secondary actions: raised surface instead of flat text buttons. */
.secondary,.btn.secondary,.call-btn,.identity-photo-action,.notification-sound-actions button,.meeting-share-actions button{
  border:1px solid var(--rt-action-line)!important;
  background:linear-gradient(180deg,rgba(43,50,72,.94),rgba(28,33,49,.94))!important;
  color:#edf1fb!important;
  box-shadow:0 7px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055);
}
.secondary:not(:disabled):hover,.btn.secondary:not(:disabled):hover,.call-btn:not(:disabled):hover,.identity-photo-action:hover{
  border-color:rgba(167,139,250,.34)!important;
  background:linear-gradient(180deg,rgba(52,58,84,.98),rgba(34,39,58,.98))!important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.24),0 0 0 1px rgba(124,58,237,.08);
}
.danger,.hangup{box-shadow:0 9px 25px rgba(190,38,70,.2)}

/* Main navigation: clearer active target without becoming flashy. */
.nav-item{position:relative;transition:background-color .18s ease,color .18s ease,transform .16s ease,box-shadow .18s ease!important}
.nav-item:hover{box-shadow:inset 0 0 0 1px rgba(167,139,250,.06)}
.nav-item.active{background:linear-gradient(145deg,rgba(124,58,237,.17),rgba(35,213,171,.055))!important;color:#f0ebff!important;box-shadow:inset 0 0 0 1px rgba(167,139,250,.09),0 7px 22px rgba(0,0,0,.08)}
.nav-item.active .nav-icon{filter:drop-shadow(0 0 7px rgba(167,139,250,.38))}

/* Inputs get the same polished focus language across the app. */
input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
input:focus,select:focus,textarea:focus{border-color:rgba(139,92,246,.58)!important;box-shadow:0 0 0 3px rgba(124,58,237,.11)!important}

/* Small icon / close controls feel pressable without changing layout. */
.chat-close-btn,.attach-btn,.send-btn,.voice-btn,.story-social-button,.story-step,.story-composer-card header button,.story-viewers-card header button,.story-comments-card>header button,.meeting-wizard-close{
  box-shadow:0 7px 18px rgba(0,0,0,.18);
}
.chat-close-btn:hover,.attach-btn:hover,.send-btn:hover,.voice-btn:hover,.story-social-button:hover,.story-step:hover,.meeting-wizard-close:hover{
  border-color:rgba(167,139,250,.28)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.24),0 0 0 1px rgba(124,58,237,.07);
}

/* Standalone legacy pages: harmonize with the current Rabitalk visual language. */
.wrap .card{border-color:rgba(255,255,255,.095);box-shadow:0 20px 58px rgba(0,0,0,.36)}
.wrap .btn{min-height:44px}
.wrap .icon-btn{box-shadow:0 8px 20px rgba(0,0,0,.18)}
.rt-dropdown{border-color:rgba(255,255,255,.1)!important;box-shadow:0 20px 58px rgba(0,0,0,.5)!important}
.rt-dropdown a{transition:background-color .16s ease,color .16s ease}

/* Video call V12: controls float like Meeting instead of consuming a tall footer row. */
#video-call-app{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  position:relative;
}
.vc-stage{
  min-height:0;
  padding-bottom:0!important;
}
.vc-controls{
  position:fixed!important;
  z-index:70!important;
  left:50%!important;
  right:auto!important;
  bottom:max(16px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  width:auto!important;
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:8px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:22px!important;
  background:rgba(17,21,34,.9)!important;
  box-shadow:0 15px 50px rgba(0,0,0,.5)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.vc-control{
  width:auto!important;
  min-width:76px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 14px!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:14px!important;
  background:#24293a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  color:#eef2fb!important;
}
.vc-control.active{background:#203848!important;color:#b8f8e5!important}
.vc-control#vc-beauty.active{background:linear-gradient(145deg,#5f36b8,#7c3aed)!important;color:#fff!important}
.vc-control.danger{background:#8a2438!important;color:#fff!important;box-shadow:0 8px 22px rgba(170,34,62,.26)!important}
.vc-control small{display:block!important;color:inherit!important;font-size:11px!important;font-weight:800!important;white-space:nowrap}
.vc-control .vc-icon{display:none!important}
.vc-control:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.08)}
.vc-beauty-panel{bottom:max(82px,calc(env(safe-area-inset-bottom) + 82px))!important}
.vc-error{bottom:max(84px,calc(env(safe-area-inset-bottom) + 84px))!important}
.vc-media-unlock{bottom:max(86px,calc(env(safe-area-inset-bottom) + 86px))!important}
.needs-media-start .vc-media-unlock{bottom:50%!important}

@media(max-width:700px){
  #video-call-app{grid-template-rows:auto minmax(0,1fr)!important}
  .vc-stage{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
  .vc-controls{
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    transform:none!important;
    width:auto!important;
    gap:5px!important;
    padding:6px 7px!important;
    border-radius:20px!important;
    justify-content:space-between!important;
  }
  .vc-control{
    flex:1 1 0!important;
    min-width:0!important;
    width:auto!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    border-radius:14px!important;
    display:grid!important;
    place-items:center!important;
  }
  .vc-control small{display:none!important}
  .vc-control .vc-icon{display:flex!important;width:23px!important;height:23px!important}
  .vc-control.active .vc-icon{filter:drop-shadow(0 0 6px currentColor)}
  .vc-control.danger{flex:1.08 1 0!important}
  .vc-beauty-panel{bottom:max(72px,calc(env(safe-area-inset-bottom) + 72px))!important;width:calc(100% - 16px)!important}
  .vc-error{bottom:max(74px,calc(env(safe-area-inset-bottom) + 74px))!important;width:calc(100vw - 24px)!important}
  .vc-media-unlock{bottom:max(76px,calc(env(safe-area-inset-bottom) + 76px))!important}
  .needs-media-start .vc-media-unlock{bottom:44%!important}
}

@media(max-width:900px) and (orientation:landscape){
  .vc-stage{padding-bottom:calc(58px + env(safe-area-inset-bottom))!important}
  .vc-controls{left:8px!important;right:8px!important;bottom:max(5px,env(safe-area-inset-bottom))!important;transform:none!important;padding:5px 7px!important}
  .vc-control{height:46px!important;min-height:46px!important}
  .vc-beauty-panel{bottom:max(64px,calc(env(safe-area-inset-bottom) + 64px))!important;max-height:calc(100dvh - 76px)!important}
  .vc-error{bottom:max(66px,calc(env(safe-area-inset-bottom) + 66px))!important}
}

@media(max-width:850px){
  .sidebar nav .nav-item.active{background:linear-gradient(145deg,rgba(124,58,237,.2),rgba(35,213,171,.07))!important;box-shadow:inset 0 0 0 1px rgba(167,139,250,.1)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* Rabitalk V22 — indikator aktivitas pada navigasi utama. */
.nav-attention{
  position:absolute;
  top:7px;
  right:9px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(135deg,#8b5cf6,#22d3aa);
  color:#070912;
  border:2px solid #0d101a;
  box-shadow:0 0 0 2px rgba(139,92,246,.15),0 0 16px rgba(139,92,246,.48);
  font:900 9px/1 Manrope,system-ui,sans-serif;
  letter-spacing:-.02em;
  z-index:2;
}
.nav-attention[hidden]{display:none!important}
.nav-attention.is-dot{min-width:10px;width:10px;height:10px;padding:0;top:9px;right:11px;border-width:2px}
.nav-item.has-attention:not(.active){
  color:#e9e4ff!important;
  background:linear-gradient(145deg,rgba(124,58,237,.10),rgba(35,213,171,.045))!important;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.12),0 0 20px rgba(124,58,237,.08)!important;
}
.nav-item.has-attention:not(.active) .nav-icon{filter:drop-shadow(0 0 8px rgba(139,92,246,.72))}
@media(max-width:850px){
  .sidebar nav .nav-item.has-attention:not(.active){
    background:linear-gradient(145deg,rgba(124,58,237,.16),rgba(35,213,171,.06))!important;
  }
  .sidebar nav .nav-item .nav-attention{top:3px;right:calc(50% - 19px);min-width:16px;height:16px;padding:0 4px;font-size:8px;border-width:2px}
  .sidebar nav .nav-item .nav-attention.is-dot{top:5px;right:calc(50% - 15px);min-width:9px;width:9px;height:9px;padding:0}
}

/* Rabitalk V23 — activity glow only: tanpa badge angka maupun titik. */
.nav-attention{display:none!important}
.nav-item.has-attention{
  position:relative;
  color:#f4efff!important;
  background:
    radial-gradient(circle at 50% 45%,rgba(139,92,246,.22),transparent 66%),
    linear-gradient(145deg,rgba(124,58,237,.17),rgba(35,213,171,.07))!important;
  border-color:rgba(167,139,250,.48)!important;
  box-shadow:
    inset 0 0 0 1px rgba(167,139,250,.18),
    0 0 16px rgba(124,58,237,.22),
    0 0 30px rgba(35,213,171,.07)!important;
}
.nav-item.has-attention .nav-icon{
  color:#d9c9ff!important;
  filter:drop-shadow(0 0 7px rgba(139,92,246,.92)) drop-shadow(0 0 14px rgba(35,213,171,.28));
}
.nav-item.has-attention:not(.active)::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 18px rgba(139,92,246,.18);
  animation:rabitalk-nav-attention-glow 2.2s ease-in-out infinite;
}
.nav-item.has-attention.active{
  box-shadow:
    inset 0 0 0 1px rgba(167,139,250,.34),
    0 0 20px rgba(124,58,237,.30),
    0 0 34px rgba(35,213,171,.09)!important;
}
@keyframes rabitalk-nav-attention-glow{
  0%,100%{opacity:.45;transform:scale(.985)}
  50%{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .nav-item.has-attention:not(.active)::after{animation:none}
}