/* ============================================================
   OurWorld — Kawaii World CSS v2
   ============================================================ */

/* ── CSS Variables ── */
:root {
  /* Room colors */
  --sky:          #c8e6f5;
  --wall-living:  #f2ece0;
  --wall-study:   #e8f0e0;
  --wall-kitchen: #f5f0d4;
  --floor-color:  #b0c8d0;
  --floor-line:   #8ab0ba;
  --wall-h: 66%;

  /* Brand */
  --pink:    #f5b8c8;
  --pink-dk: #e898b0;
  --green:   #a8d8a8;
  --yellow:  #f5dfa0;
  --purple:  #c8b8f0;
  --blue:    #a8c8e8;
  --orange:  #f5c8a0;

  /* UI */
  --text:      #4a4a6a;
  --text-soft: #8888aa;
  --white:     #ffffff;
  --glass:     rgba(255,255,255,0.84);
  --glass-bd:  rgba(200,210,230,0.45);
  --shadow:    0 4px 20px rgba(80,80,120,0.10);
  --shadow-lg: 0 8px 32px rgba(80,80,120,0.14);
  --r:    20px;
  --r-sm: 12px;
  --r-pill: 999px;

  --taskbar-h: 76px;
  --world-h:   calc(100dvh - var(--taskbar-h));
  --world-w:   400vw;
}

/* ── Night theme ── */
[data-theme="night"] {
  --sky:          #0a0a1a;
  --wall-living:  #1c1c2e;
  --wall-study:   #181828;
  --wall-kitchen: #201828;
  --floor-color:  #121220;
  --floor-line:   #202040;
}
/* ── Garden theme ── */
[data-theme="garden"] {
  --sky:          #a0d890;
  --wall-living:  #e8f8e0;
  --wall-study:   #f0fce8;
  --wall-kitchen: #f8f4d8;
  --floor-color:  #a8c870;
  --floor-line:   #88a850;
}
/* ── Minimal theme ── */
[data-theme="minimal"] {
  --sky:          #f8f8fc;
  --wall-living:  #ffffff;
  --wall-study:   #f8f8fc;
  --wall-kitchen: #fafaf8;
  --floor-color:  #e8ecf0;
  --floor-line:   #d0d4da;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--sky);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Character Bubbles (top right) ── */
#char-bubbles {
  position: fixed;
  top: 12px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 90;
}
.char-bubble {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass);
  border: 2.5px solid var(--glass-bd);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
  overflow: visible;
}
.char-bubble img { width: 32px; height: 32px; object-fit: contain; }
.char-bubble:active { transform: scale(0.9); }
.char-bubble.is-agent::after {
  content: '🤖';
  position: absolute;
  font-size: 10px;
  bottom: -3px; right: -3px;
  background: white;
  border-radius: 50%;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ── FABs ── */
.world-fab {
  position: fixed;
  right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass);
  border: 2px solid var(--glass-bd);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  z-index: 90;
  transition: transform 0.15s, background 0.15s;
}
.world-fab:active { transform: scale(0.88); }
#edit-btn        { bottom: calc(var(--taskbar-h) + 70px); }
.world-fab-add   { bottom: calc(var(--taskbar-h) + 120px); font-size: 26px; font-weight: 300; }
.world-fab-notify{ bottom: calc(var(--taskbar-h) + 170px); }
#edit-btn.active { background: var(--pink); border-color: var(--pink-dk); }
.world-fab-add   { background: rgba(160,140,220,0.9); color: white; border-color: rgba(140,120,200,0.6); font-weight: 400; }
.world-fab-add:active { transform: scale(0.88); }

/* ── World Viewport ── */
#world-viewport {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--world-h);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  cursor: grab;
}
#world-viewport:active { cursor: grabbing; }
#world-viewport::-webkit-scrollbar { display: none; }
#world-viewport { -ms-overflow-style: none; scrollbar-width: none; }
#world-viewport.panel-open { cursor: default; }

#world {
  position: relative;
  width: var(--world-w);
  height: 100%;
  overflow: hidden;
}

/* ── Room Backgrounds ── */
#world-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Room sections — each is 25% of world (= 1 viewport width) */
.room-section {
  position: absolute;
  top: 0;
  height: 100%;
}
#room-living  { left: 0;   width: 25%; }
#room-study   { left: 25%; width: 25%; }
#room-kitchen { left: 50%; width: 40%; }
#room-extra   { left: 90%; width: 10%; }

