/* ========== CSS หลัก ========== */
body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background-color: #0c0e17;
    color: #f1f3f5;
    margin: 0;
    padding: 12px;
    display: flex;
    justify-content: center;
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    touch-action: auto;
    overscroll-behavior: none;
}
.container {
    width: 100%;
    max-width: 800px;
    background: #131622;
    padding: 14px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #22273a;
    box-sizing: border-box;
}
h2 {
    text-align: center;
    color: #ffffff;
    margin-top: 4px;
    margin-bottom: 18px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.5px;
}
.tab-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    background: #1a1f30;
    border-radius: 16px;
    padding: 4px;
    border: 1px solid #2a314a;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #7e86a0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.tab-btn:hover { color: #cbd5e1; background: rgba(255,255,255,0.03); }
.tab-btn.active { background: #2563eb; color: #ffffff; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.input-group { display: flex; gap: 10px; margin-bottom: 18px; }
.input-group input { flex:1; padding:12px 16px; border-radius:14px; border:2px solid transparent; background:#0b0e16; color:#f1f5f9; font-size:15px; font-weight:500; text-transform:uppercase; transition:all 0.3s ease; box-shadow:0 0 0 1px #2a314a; }
.input-group input::placeholder { color:#4a5270; text-transform:none; }
.input-group input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.25); background:#0f1320; }
.input-group button { padding:12px 20px; border-radius:14px; border:none; background:linear-gradient(135deg,#3b82f6 0%,#2563eb 50%,#1d4ed8 100%); color:white; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.3s ease; box-shadow:0 0 20px rgba(59,130,246,0.15); }
.input-group button:hover { transform:translateY(-1px); box-shadow:0 4px 24px rgba(59,130,246,0.3); }
.auto-refresh-bar { display:flex; align-items:center; justify-content:flex-end; margin-bottom:16px; }
.timestamp { font-size:11px; color:#94a3b8; }
.ema-settings { background:linear-gradient(145deg,#171b2a,#131622); border-radius:20px; padding:16px 18px; margin-bottom:18px; border:1px solid #2a314a; }
.ema-settings-title { font-size:12px; font-weight:600; color:#a0a8c0; margin-bottom:14px; text-align:center; letter-spacing:0.8px; text-transform:uppercase; }
.ema-input-group { display:flex; align-items:center; gap:12px; margin-bottom:10px; background:rgba(255,255,255,0.02); padding:8px 14px; border-radius:12px; border:1px solid transparent; transition:all 0.3s ease; }
.ema-input-group:hover { border-color:#2a314a; }
.ema-input-group:focus-within { border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,0.1); }
.ema-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:0 0 8px rgba(255,255,255,0.05); }
.ema-dot-1 { background:linear-gradient(135deg,#e67e22,#f39c12); }
.ema-dot-2 { background:linear-gradient(135deg,#f1c40f,#f7dc6f); }
.ema-dot-3 { background:linear-gradient(135deg,#9b59b6,#af7ac5); }
.ema-input-group label { font-size:13px; font-weight:500; color:#ccd6f0; min-width:50px; }
.ema-input-group input { width:80px; padding:6px 10px; border-radius:10px; background:#090b11; border:1px solid #2a314a; color:white; text-align:center; font-size:14px; font-weight:600; margin-left:auto; transition:all 0.3s ease; }
.ema-input-group input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,0.2); }
.apply-ema-btn { background:linear-gradient(135deg,#2d3748,#1a1f30); width:100%; padding:10px; border-radius:14px; border:1px solid #2a314a; font-size:13px; font-weight:600; color:#cbd5e1; margin-top:6px; transition:all 0.3s ease; cursor:pointer; }
.apply-ema-btn:hover { background:linear-gradient(135deg,#3b4a5f,#2d3748); border-color:#3b82f6; color:#fff; transform:translateY(-1px); }
.webull-chart-card { background:#171b2a; border-radius:20px; padding:6px; margin-bottom:18px; border:1px solid #2a314a; }
.webull-stock-header { background:#1e2337; border-radius:16px; padding:12px; margin-bottom:12px; border:1px solid #2a314a; }
.header-main-row { display:flex; align-items:baseline; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.webull-ticker { font-size:20px; font-weight:700; color:#fff; }
.webull-live-price { font-size:24px; font-weight:700; color:#fff; }
.webull-change { font-size:13px; font-weight:600; }
.ext-hours-row { display:flex; align-items:center; gap:8px; font-size:11px; background:rgba(255,255,255,0.04); padding:5px 10px; border-radius:10px; margin-bottom:8px; }
.header-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:11px; font-weight:500; color:#94a3b8; border-top:1px solid #2a314a; padding-top:8px; }
.header-stats-grid span { font-weight:600; color:#f1f5f9; margin-left:4px; }
.c-up { color:#00bfa6 !important; }
.c-down { color:#ff4a5a !important; }
.chart-container { width:100%; background:#171b2a; margin-bottom:12px; min-height:500px; position:relative; border-radius:14px; overflow:hidden; touch-action:auto; }
#tradingviewContainer { width:100%; height:500px; position:relative; overflow:hidden; border-radius:14px; }
#tradingviewWidget { position:absolute; top:0; left:0; width:100%; height:100%; border:none; background:#131622; }
@media (max-width:600px) { .chart-container { min-height:400px; } #tradingviewContainer { height:400px; } }
.market-status { display:flex; justify-content:space-around; gap:8px; padding:10px 12px; background:rgba(255,255,255,0.02); border-radius:14px; margin:4px 0 12px 0; border:1px solid #2a314a; flex-wrap:wrap; }
.status-item { display:flex; align-items:center; gap:8px; font-size:12px; }
.status-label { color:#94a3b8; font-weight:500; }
.status-value { font-weight:700; padding:2px 10px; border-radius:20px; font-size:12px; }
.status-value.bullish { background:rgba(34,197,94,0.15); color:#4ade80; }
.status-value.bearish { background:rgba(239,68,68,0.15); color:#f87171; }
.status-value.neutral { background:rgba(234,179,8,0.10); color:#facc15; }
.status-value.overbought { background:rgba(239,68,68,0.15); color:#f87171; }
.status-value.oversold { background:rgba(34,197,94,0.15); color:#4ade80; }
.status-value.near-support { background:rgba(34,197,94,0.15); color:#4ade80; }
.status-value.near-resistance { background:rgba(239,68,68,0.15); color:#f87171; }
.status-value.mid-range { background:rgba(234,179,8,0.10); color:#facc15; }
.chart-indicator-header { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.03); padding:8px 14px; border-radius:20px; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.ind-label { font-size:11px; font-weight:600; background:#3b82f620; padding:4px 12px; border-radius:24px; color:#3b82f6; }
.c-ema20, .c-ema50, .c-ema200 { display:inline-flex; align-items:baseline; gap:6px; font-weight:500; font-size:12px; background:#0f1222; padding:4px 14px; border-radius:28px; }
.c-ema20 span, .c-ema50 span, .c-ema200 span { font-size:13px; font-weight:700; margin-left:3px; color:#fff; }
.timeframe-selector { display:flex; justify-content:space-between; padding-top:8px; border-top:1px solid #2a314a; margin-top:6px; gap:4px; }
.tf-btn { background:transparent; border:none; color:#7e86a0; font-size:11px; font-weight:600; padding:5px 8px; border-radius:20px; cursor:pointer; flex:1; text-align:center; }
.tf-btn.active { background:rgba(59,130,246,0.2); color:#3b82f6; }
.section-title { font-size:12px; color:#8e96ae; margin:18px 0 8px 2px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.level { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; margin:6px 0; border-radius:14px; }
.level-name { font-size:12px; font-weight:500; }
.price-value { font-size:13px; font-weight:700; }
.resistance { background:rgba(239,68,68,0.08); color:#f87171; border-left:3px solid #ef4444; }
.pivot { background:rgba(245,158,11,0.08); color:#fbbf24; border-left:3px solid #f59e0b; }
.support { background:rgba(34,197,94,0.08); color:#4ade80; border-left:3px solid #22c55e; }
.dca-status-card { background:#161926; padding:14px; border-radius:18px; border:1px solid #252b3f; display:flex; flex-direction:column; gap:8px; }
.dca-badge { align-self:flex-start; padding:4px 14px; border-radius:30px; font-size:12px; font-weight:600; }
.bg-good-dca { background:rgba(34,197,94,0.12); color:#4ade80; border:1px solid rgba(34,197,94,0.25); }
.bg-normal-dca { background:rgba(234,179,8,0.12); color:#facc15; border:1px solid rgba(234,179,8,0.25); }
.bg-risk-dca { background:rgba(239,68,68,0.12); color:#f87171; border:1px solid rgba(239,68,68,0.25); }
.dca-desc { font-size:11px; color:#a0a8c0; line-height:1.4; }
.long-dca-zone { margin-top:6px; padding:10px; background:rgba(56,189,248,0.05); border:1px solid rgba(56,189,248,0.15); border-radius:14px; }
.long-dca-title { font-size:11px; color:#38bdf8; font-weight:600; }
.long-dca-value { font-size:16px; color:#fff; font-weight:700; margin-top:4px; }
.long-dca-tip { font-size:10px; color:#6c748c; margin-top:4px; }
.ema-pro-card { background:#151824; border:1px solid #262c40; border-radius:18px; margin-bottom:12px; padding:12px; }
.ema-pro-header { font-size:12px; font-weight:600; padding:4px 12px; border-radius:24px; display:inline-block; margin-bottom:10px; background:#1c2135; }
.badge-20 { color:#e67e22; border:1px solid rgba(230,126,34,0.2); }
.badge-50 { color:#f1c40f; border:1px solid rgba(241,196,15,0.2); }
.badge-200 { color:#9b59b6; border:1px solid rgba(155,89,182,0.2); }
.ema-pro-core { font-size:12px; color:#a0a8c0; font-weight:500; margin-bottom:10px; }
.exact-p { color:#fff; font-size:14px; font-weight:700; margin-left:6px; }
.ema-pro-action { display:flex; gap:12px; margin-top:6px; }
.act-box { flex:1; padding:8px; border-radius:14px; display:flex; flex-direction:column; gap:4px; background:rgba(255,255,255,0.02); }
.act-label { font-size:10px; color:#8e96ae; }
.act-box.buy strong { color:#4ade80; font-size:14px; font-weight:700; }
.act-box.sell strong { color:#f87171; font-size:14px; font-weight:700; }
.loading { text-align:center; color:#94a3b8; display:block; margin:24px 0; font-size:13px; font-weight:500; }
.fav-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.fav-star-btn { background:transparent; border:1px solid #2a314a; border-radius:40px; width:36px; height:36px; font-size:22px; padding:0; line-height:1; color:#facc15; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.fav-star-btn:hover { background:#1e243b; border-color:#facc15; transform:scale(1.02); }
.favorites-list { display:flex; flex-wrap:wrap; gap:8px; flex:1; align-items:center; }
.fav-item { background:#1c2135; border-radius:28px; padding:4px 12px 4px 14px; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; border:1px solid #2a314a; }
.fav-ticker { cursor:pointer; color:#fff; font-weight:600; }
.fav-ticker:hover { color:#3b82f6; text-decoration:underline; }
.fav-remove { cursor:pointer; color:#8e96ae; font-weight:bold; font-size:14px; }
.fav-remove:hover { color:#ff4a5a; }
.news-section { background:#171b2a; border-radius:20px; padding:6px; margin-bottom:18px; border:1px solid #2a314a; }
.news-header-title { font-size:14px; font-weight:600; padding:10px 12px 4px; color:#a0a8c0; display:flex; align-items:center; justify-content:space-between; }
.news-container { display:flex; flex-direction:column; gap:12px; padding:8px; }
.news-item { background:#1e2337; border-radius:16px; padding:12px; text-decoration:none; color:inherit; transition:0.2s; border:1px solid #2a314a; display:block; }
.news-item:hover { background:#252b42; transform:translateX(4px); }
.news-header { display:flex; justify-content:space-between; margin-bottom:6px; font-size:11px; color:#8e96ae; }
.news-source { font-weight:600; color:#3b82f6; }
.news-date { font-size:10px; }
.news-headline { font-size:13px; font-weight:600; margin-bottom:6px; color:#f1f5f9; line-height:1.4; }
.news-summary { font-size:12px; color:#94a3b8; line-height:1.4; }
.translate-news-btn { background:#2d3748; border:none; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600; color:#cbd5e1; cursor:pointer; transition:0.2s; }
.translate-news-btn:hover { background:#3b4a5f; }
.heatmap-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#171b2a; border-radius:14px; border:1px solid #2a314a; margin-bottom:12px; flex-wrap:wrap; gap:6px; }
.heatmap-header h3 { margin:0; font-size:14px; color:#f1f5f9; }
.refresh-heatmap-btn { background:#2d3748; border:none; padding:4px 12px; border-radius:16px; font-size:11px; font-weight:600; color:#cbd5e1; cursor:pointer; transition:0.2s; }
.refresh-heatmap-btn:hover { background:#3b4a5f; }
#heatmapChartContainer { height:85vh; width:100%; border-radius:12px; overflow:hidden; border:1px solid #2a314a; background:#131622; padding:4px; display:flex; align-items:center; justify-content:center; flex-direction:column; }

/* ===== Alert ===== */
.alert-item { background:#1e2337; border-radius:20px; padding:6px 14px 6px 12px; display:inline-flex; align-items:center; gap:8px; border:1px solid #2a314a; font-size:12px; }
.alert-item .ticker { font-weight:700; color:#fff; }
.alert-item .cond { color:#94a3b8; }
.alert-item .price { font-weight:600; color:#3b82f6; }
.alert-remove { cursor:pointer; color:#f87171; font-weight:bold; font-size:14px; margin-left:4px; }

/* ===== Signal Cards ===== */
.signal-card { background:#1e2337; border-radius:14px; padding:14px 16px; border-left:4px solid #3b82f6; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; border:1px solid #2a314a; border-left-width:4px; }
.signal-card .info { display:flex; flex-direction:column; gap:2px; }
.signal-card .ticker { font-size:16px; font-weight:700; color:#fff; }
.signal-card .detail { font-size:11px; color:#94a3b8; }
.signal-card .signal-badge { padding:4px 14px; border-radius:20px; font-size:13px; font-weight:700; }
.signal-buy { background:rgba(34,197,94,0.15); color:#4ade80; border:1px solid rgba(34,197,94,0.25); }
.signal-sell { background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.25); }
.signal-strong-buy { background:rgba(34,197,94,0.25); color:#4ade80; border:1px solid #4ade80; }
.signal-strong-sell { background:rgba(239,68,68,0.25); color:#f87171; border:1px solid #f87171; }
.signal-neutral { background:rgba(234,179,8,0.10); color:#facc15; border:1px solid rgba(234,179,8,0.25); }

/* ===== Notification Permission Button ===== */
#requestNotifBtn {
    transition: all 0.2s ease;
}
#requestNotifBtn:hover {
    background: #3b4a5f;
    transform: scale(1.02);
}
#notifStatus {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: #1a1f30;
}
/* ===== Scanner & AI Chat ===== */
.scanner-filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #2a314a;
    background: #1a1f30;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.scanner-filter-btn.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    border-color: transparent;
}
.scanner-card {
    background: #1a1f30;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid #22273a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;
}
.scanner-card:hover { border-color: #3b82f6; }
.scanner-card .ticker { font-size: 16px; font-weight: 700; color: #f1f5f9; }
.scanner-card .reason { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.scanner-card .score { font-size: 20px; font-weight: 800; color: #4ade80; }

.ai-quick-btn {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #2a314a;
    background: #1a1f30;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ai-quick-btn:hover {
    background: #2563eb;
    color: #fff;
    border-color: transparent;
}
.ai-msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.5;
}
.ai-msg-bot {
    align-self: flex-start;
    background: #1a1f30;
    color: #e2e8f0;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    max-width: 90%;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid #22273a;
}
.ai-msg-bot strong { color: #60a5fa; }
.ai-thinking {
    align-self: flex-start;
    color: #64748b;
    font-size: 12px;
    padding: 8px 14px;
    background: #1a1f30;
    border-radius: 12px;
    border: 1px solid #22273a;
}

/* ===== AI Analysis Box ===== */
#aiStockAnalysisBox {
    animation: fadeIn 0.4s ease;
}
#aiScanSummary {
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ai-msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    padding: 10px 14px;
    border-radius: 14px 14px 4px 14px;
    max-width: 80%;
    font-size: 13px;
    line-height: 1.5;
}
.ai-msg-bot {
    align-self: flex-start;
    background: #1e2337;
    color: #e2e8f0;
    padding: 10px 14px;
    border-radius: 14px 14px 14px 4px;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid #2a314a;
}
.ai-thinking {
    align-self: flex-start;
    color: #64748b;
    font-size: 12px;
    padding: 6px 10px;
    animation: pulse 1.2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.ai-quick-btn {
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid #2a314a;
    background: #1a1f30;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
.ai-quick-btn:hover {
    background: #2a314a;
    color: #f1f5f9;
}