/* Zhakaw 3.2 — independent chat sounds, community radio, and managed news.
   This file is additive and does not alter the existing Zhakaw theme system. */

.sound-settings{display:flex;flex-direction:column;gap:8px}
.sound-master-row,.sound-setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border:1px solid var(--classic-border,var(--line));border-radius:8px;background:var(--classic-panel-soft,var(--panel2))}
.sound-master-row{border-color:color-mix(in srgb,var(--accent) 42%,var(--classic-border,var(--line)));background:color-mix(in srgb,var(--accent) 7%,var(--classic-panel-soft,var(--panel2)))}
.sound-master-row>div,.sound-setting-row>div:first-child{min-width:0;display:flex;flex-direction:column;gap:3px}
.sound-master-row strong,.sound-setting-row strong{font-size:12px}
.sound-master-row small,.sound-setting-row small{color:var(--classic-muted,var(--muted));font-size:9px;line-height:1.4}
.sound-setting-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sound-test-btn{height:28px;padding:0 10px;border:1px solid var(--classic-border,var(--line));border-radius:6px;background:var(--classic-panel,var(--panel));color:var(--classic-text,var(--text));font-size:9px;font-weight:800;cursor:pointer}
.sound-test-btn:hover{border-color:var(--accent);color:var(--accent)}
.sound-switch{position:relative;width:42px;height:24px;padding:0;border:1px solid var(--classic-border,var(--line));border-radius:999px;background:var(--classic-panel,var(--panel));cursor:pointer;transition:.18s ease}
.sound-switch span{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--classic-muted,var(--muted));transition:.18s ease}
.sound-switch.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--classic-panel,var(--panel)))}
.sound-switch.on span{left:21px;background:var(--accent)}

.community-radio{display:flex;flex-direction:column;gap:12px}
.radio-now-playing{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--classic-border,var(--line)));border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--classic-panel-soft,var(--panel2)))}
.radio-now-playing>img,.radio-now-playing>span{width:58px;height:58px;flex:0 0 58px;border-radius:9px;object-fit:cover;display:grid;place-items:center;background:var(--classic-panel,var(--panel));font-size:28px;border:1px solid var(--classic-border,var(--line))}
.radio-now-playing>div{min-width:0;display:flex;flex-direction:column}
.radio-now-playing small{color:var(--accent);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.radio-now-playing strong{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.radio-now-playing em{margin-top:3px;color:var(--classic-muted,var(--muted));font-size:9px;font-style:normal}
.radio-controls{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--classic-border,var(--line));border-radius:8px;background:var(--classic-panel-soft,var(--panel2))}
.radio-controls>button{height:36px;min-width:92px;padding:0 14px;border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:#fff;font-size:10px;font-weight:900;cursor:pointer}
.radio-controls>button:disabled{opacity:.45;cursor:not-allowed}
.radio-controls label{min-width:0;display:flex;align-items:center;gap:8px;flex:1}
.radio-controls input[type=range]{min-width:80px;flex:1;accent-color:var(--accent)}
.radio-controls label b{width:38px;text-align:right;font-size:9px}
.radio-station-list{display:flex;flex-direction:column;gap:6px;max-height:330px;overflow:auto}
.radio-station-row{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--classic-border,var(--line));border-radius:8px;background:var(--classic-panel,var(--panel));color:var(--classic-text,var(--text));text-align:left;cursor:pointer}
.radio-station-row:hover,.radio-station-row.selected{border-color:color-mix(in srgb,var(--accent) 62%,var(--classic-border,var(--line)));background:color-mix(in srgb,var(--accent) 6%,var(--classic-panel,var(--panel)))}
.radio-station-row>img,.radio-station-logo{width:38px;height:38px;flex:0 0 38px;border-radius:7px;object-fit:cover;display:grid;place-items:center;background:var(--classic-panel-soft,var(--panel2));font-size:19px}
.radio-station-row>span:nth-child(2){min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}
.radio-station-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.radio-station-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--classic-muted,var(--muted));font-size:8px}
.radio-station-row>b{color:var(--accent);font-size:11px}