.room-wall {
  position: absolute;
  inset: 0;
  bottom: var(--wall-h);
  transform: translateY(0);
  top: 0;
  height: var(--wall-h);
}
.living-wall  { background: linear-gradient(180deg, #f8f4ec 0%, var(--wall-living)  100%); }
.study-wall   { background: linear-gradient(180deg, #f0f8e8 0%, var(--wall-study)   100%); }
.kitchen-wall { background: linear-gradient(180deg, #faf8e0 0%, var(--wall-kitchen) 100%); }
.extra-wall   { background: var(--wall-kitchen); }

/* Room dividers */
.study-wall::before, .kitchen-wall::before, .extra-wall::before {
  content: '';
  position: absolute;
  left: 0; top: 8%; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(180,175,160,0.25) 30%, rgba(180,175,160,0.25) 80%, transparent);
}

/* ── Windows ── */
.window {
  position: absolute;
  top: 8%; left: 18%; width: 50%; height: 46%;
  background: #d8eef8;
  border: 6px solid #d8cdb8;
  border-radius: 6px 6px 2px 2px;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(200,230,255,0.3), 0 0 0 5px rgba(245,242,236,0.85);
}
.living-window { left: 16%; width: 52%; }
.study-window  { left: 20%; width: 44%; top: 10%; height: 36%; }

.window-sky, .study-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #8ec8f8 0%, #b8dff8 55%, #d8f0e8 100%);
}
.study-sky { background: linear-gradient(180deg, #98e898 0%, #c0f0c0 60%, #d8f8d8 100%); }

/* Clouds outside window */
.w-cloud {
  position: absolute;
  background: rgba(255,255,255,0.85);
  border-radius: 50px;
  height: 20px;
}
.w-cloud::before {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
  width: 60%; height: 150%;
  top: -40%; left: 15%;
}
.w-cloud-1 { width: 50%; left: 5%;  top: 20%; }
.w-cloud-2 { width: 40%; left: 45%; top: 10%; height: 15px; }
.w-cloud-3 { width: 55%; left: 10%; top: 15%; }

/* Trees outside window */
.w-tree {
  position: absolute;
  bottom: 0;
  width: 18%;
  height: 70%;
  background: linear-gradient(180deg, #50a838 0%, #70c050 100%);
  border-radius: 50% 50% 10% 10%;
}
.w-tree::after {
  content: '';
  position: absolute;
  bottom: -20%; left: 35%;
  width: 30%; height: 30%;
  background: #6a5030;
  border-radius: 2px;
}
.w-tree-l { left: 2%; }
.w-tree-r { right: 2%; }

/* Window leaf (study) */
.w-leaf {
  position: absolute;
  bottom: 0; left: -5%;
  width: 50%; height: 100%;
  background: linear-gradient(135deg, #60a838, #90d850);
  border-radius: 0 80% 0 0;
  opacity: 0.7;
}

/* Window bars */
.window-v-bar, .window-h-bar {
  position: absolute;
  background: rgba(220,213,195,0.8);
  z-index: 2;
}
.window-v-bar { top: 0; bottom: 0; left: 50%; width: 5px; transform: translateX(-50%); }
.window-h-bar { left: 0; right: 0; top: 50%; height: 5px; transform: translateY(-50%); }

/* ── Curtains ── */
.curtain {
  position: absolute;
  top: 4%; width: 16%; height: 56%;
  background: linear-gradient(180deg, #e8d4f4 0%, #d8c4e8 100%);
  z-index: 3;
}
.curtain-l {
  left: 10%;
  border-radius: 0 0 40% 10%;
  transform: rotate(-3deg);
  transform-origin: top center;
}
.curtain-r {
  right: 10%;
  border-radius: 0 0 10% 40%;
  transform: rotate(3deg);
  transform-origin: top center;
}
.curtain::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: #d0c0e0;
  border-radius: 3px;
}
/* Curtain rod */
.living-wall::before {
  content: '';
  position: absolute;
  top: 3.5%; left: 8%; right: 8%;
  height: 5px;
  background: #c8b8a0;
  border-radius: 3px;
  z-index: 4;
}

/* ── Hanging decorations ── */
.room-hang {
  position: absolute;
  font-size: 0;
  z-index: 4;
}
.room-hang::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 1.5px;
  background: #c0b8a8;
  transform: translateX(-50%);
}
.room-hang-star {
  top: 0; left: 6%;
  width: 28px; height: 50px;
}
.room-hang-star::before { height: 30px; }
.room-hang-star::after {
  content: '★';
  position: absolute;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color: #f5d840;
  text-shadow: 0 2px 4px rgba(200,160,0,0.3);
}
.room-hang-moon {
  top: 0; right: 8%;
  width: 30px; height: 56px;
}
.room-hang-moon::before { height: 38px; }
.room-hang-moon::after {
  content: '☽';
  position: absolute;
  top: 38px; left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color: #f5e890;
}
.room-hang-star2 {
  top: 0; left: 10%;
  width: 28px; height: 44px;
}
.room-hang-star2::before { height: 28px; }
.room-hang-star2::after {
  content: '★';
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: #f5b8c8;
}

/* ── String lights (study) ── */
.string-lights {
  position: absolute;
  top: 3%; left: 5%; right: 5%;
  height: 30px;
  z-index: 4;
}
.string-lights::before {
  content: '';
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 2px;
  background: #b0a890;
  border-radius: 2px;
}
.string-lights::after {
  content: '💡 💡 💡 💡 💡';
  position: absolute;
  top: 6px; left: 5%;
  font-size: 14px;
  letter-spacing: 14px;
  filter: drop-shadow(0 2px 4px rgba(255,200,50,0.5));
}

/* ── Kitchen background elements ── */
.kitchen-tiles-upper {
  position: absolute;
  top: 40%; left: 0; right: 0;
  height: 25%;
  background:
    linear-gradient(rgba(240,230,200,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,230,200,0.4) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: rgba(255,250,230,0.3);
}

.kitchen-counter-bg {
  position: absolute;
  bottom: 35%; left: 0; right: 0;
  height: 28%;
}
.counter-sink {
  position: absolute;
  bottom: 0; left: 30%; right: 10%;
  height: 100%;
  background: linear-gradient(180deg, #e0dcd8 0%, #d4d0cc 100%);
  border-radius: 8px 8px 0 0;
}
.counter-sink::before {
  content: '';
  position: absolute;
  top: 20%; left: 20%; right: 20%; bottom: 10%;
  background: #c8c4c0;
  border-radius: 6px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
}
/* Utensils hanging */
.counter-utensils {
  position: absolute;
  top: -50%; left: 35%; right: 10%;
  height: 50%;
  border-top: 3px solid #c0b8a8;
}
.utensil {
  position: absolute;
  width: 4px;
  background: #b0a898;
  border-radius: 2px;
  bottom: 0;
}
.u-pan      { left: 20%; height: 70%; width: 28px; height: 28px; border-radius: 50%; background: #808080; bottom: 20%; }
.u-spatula  { left: 48%; height: 80%; width: 3px; bottom: 0; }
.u-ladle    { left: 68%; height: 70%; width: 3px; bottom: 0; }

/* ── Floor ── */
.bg-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: calc(100% - var(--wall-h));
  background: linear-gradient(180deg, var(--floor-color) 0%, color-mix(in srgb, var(--floor-color) 70%, #60808a) 100%);
  z-index: 0;
}
.bg-floor::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--floor-line);
}
/* Subtle floor planks */
.bg-floor::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 180px 60px;
}

/* ── Objects Layer ── */
#objects-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
}

/* ── World Object Base ── */
.world-obj {
  position: absolute;
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}
.obj-sprite {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.12s ease, filter 0.15s ease;
}
.obj-sprite img.sprite-img {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 8px rgba(60,60,90,0.15));
  transition: filter 0.15s, transform 0.12s;
}
.world-obj:hover .sprite-img {
  filter: drop-shadow(0 6px 14px rgba(60,60,90,0.22));
}
.world-obj:active .sprite-img { transform: scale(0.93); }

/* Sprite sizes */
.size-xs .sprite-img { width: 48px;  height: 48px; }
.size-sm .sprite-img { width: 70px;  height: 70px; }
.size-md .sprite-img { width: 96px;  height: 96px; }
.size-lg .sprite-img { width: 130px; height: 130px; }
.size-xl .sprite-img { width: 170px; height: 170px; }

/* Character name label */
.obj-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-soft);
  margin-top: 2px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}
.world-obj:not(:hover) .obj-name { opacity: 0; transition: opacity 0.2s; }
.world-obj:hover .obj-name { opacity: 1; }

/* Agent badge */
.world-obj.is-agent .obj-sprite::after {
  content: '🤖';
  position: absolute;
  font-size: 14px;
  bottom: 2px; right: -6px;
  background: white;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.world-obj.is-agent .obj-sprite { position: relative; }

/* Action badge (pops on tap) */
.obj-action-badge {
  position: absolute;
  top: -10px; right: -10px;
  background: white;
  border-radius: 50%;
  font-size: 18px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  animation: pop-badge 0.3s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 5;
}
@keyframes pop-badge {
  from { transform: scale(0) rotate(-30deg); }
  to   { transform: scale(1) rotate(0deg); }
}

/* ── Character animations ── */
.anim-float  { animation: char-float  3.2s ease-in-out infinite; }
.anim-bounce { animation: char-bounce 2.4s ease-in-out infinite; }
.anim-wag    { animation: char-wag    1.8s ease-in-out infinite; }
.anim-walk   { animation: char-walk   5s   ease-in-out infinite; }
@keyframes char-float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes char-bounce { 0%,100%{transform:translateY(0) scaleY(1)} 40%{transform:translateY(-14px) scaleY(1.05)} 70%{transform:translateY(-4px) scaleY(0.98)} }
@keyframes char-wag    { 0%,100%{transform:rotate(0)} 25%{transform:rotate(5deg)} 75%{transform:rotate(-5deg)} }
@keyframes char-walk   { 0%,100%{transform:translateX(0) scaleX(1)} 25%{transform:translateX(18px) scaleX(1)} 26%{transform:translateX(18px) scaleX(-1)} 75%{transform:translateX(-18px) scaleX(-1)} 76%{transform:translateX(-18px) scaleX(1)} }

/* ── Edit Mode ── */
.world-obj.draggable { cursor: grab; }
.world-obj.dragging  { cursor: grabbing; opacity: 0.82; z-index: 999; }
.world-obj.dragging .sprite-img {
  filter: drop-shadow(0 10px 28px rgba(100,80,200,0.45)) !important;
  transform: scale(1.08) !important;
}
.world-obj .drag-badge {
  position: absolute;
  inset: -6px;
  border: 2px dashed rgba(160,140,220,0.5);
  border-radius: 14px;
  pointer-events: none;
  display: none;
}
.world-obj.draggable .drag-badge { display: block; }

#edit-grid {
  position: absolute;
  inset: 0; z-index: 5;
  background-image:
    linear-gradient(rgba(160,140,220,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,140,220,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
#edit-grid.hidden { display: none; }

#edit-mode-indicator {
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  background: rgba(160,140,220,0.92);
  color: white;
  border-radius: var(--r-pill);
  padding: 7px 18px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
  z-index: 95;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(140,120,200,0.4);
  transition: opacity 0.2s;
}
#edit-mode-indicator.hidden { opacity: 0; pointer-events: none; display: block !important; }

/* ── Speech Bubble ── */
.speech-bubble {
  position: fixed;
  background: var(--white);
  border-radius: 18px 18px 4px 18px;
  padding: 10px 16px;
  box-shadow: var(--shadow-lg);
  font-size: 24px;
  pointer-events: none;
  z-index: 200;
  transform: scale(0);
  transform-origin: bottom left;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.speech-bubble.visible { transform: scale(1); }
.speech-bubble.hidden  { display: none; }

/* ── Bottom Taskbar ── */
#taskbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--taskbar-h);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1.5px solid var(--glass-bd);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 80;
  box-shadow: 0 -4px 20px rgba(80,80,120,0.08);
}
.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 6px;
  border-radius: var(--r-sm);
  flex: 1;
  max-width: 70px;
  transition: background 0.15s;
}
.tab-btn:active { background: rgba(160,140,220,0.12); }
.tab-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(220,215,240,0.3);
  display: flex; align-items: center; justify-content: center;
}
.tab-icon-img { font-size: 22px; }
.tab-label { font-size: 10px; font-weight: 700; color: var(--text-soft); letter-spacing: 0.3px; }
.tab-btn.active .tab-icon-wrap { background: var(--purple); }
.tab-btn.active .tab-label { color: #6648c8; }

/* Menu (center) button */
.tab-menu { flex: 0 0 auto; }
.menu-wrap {
  width: 52px; height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, #c8b0f8, #a090e8);
  box-shadow: 0 4px 16px rgba(160,140,220,0.5);
  margin-top: -8px;
}
.menu-grid-icon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 10px;
}
.menu-grid-icon span {
  width: 10px; height: 10px;
  background: rgba(255,255,255,0.9);
  border-radius: 3px;
}

/* ── Panel Popups ── */
.panel-popup {
  position: fixed;
  bottom: var(--taskbar-h);
  left: 0; right: 0;
  max-height: 72vh;
  background: var(--white);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 40px rgba(80,80,120,0.15);
  z-index: 150;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1), opacity 0.25s ease;
}
.panel-popup.hidden {
  transform: translateY(calc(100% + 20px));
  pointer-events: none;
  opacity: 0;
}
.popup-drag-handle {
  width: 36px; height: 4px;
  background: rgba(160,160,180,0.3);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

/* Mini-apps popup */
#mini-apps-menu { max-height: 60vh; }
.mini-apps-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 8px;
  flex-shrink: 0;
}
.mini-apps-title { font-size: 16px; font-weight: 800; color: var(--text); }
#mini-apps-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-content: start;
}
.mini-app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mini-app-icon-img {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  transition: transform 0.12s;
}
.mini-app-icon:active .mini-app-icon-img { transform: scale(0.88); }
.mini-app-label { font-size: 10px; font-weight: 700; color: var(--text-soft); text-align: center; }

/* Chat popup */
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(200,200,220,0.2);
  flex-shrink: 0;
}
.chat-avatar-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0;
  overflow: hidden;
}
.chat-avatar-circle img { width: 38px; height: 38px; object-fit: contain; }
.chat-meta { flex: 1; }
.chat-name { font-size: 15px; font-weight: 800; }
.chat-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-soft); margin-top: 1px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #5cb85c; box-shadow: 0 0 0 2px rgba(92,184,92,0.25); }
.popup-close-btn { width: 30px; height: 30px; border-radius: 50%; background: rgba(200,200,220,0.3); font-size: 12px; color: var(--text-soft); display: flex; align-items: center; justify-content: center; }
.popup-close-btn:active { background: rgba(200,200,220,0.6); }

