/* Decorative generated artwork; content always has its own readable surface. */
:root{--city-wallpaper:url('wallpapers/mzansi.webp')}
body[data-city-art="johannesburg"]{--city-wallpaper:url('wallpapers/johannesburg.webp')}
body[data-city-art="durban"]{--city-wallpaper:url('wallpapers/durban.webp')}
body[data-city-art="cape-town"]{--city-wallpaper:url('wallpapers/cape-town.webp')}
body[data-city-art="pietermaritzburg"]{--city-wallpaper:url('wallpapers/pietermaritzburg.webp')}
body{background:#071a2c;isolation:isolate;min-height:100dvh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(180deg,rgba(4,18,39,.32),rgba(4,18,39,.64)),var(--city-wallpaper);background-size:cover;background-position:center 58%;background-repeat:no-repeat}
header{background:rgba(10,28,48,.97);border-bottom:1px solid #31516d}
#desktop{color:#fff}main{padding-top:12px}#screen{padding:14px;background:#eff4f8;border:1px solid #ccdce7;border-radius:16px;box-shadow:0 8px 24px #03112033;min-height:100px}
#screen>h1{font-size:23px}input,select{color:#183247}.install-card{box-shadow:0 3px 15px #03112030}
.welcome-scenery,.room-scenery{background-image:linear-gradient(90deg,rgba(3,16,35,.92),rgba(3,16,35,.15)),var(--city-wallpaper);background-size:cover;background-position:center 58%;border:1px solid #52778a;color:white;border-radius:13px;overflow:hidden;position:relative}
.welcome-scenery{margin:-5px -5px 16px;padding:19px 15px;min-height:165px;border-bottom:3px solid #b9f154}
.scenery-tag{display:block;font-size:9px;letter-spacing:1.5px;font-weight:800;color:#c8f879;text-shadow:0 1px 3px #031120}
.welcome-scenery h2{font-size:26px;line-height:1.08;margin:12px 0 8px;letter-spacing:-.6px;color:white;text-shadow:0 1px 5px #031120}
.welcome-scenery p{font-size:12px;margin:0;color:#e6f4ff;text-shadow:0 1px 4px #031120}
.room-card{gap:10px;background:#fff;min-height:70px;padding:9px;border-left-width:3px}.room-card .fill strong{display:block}.city-thumbnail{width:64px;height:46px;flex:0 0 64px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#184874,#773ba2);border:1px solid #294561;display:block}.city-thumb{display:block;width:100%;height:100%;object-fit:cover;object-position:center 58%}.city-thumb[hidden]{display:none}
.room-scenery{min-height:98px;padding:17px 14px;display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:10px;background-position:center 58%}.room-scenery strong{font-size:23px;line-height:1.15;color:white;margin-top:9px;text-shadow:0 2px 5px #031120}
body[data-kasi-view="chat"] #screen,body[data-kasi-view="private"] #screen{background:transparent;border:0;box-shadow:none;padding:0}
body[data-kasi-view="chat"] .chat-heading,body[data-kasi-view="private"] .chat-heading{background:#10263b;color:white;border-radius:10px;padding:9px;top:108px;border:1px solid #405d75}
body[data-kasi-view="chat"] .chat-hint,body[data-kasi-view="private"] .chat-hint{color:#eef7ff;text-shadow:0 1px 3px #031120}
body[data-kasi-view="chat"] .room-welcome{color:#314854;background:#e2e8ef;border:1px solid #aebdca}
body[data-kasi-view="chat"] .empty,body[data-kasi-view="private"] .empty{color:#eff7ff;background:#10263beF;border-radius:10px}
.chat-message{background:#fff;color:#183247;border-color:#b4c7d6;box-shadow:0 2px 5px #03112035}.chat-message.mine{background:#e2f2c8}.chat-dock{background:#10263b;border-color:#45617a}.chat-dock .action{background:#b9f154;color:#10263b;font-weight:700}.chat-dock #send-state{color:#f2f7fb;text-shadow:none}.chat-dock input{background:#fff;color:#183247}
#alert.ok:not(:empty){background:#eff9e3;border:1px solid #b1cf89;padding:9px;border-radius:8px}.pwa-help{color:#f0f6fa}.install-card .pwa-help{color:#536e81}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Room directory: compact original cards on the visible city wallpaper. */
body[data-kasi-view="rooms"] #screen{background:transparent;border:0;box-shadow:none;padding:0}
body[data-kasi-view="rooms"] #screen>h1,body[data-kasi-view="rooms"] #room-list>h2,body[data-kasi-view="rooms"] #screen>p{color:#f3f8ff;text-shadow:0 1px 4px #031120}
body[data-kasi-view="rooms"] .room-filters{background:rgba(10,28,48,.78);border:1px solid #49657b;border-radius:12px;padding:5px 12px 9px;color:#f3f8ff}
body[data-kasi-view="rooms"] .room-card{background:rgba(244,247,255,.82);color:#183247;min-height:60px;padding:9px 11px;box-shadow:0 2px 6px #03112020;border-color:rgba(211,224,238,.75);border-left-color:#466abc}
body[data-kasi-view="rooms"] .room-tone-1{background:rgba(255,244,250,.82);border-left-color:#a94680}
body[data-kasi-view="rooms"] .room-tone-2{background:rgba(239,251,247,.82);border-left-color:#217c6e}
body[data-kasi-view="rooms"] .room-tone-3{background:rgba(255,248,235,.82);border-left-color:#9e671a}
body[data-kasi-view="rooms"] .room-tone-4{background:rgba(248,242,255,.82);border-left-color:#7351a3}
body[data-kasi-view="rooms"] .room-tone-5{background:rgba(255,244,239,.82);border-left-color:#a84e3a}
body[data-kasi-view="rooms"] .room-card .muted{color:#415564}
body[data-kasi-view="rooms"] .room-card .avatar{width:32px;height:32px;font-size:18px;border-radius:8px}
body[data-kasi-view="rooms"] #room-list>.empty{color:#f3f8ff;background:rgba(10,28,48,.78);border-radius:10px}

/* Conversation mode: only the composer at the bottom; Back restores the menu. */
body[data-kasi-view="chat"] #nav,body[data-kasi-view="private"] #nav{display:none}
body[data-kasi-view="chat"] .chat-dock,body[data-kasi-view="private"] .chat-dock{bottom:var(--keyboard-inset,0px);padding-bottom:max(4px,env(safe-area-inset-bottom))}
body[data-kasi-view="chat"] main,body[data-kasi-view="private"] main{padding-bottom:24px}

/* Public rooms: one city title, no global header or empty-room prompt. */
body[data-kasi-view="chat"] #app>header,body[data-kasi-view="chat"] #install-panel,body[data-kasi-view="chat"] #pwa-update,body[data-kasi-view="chat"] #pwa-status{display:none}
body[data-kasi-view="chat"] main{padding-top:max(12px,env(safe-area-inset-top))}
body[data-kasi-view="chat"] .chat-heading{top:max(6px,env(safe-area-inset-top));width:fit-content;padding:5px;margin:0 0 9px}
body[data-kasi-view="chat"] .room-scenery{margin-top:0}

/* Room exit lives in the artwork card instead of a separate toolbar. */
.room-card-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.room-back{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid #a9c5d880;background:rgba(5,21,39,.9);color:#fff;font-size:25px;line-height:1;padding:0;box-shadow:0 2px 7px #03112055}
.room-back:focus-visible{outline:3px solid #b9f154;outline-offset:3px}
.room-back:active{background:#234661}
.room-scenery #chat-title{display:block;overflow-wrap:anywhere}