:root {
  /* Official Telegram Dark Palette - Classy & Native */
  --tg-bg: #1c242e; 
  --tg-header-bg: #17212b;
  --tg-text: #ffffff;
  --tg-text-muted: #7e8c9a;
  --tg-accent: #3390ec;
  --tg-bubble-out: #2b5278;
  --tg-bubble-in: #182533;
  --tg-border: rgba(255, 255, 255, 0.08);
  --tg-price-gold: #fecb2e;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
body { background: #000; color: #fff; height: 100vh; width: 100vw; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* Mini App Shell - CLEAN 1:1 TELEGRAM FRAME */
.mini-app-frame {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: -webkit-fill-available;
  background-color: var(--tg-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Header - THE CLASSY TELEGRAM HEADER */
header { 
  height: 54px; 
  background: var(--tg-header-bg);
  padding: 0 16px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  border-bottom: 1px solid var(--tg-border); 
  z-index: 200;
  flex-shrink: 0;
}
.header-brand { display: flex; align-items: center; gap: 10px; }
.header-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #000; }
.header-info h1 { font-size: 0.95rem; font-weight: 700; color: #fff; }
.header-info span { font-size: 0.75rem; color: var(--tg-accent); font-weight: 600; opacity: 0.9; }

/* Tabs - NATIVE TELEGRAM TICKET DESIGN */
.tab-container { display: flex; background: var(--tg-header-bg); border-bottom: 1px solid var(--tg-border); flex-shrink: 0; }
.tab { flex: 1; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--tg-text-muted); cursor: pointer; gap: 4px; position: relative; transition: color 0.2s; }
.tab i { font-size: 1.1rem; }
.tab.active { color: var(--tg-accent); }
.tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--tg-accent); }

/* Viewport Shell */
.views-viewport { flex: 1; position: relative; overflow: hidden; }
.view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; overflow-y: auto; padding: 12px; }
.view.active { display: block; }
#viewChat { padding: 0; overflow: hidden; } /* Chat View Fix */

/* 💬 ORCHESTRATOR CHAT WRAPPER */
.chat-container { display: flex; flex-direction: column; height: 100%; background: var(--tg-bg); }
.chat-viewport { flex: 1; overflow-y: auto; padding: 12px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 4px; -webkit-overflow-scrolling: touch; }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 15px; font-size: 0.9rem; line-height: 1.4; margin-bottom: 2px; }
.bubble.in { background: var(--tg-bubble-in); align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid rgba(255,255,255,0.03); }
.bubble.out { background: var(--tg-bubble-out); align-self: flex-end; border-bottom-right-radius: 4px; }
.time { display: block; text-align: right; font-size: 0.6rem; color: rgba(255,255,255,0.3); margin-top: 4px; }

/* 🛰️ PERMANENT BOTTOM BAR - NATIVE STYLE */
.bottom-bar { 
  height: 56px; 
  background: var(--tg-header-bg); 
  border-top: 1px solid var(--tg-border); 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 0 16px; 
  padding-bottom: env(safe-area-inset-bottom);
  flex-shrink: 0; 
  z-index: 100;
}
.bottom-bar i { color: var(--tg-text-muted); font-size: 1.4rem; cursor: pointer; }
.bottom-bar input { flex: 1; background: transparent; border: none; font-size: 0.95rem; color: #fff; height: 100%; outline: none; }

/* 🛒 MARKETPLACE: CLEAN CLASSY ROWS */
.market-grid { display: flex; flex-direction: column; }
.market-card { display: flex; padding: 12px 16px; gap: 14px; border-bottom: 1px solid var(--tg-border); transition: background 0.15s; }
.market-card:active { background: rgba(255, 255, 255, 0.05); }
.card-img-container { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.card-img { width: 100%; height: 100%; object-fit: cover; }
.card-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.card-name-row { display: flex; justify-content: space-between; gap: 10px; }
.card-info h3 { font-size: 0.95rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-price { font-size: 0.85rem; font-weight: 800; color: var(--tg-price-gold); }

/* 🍱 CHAT WIDGETS */
.agent-widget { background: var(--tg-header-bg); border-radius: 12px; border: 1px solid var(--tg-border); margin: 8px 0; overflow: hidden; width: 100%; }
.agent-row { padding: 10px 14px; border-bottom: 1px solid var(--tg-border); display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 0.85rem; }
.agent-avatar-img { width: 34px; height: 34px; border-radius: 8px; }
.agent-row .name { font-weight: 700; flex: 1; }

/* 🛠️ DEVELOPER PORTAL */
.list-group { background: var(--tg-header-bg); border-radius: 12px; border: 1px solid var(--tg-border); overflow: hidden; }
.list-item { padding: 10px 16px; border-bottom: 1px solid var(--tg-border); }
.list-item label { color: var(--tg-accent); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; margin-bottom: 4px; display: block; }
input, textarea { background: transparent; border: none; color: #fff; font-size: 0.95rem; width: 100%; outline: none; }
.btn-unlock { background: var(--tg-accent); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-transform: uppercase; }

/* Modals */
.modal { position: absolute; bottom: 56px; left: 0; right: 0; background: var(--tg-header-bg); border-top: 1px solid var(--tg-border); display: none; z-index: 1000; box-shadow: 0 -10px 30px rgba(0,0,0,0.5); }
.modal-header { padding: 10px 16px; border-bottom: 1px solid var(--tg-border); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; font-weight: 700; color: var(--tg-text-muted); text-transform: uppercase; }
.emoji-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; }