/* Chat messages */
.chat-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-date-divider { text-align: center; font-size: 11px; color: var(--text-soft); margin: 4px 0; }
.chat-date-divider span { background: rgba(200,200,220,0.2); padding: 3px 10px; border-radius: 999px; }
.chat-msg { display: flex; gap: 8px; align-items: flex-end; animation: msg-in 0.22s ease; }
@keyframes msg-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.chat-msg.from-char { align-self: flex-start; }
.chat-msg.from-user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--purple); font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.chat-msg-avatar img { width: 26px; height: 26px; object-fit: contain; }
.chat-bubble { max-width: 70%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-break: break-word; }
.from-char .chat-bubble { background: rgba(200,190,245,0.18); border-radius: 4px 16px 16px 16px; color: var(--text); }
.from-user .chat-bubble { background: linear-gradient(135deg, #c8b0f8, #a090e8); color: white; border-radius: 16px 16px 4px 16px; }
.chat-msg-time { font-size: 10px; color: var(--text-soft); margin-top: 2px; }
.chat-typing { display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: rgba(200,190,245,0.18); border-radius: 4px 16px 16px 16px; width: fit-content; }
.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-soft); animation: typing-bounce 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2){animation-delay:.2s} .typing-dot:nth-child(3){animation-delay:.4s}
@keyframes typing-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* Chat input */
.chat-input-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(200,200,220,0.2); flex-shrink: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.chat-emoji-btn { font-size: 22px; flex-shrink: 0; }
.chat-input { flex: 1; height: 40px; border-radius: var(--r-pill); border: 1.5px solid rgba(200,190,240,0.4); padding: 0 14px; font-family: inherit; font-size: 14px; color: var(--text); background: rgba(240,238,255,0.5); outline: none; transition: border-color 0.2s; }
.chat-input:focus { border-color: rgba(160,140,220,0.7); }
.chat-send-btn { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #c8b0f8, #a090e8); color: white; font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(160,140,220,0.4); flex-shrink: 0; }

/* Edit panel */
.edit-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; flex-shrink: 0; }
.edit-title { font-size: 17px; font-weight: 800; }
.btn-done { height: 32px; padding: 0 18px; border-radius: var(--r-pill); background: linear-gradient(135deg, #c8b0f8, #a090e8); color: white; font-size: 13px; font-weight: 800; font-family: inherit; }
.edit-tabs { display: flex; gap: 6px; padding: 0 14px 12px; flex-shrink: 0; }
.edit-tab { flex: 1; height: 34px; border-radius: var(--r-sm); background: rgba(220,215,240,0.3); font-size: 11px; font-weight: 700; font-family: inherit; color: var(--text-soft); transition: background 0.15s, color 0.15s; }
.edit-tab.active { background: var(--purple); color: white; }
#catalog-grid { flex: 1; overflow-y: auto; padding: 0 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: start; }
.catalog-item { aspect-ratio: 1; border-radius: 14px; background: rgba(240,238,255,0.6); border: 1.5px solid rgba(200,190,240,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: transform 0.15s, background 0.15s; overflow: hidden; padding: 6px; }
.catalog-item:active { transform: scale(0.9); background: rgba(200,190,245,0.5); }
.catalog-item img { width: 44px; height: 44px; object-fit: contain; }
.catalog-item-emoji { font-size: 28px; }
.catalog-item-name { font-size: 9px; font-weight: 700; color: var(--text-soft); text-align: center; }
.catalog-item.already-added { opacity: 0.45; pointer-events: none; }
.edit-hint { padding: 12px 18px 16px; font-size: 11px; color: var(--text-soft); text-align: center; line-height: 1.8; flex-shrink: 0; }

/* BG chooser */
#bg-grid { flex: 1; overflow-y: auto; padding: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bg-option { height: 80px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; cursor: pointer; border: 3px solid transparent; transition: border-color 0.2s, transform 0.15s; }
.bg-option:active { transform: scale(0.96); }
.bg-option.active { border-color: var(--purple); }
.bg-option-classic { background: linear-gradient(135deg, #c8e6f5, #f2ece0, #b0c8d0); color: #4a4a6a; }
.bg-option-night   { background: linear-gradient(135deg, #0a0a1a, #1c1c2e, #121220); color: #c8c8f0; }
.bg-option-garden  { background: linear-gradient(135deg, #a0d890, #e8f8e0, #a8c870); color: #2a5a20; }
.bg-option-minimal { background: linear-gradient(135deg, #f8f8fc, #ffffff, #e8ecf0); color: #6a6a8a; border: 2px solid rgba(200,200,220,0.4); }

/* Panel header/body */
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; flex-shrink: 0; }
.panel-title { font-size: 17px; font-weight: 800; }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.panel-close { color: var(--text-soft); font-size: 12px; }

/* Timer */
.timer-status-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(168,216,168,0.25); border: 1.5px solid rgba(120,180,120,0.3); border-radius: var(--r-pill); padding: 6px 16px; font-weight: 700; font-size: 14px; color: #4a8a4a; margin-bottom: 16px; }
.big-timer { font-size: 48px; font-weight: 900; color: var(--text); letter-spacing: -1px; margin-bottom: 8px; }
.timer-sub { font-size: 13px; color: var(--text-soft); margin-bottom: 24px; }
.timer-action-btn { width: 100%; height: 50px; border-radius: var(--r-pill); background: linear-gradient(135deg, #a0d898, #78c878); color: white; font-size: 16px; font-weight: 800; font-family: inherit; box-shadow: 0 4px 14px rgba(100,180,100,0.35); }
.timer-action-btn.fasting { background: linear-gradient(135deg, #f5b8c8, #e898b0); box-shadow: 0 4px 14px rgba(220,120,140,0.35); }

.placeholder-content { text-align: center; padding: 48px 0; }
.placeholder-emoji { font-size: 64px; margin-bottom: 16px; }
.placeholder-text { font-size: 16px; color: var(--text-soft); font-weight: 600; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-card { background: rgba(240,238,255,0.5); border-radius: var(--r-sm); padding: 14px; }
.stat-label { font-size: 11px; color: var(--text-soft); font-weight: 600; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 900; }

/* ── Overlay ── */
#overlay { position: fixed; inset: 0; background: rgba(60,55,90,0.25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 140; transition: opacity 0.25s; }
#overlay.hidden { display: none; }

/* ── Scrollbar (chat) ── */
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(160,140,220,0.3); border-radius: 3px; }

/* ── Utility ── */
.hidden { display: none !important; }

/* ── Desktop viewport ── */
@media (min-width: 500px) {
  #world-viewport { left: 50%; right: auto; width: min(100vw, 420px); transform: translateX(-50%); }
  #taskbar, #char-bubbles { left: 50%; right: auto; width: min(100vw, 420px); transform: translateX(-50%); }
  .world-fab { right: calc(50% - min(50vw, 210px) + 14px); }
  #edit-mode-indicator { left: 50%; transform: translateX(-50%); }
  .panel-popup { left: 50%; right: auto; width: min(100vw, 420px); transform: translateX(-50%) translateY(0); }
  .panel-popup.hidden { transform: translateX(-50%) translateY(calc(100% + 20px)); }
  #overlay { display: block !important; }
}