.news-feed{display:flex;flex-direction:column;gap:12px}
.news-card{overflow:hidden;border:1px solid var(--classic-border,var(--line));border-radius:10px;background:var(--classic-panel,var(--panel))}
.news-card.pinned{border-color:color-mix(in srgb,var(--accent) 48%,var(--classic-border,var(--line)))}
.news-card.selected{outline:2px solid var(--accent);outline-offset:2px}
.news-card-image{display:block;width:100%;max-height:260px;object-fit:cover;background:var(--classic-panel-soft,var(--panel2))}
.news-card-body{padding:14px}
.news-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--classic-muted,var(--muted));font-size:8px}
.news-card-meta b{color:var(--accent)}
.news-card h3{margin:8px 0 6px;font-size:16px;line-height:1.25}
.news-card p{margin:0;color:var(--classic-text,var(--text));font-size:10px;line-height:1.65;overflow-wrap:anywhere}
.news-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--classic-border,var(--line))}
.news-card-foot small{color:var(--classic-muted,var(--muted));font-size:8px}
.news-card-foot a{color:var(--accent);font-size:9px;font-weight:900;text-decoration:none}

.admin-content-form{margin-bottom:18px;padding:14px;border:1px solid var(--classic-border,var(--line));border-radius:10px;background:var(--classic-panel-soft,var(--panel2))}
.admin-form-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-content-list{display:flex;flex-direction:column;gap:8px}
.admin-content-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--classic-border,var(--line));border-radius:8px;background:var(--classic-panel,var(--panel))}
.admin-content-row>div:first-child{min-width:0;display:flex;flex:1;flex-direction:column;gap:4px}
.admin-content-row>div:last-child{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.admin-content-row strong{font-size:11px}
.admin-content-row small{color:var(--classic-muted,var(--muted));font-size:8px}
.admin-content-row code{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:var(--accent)}
.admin-content-row p{margin:2px 0 0;color:var(--classic-muted,var(--muted));font-size:9px;line-height:1.45}
.danger-btn{border:1px solid #ef4444;background:#ef4444;color:#fff;border-radius:6px;font-weight:800;cursor:pointer}
.danger-btn:hover{background:#dc2626;border-color:#dc2626}

@media(max-width:700px){
  .sound-master-row,.sound-setting-row{padding:10px;gap:10px}
  .sound-setting-actions{gap:5px}
  .radio-controls{align-items:stretch;flex-direction:column}
  .radio-controls>button{width:100%}
  .radio-now-playing>img,.radio-now-playing>span{width:50px;height:50px;flex-basis:50px}
  .news-card-body{padding:11px}
  .admin-content-row{flex-direction:column}
  .admin-content-row>div:last-child{width:100%;justify-content:flex-start}
}

/* Zhakaw 4.0.3 — community wall and real live-space controls */
.live-mic-mark,.live-camera-mark{display:none;width:19px;height:19px;min-width:19px;place-items:center;border-radius:50%;color:#fff}
.live-mic-mark{background:#16a34a;box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 16%,transparent);animation:liveMicPulse 1.8s ease-in-out infinite}
.live-camera-mark{background:#7c3aed;box-shadow:0 0 0 3px color-mix(in srgb,#8b5cf6 15%,transparent)}
.live-mic-mark .ui-icon,.live-camera-mark .ui-icon{width:11px;height:11px;stroke-width:2.8}
.classic-user-item.has-live-mic .live-mic-mark,.classic-user-item.has-live-camera .live-camera-mark{display:grid}
.classic-user-item.is-live-participant{border-color:color-mix(in srgb,var(--accent) 28%,var(--classic-border,var(--line)))}
@keyframes liveMicPulse{50%{transform:scale(.9);box-shadow:0 0 0 6px color-mix(in srgb,#22c55e 5%,transparent)}}
.head-option.is-live{color:#22c55e;background:color-mix(in srgb,#22c55e 10%,var(--classic-panel-soft,var(--panel2)))}
.footer-item.has-live-users{color:#22c55e}
.live-space-count{position:absolute;right:2px;top:2px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#16a34a;color:#fff;border:2px solid var(--classic-panel,var(--panel));font-size:8px;font-weight:900;line-height:1}
.live-space-count[hidden]{display:none!important}

.live-room-modal{width:min(470px,100%)!important}
.live-room-body{display:flex;flex-direction:column;gap:12px}
.live-room-loading,.live-room-error{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:28px}
.live-room-loading strong,.live-room-error strong{font-size:15px}
.live-room-loading small,.live-room-error small{max-width:340px;color:var(--classic-muted,var(--muted));font-size:10px;line-height:1.55}
.live-room-error .secondary-btn{width:auto;margin-top:9px}
.live-room-pulse{width:14px;height:14px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 7px color-mix(in srgb,#22c55e 13%,transparent);animation:liveRoomPulse 1.25s ease-in-out infinite}
@keyframes liveRoomPulse{50%{transform:scale(.75);opacity:.72}}
.live-room-status-card{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid color-mix(in srgb,#22c55e 36%,var(--classic-border,var(--line)));border-radius:10px;background:color-mix(in srgb,#22c55e 7%,var(--classic-panel-soft,var(--panel2)))}
.live-room-status-icon{display:grid;place-items:center;width:52px;height:52px;min-width:52px;border-radius:50%;background:#16a34a;color:#fff;font-size:24px;box-shadow:0 0 0 7px color-mix(in srgb,#22c55e 10%,transparent)}
.live-room-status-card>div:last-child{min-width:0}
.live-room-status-card strong,.live-room-status-card small{display:block}
.live-room-status-card strong{font-size:13px}
.live-room-status-card small{margin-top:4px;color:var(--classic-muted,var(--muted));font-size:9px;line-height:1.5}
.live-room-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.live-room-actions .primary-btn,.live-room-actions .secondary-btn{width:100%;min-height:39px}
.live-room-actions .danger-button{grid-column:1/-1;color:#ef4444;border-color:color-mix(in srgb,#ef4444 42%,var(--classic-border,var(--line)))}
.live-room-note{margin:0;color:var(--classic-muted,var(--muted));font-size:9px;line-height:1.5;text-align:center}

.live-spaces{display:flex;flex-direction:column;gap:12px}
.live-spaces-head{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--classic-border,var(--line));border-radius:9px;background:var(--classic-panel-soft,var(--panel2))}
.live-spaces-head>div{min-width:0;flex:1}
.live-spaces-head strong,.live-spaces-head small{display:block}
.live-spaces-head strong{font-size:13px}
.live-spaces-head small{margin-top:3px;color:var(--classic-muted,var(--muted));font-size:9px;line-height:1.45}
.live-space-list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}
.live-space-user{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--classic-border,var(--line));border-radius:8px;background:var(--classic-panel,var(--panel))}
.live-space-user>.avatar{width:38px;height:38px;min-width:38px}
.live-space-user>div{min-width:0;flex:1}
.live-space-user strong,.live-space-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-space-user strong{font-size:11px}.live-space-user small{margin-top:3px;color:var(--classic-muted,var(--muted));font-size:8px}
.live-space-user em{margin-left:4px;padding:2px 4px;border-radius:4px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-size:7px;font-style:normal;font-weight:900}
.live-open-mic,.live-muted-badge,.live-camera-badge{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:999px;font-size:8px;font-weight:900;white-space:nowrap}
.live-open-mic{background:color-mix(in srgb,#22c55e 12%,transparent);color:#16a34a}
.live-open-mic .ui-icon{width:11px;height:11px}
.live-muted-badge{background:color-mix(in srgb,#64748b 13%,transparent);color:var(--classic-muted,var(--muted))}
.live-camera-badge{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.live-camera-badge.is-off{background:color-mix(in srgb,#64748b 10%,transparent);color:var(--classic-muted,var(--muted))}
.live-spaces-actions{display:grid;grid-template-columns:1fr auto;gap:7px}
.live-spaces-actions .primary-btn,.live-spaces-actions .secondary-btn{width:100%}
.live-media-viewer-actions{display:flex;justify-content:flex-end}.live-media-viewer-actions .secondary-btn{width:auto;min-width:92px}

.community-wall{display:flex;flex-direction:column;gap:17px}
.community-wall-hero{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px;border:1px solid var(--classic-border,var(--line));border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--classic-panel-soft,var(--panel2))),var(--classic-panel,var(--panel)))}
.community-wall-hero>div:first-child{display:flex;align-items:center;gap:11px;min-width:0}
.community-wall-hero>div:first-child>span{font-size:35px}
.community-wall-hero strong,.community-wall-hero small{display:block}
.community-wall-hero strong{font-size:15px}.community-wall-hero small{margin-top:3px;color:var(--classic-muted,var(--muted));font-size:9px}
.community-wall-stats{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.community-wall-stats span{padding:6px 8px;border-radius:8px;background:var(--classic-panel,var(--panel));border:1px solid var(--classic-border,var(--line));font-size:8px;color:var(--classic-muted,var(--muted));white-space:nowrap}.community-wall-stats b{color:var(--classic-text,var(--text));font-size:11px}
.community-wall-actions{display:flex;gap:7px}.community-wall-actions .primary-btn,.community-wall-actions .secondary-btn{width:auto}
.community-wall section{display:flex;flex-direction:column;gap:8px}
.community-section-head{display:flex;align-items:center;justify-content:space-between}.community-section-head strong{font-size:12px}.community-section-head small{color:var(--classic-muted,var(--muted));font-size:8px}
.community-story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.community-story-card{min-width:0;padding:0;overflow:hidden;border:1px solid var(--classic-border,var(--line));border-radius:9px;background:var(--classic-panel,var(--panel));color:var(--classic-text,var(--text));text-align:left;cursor:pointer}
.community-story-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.community-story-card>img,.community-story-fallback{display:grid;place-items:center;width:100%;aspect-ratio:4/3;object-fit:cover;font-size:28px;background:linear-gradient(135deg,var(--accent),var(--accent2,#ec4899));color:#fff}
.community-story-card>span:last-child{display:block;padding:7px}.community-story-card strong,.community-story-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.community-story-card strong{font-size:9px}.community-story-card small{margin-top:3px;color:var(--classic-muted,var(--muted));font-size:7px}
.community-room-list{display:flex;flex-direction:column;gap:6px}
.community-room-card{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--classic-border,var(--line));border-radius:8px;background:var(--classic-panel,var(--panel));color:inherit;text-decoration:none}
.community-room-card:hover,.community-room-card.current{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--classic-panel,var(--panel)))}
.community-room-card>span{display:grid;place-items:center;width:35px;height:35px;min-width:35px;border-radius:8px;background:var(--classic-panel-soft,var(--panel2));font-size:18px}.community-room-card>div{min-width:0;flex:1}.community-room-card strong,.community-room-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.community-room-card strong{font-size:10px}.community-room-card small{margin-top:3px;color:var(--classic-muted,var(--muted));font-size:8px}.community-room-card>b{font-size:8px;color:#16a34a;white-space:nowrap}
.community-empty{padding:20px;border:1px dashed var(--classic-border,var(--line));border-radius:8px;color:var(--classic-muted,var(--muted));font-size:9px;text-align:center}

@media(max-width:700px){
  .community-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .community-wall-hero{align-items:flex-start;flex-direction:column}
  .community-wall-stats{justify-content:flex-start}
  .live-camera-badge{display:none}
  .live-room-actions,.live-spaces-actions{grid-template-columns:1fr}
  .live-room-actions .danger-button{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){.live-mic-mark,.live-room-pulse{animation:none}}


/* v4.0.9 system/performance fixes — preserves the existing visual design. */
.live-directory-list{display:flex;flex-direction:column;gap:10px}
.live-directory-card{margin:0}
.admin-content-form .check-line{align-self:center;min-height:44px}
@media (pointer:coarse){
  button,.footer-item,.composer-item,.panel-tool,.mini-btn,.secondary-btn{touch-action:manipulation}
  .footer-item,.composer-item,.panel-tool{min-height:44px}
}
@media (max-width:850px){
  .classic-chat-page{min-height:100dvh}
  .classic-head{padding-top:env(safe-area-inset-top)}
  .classic-footer{height:calc(var(--classic-foot) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
  .classic-shell{inset:calc(var(--classic-head) + env(safe-area-inset-top)) 0 calc(var(--classic-foot) + env(safe-area-inset-bottom))}
  .classic-chat-page .modal-backdrop{padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));align-items:flex-end}
  .classic-chat-page .modal{max-height:min(92dvh,760px);overscroll-behavior:contain}
  .classic-chat-page .modal-body{-webkit-overflow-scrolling:touch}
  .live-spaces-actions{position:sticky;bottom:0;background:var(--classic-panel,var(--panel));padding-bottom:max(2px,env(safe-area-inset-bottom))}
  .auth-page{min-height:100dvh}
  input,select,textarea{font-size:16px}
}