/* PIXEL TRADING FLOOR 데모 버전 — 실제 버전 전용 UI 숨김 + 리본 + 차트 크기 + 무료 분석 끝 안내 (build.js가 hq.css 뒤에 붙인다) */
#auto-chip, #auto-btn, #pt-btn, #rec-btn, #stats-btn, #replay-btn,
#watcher-toggle, #watcher-stat, #mode-attack, #venue-board, #alerts-panel, #dp-card-btn,
#lev-select { display: none !important; } /* 배율은 50배 고정(선택 상자는 표시하지 않음 — 대표 요청 2026-10-07) */
/* 모드는 하나(⚡스캘핑 — 대표 결정 2026-10-12 알고리즘·스캘핑 합침): 알고리즘 칩은 늘 숨기고 남은 칩 하나가 모드 표시 */
#mode-algo { display: none !important; }

/* 모의 매매가 없는 빌드(html.no-paper — site.json paper_trading:false, 대표 결정 2026-10-12 · 모바일 앱 개인 코드 사무실 m/):
   잔고판·가상 포지션 칸·청산 버튼·매매 내역·계좌 초기화를 만들지도 보이지도 않는다(중계 html.relay는 실계좌 포지션 칸을 그대로 쓴다) */
html.no-paper #pnl-board, html.no-paper .pos-close, html.no-paper #lite-hist-btn, html.no-paper #lite-reset { display: none !important; }
html.no-paper:not(.relay) #positions-panel { display: none !important; }

#lite-ribbon { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 10px; letter-spacing: .5px; }
#lite-ribbon b { background: #e8c84a; color: #1a1408; padding: 2px 6px; border: 2px solid #000; box-shadow: 2px 2px 0 #000; }
#lite-ribbon .why { color: #9a9ab4; }
/* 휴대폰: 레일이 옆으로 밀리니 데모 버전 표시·남은 횟수·자료실 링크가 워치리스트보다 먼저 보이게 */
html.m #lite-ribbon { order: -1; flex: none; }
#lite-ribbon em { font-style: normal; color: #7ee2a0; background: #0f2a1a; padding: 2px 6px; border: 2px solid #000; box-shadow: 2px 2px 0 #000; }
#lite-ribbon em.out { color: #1a1408; background: #e8c84a; }
#lite-ribbon a, #lite-ribbon button {
  font: inherit; font-size: 10px; letter-spacing: .5px; color: #cfcfe0; background: #16162a;
  border: 2px solid #000; box-shadow: 2px 2px 0 #000; padding: 3px 8px; text-decoration: none; cursor: pointer;
}
#lite-ribbon a:hover, #lite-ribbon button:hover { background: #e8c84a; color: #1a1408; }
#lite-ribbon a.full { background: #1f8f5a; color: #fff; }
html.m #lite-ribbon .why { display: none; }
html.m #lite-ribbon a, html.m #lite-ribbon button, html.m #lite-ribbon em { padding: 2px 6px; flex: none; }
html.kiosk #lite-ribbon { display: none; }

/* 첫 분석 전에는 ANALYZE가 깜빡이며 부른다 · 무료 분석을 다 쓰면 ANALYZE는 안내 창을 연다 */
html.lite-first #analyze-btn:not(:disabled) { animation: lite-call 1s steps(2) infinite; }
@keyframes lite-call { 50% { box-shadow: 3px 3px 0 #000, 0 0 0 3px #e8c84a; } }
html.lite-out #analyze-btn { background: #e8c84a; color: #1a1408; animation: none; }

/* 상단 차트 — 진입·목표·손절·현재가 표시가 들어가게 키운다 (범례는 차트 안에 그린다) */
#chart-legend { display: none; }
html:not(.m) #chart { height: clamp(104px, 15vh, 150px); }
/* 휴대폰: 시세 한 줄 아래에 차트를 화면 폭 그대로 */
html.m #board { flex-wrap: wrap; row-gap: 4px; }
html.m #board-info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
html.m #board-price { font-size: 17px; }
html.m #chart-wrap { flex: 1 1 100%; }
html.m #chart { height: 92px !important; }

/* 매매 내역 창 */
#lite-hist { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 4, 10, .72); }
#lite-hist.hidden { display: none; }
#lite-hist .lh-box {
  position: relative; width: min(560px, 100%); max-height: min(560px, 90vh); display: flex; flex-direction: column; padding: 18px 18px 14px;
  background: #12121f; color: #f2f2f8; border: 3px solid #000; box-shadow: 6px 6px 0 #000, inset 0 0 0 2px #2c2c48; animation: ll-in .25s steps(4);
}
#lite-hist .ll-x { position: absolute; top: 8px; right: 8px; font: inherit; color: #9a9ab4; background: none; border: 0; cursor: pointer; font-size: 14px; }
#lite-hist h2 { margin: 0 0 8px; font-size: 16px; font-weight: normal; color: #fff8e0; text-shadow: 2px 2px 0 #000; }
#lite-hist .lh-sum { margin: 0 0 10px; font-size: 11px; line-height: 1.7; color: #cfcfe0; }
#lite-hist .lh-sum small { display: block; color: #9a9ab4; font-size: 10px; }
#lite-hist .lh-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; border: 2px solid #000; background: #0a0a14; }
#lite-hist .lh-list li { display: grid; grid-template-columns: 78px 1fr auto; gap: 4px 10px; align-items: baseline; padding: 6px 10px; font-size: 11px; border-bottom: 1px solid #1c1c30; }
#lite-hist .lh-list li > span:nth-child(3) { grid-column: 1 / 3; color: #9a9ab4; }
#lite-hist .lh-list li em { grid-row: 1 / 3; grid-column: 3; font-style: normal; text-align: right; white-space: nowrap; }
#lite-hist .lh-list li.lh-open { background: #14142a; }
#lite-hist .lh-list li.lh-empty { display: block; color: #9a9ab4; padding: 16px 10px; }
#lite-hist .up { color: #3fb950; }
#lite-hist .down { color: #f85149; }
#lite-hist .ll-close { margin-top: 10px; align-self: center; font: inherit; font-size: 11px; color: #9a9ab4; background: none; border: 0; cursor: pointer; text-decoration: underline; }
#lite-ribbon button#lite-hist-btn { background: #1f4f8f; color: #fff; }

/* 첫 방문 안내 — 모드 고르기 → ▶ ANALYZE (브라우저마다 한 번) */
#lite-tour {
  position: fixed; z-index: 99990; width: min(340px, calc(100vw - 16px)); padding: 12px 14px 10px;
  background: #12121f; color: #f2f2f8; border: 3px solid #000; box-shadow: 5px 5px 0 #000, inset 0 0 0 2px #e8c84a;
  font-size: 11px; line-height: 1.7; animation: ll-in .25s steps(4);
}
#lite-tour.hidden { display: none; }
#lite-tour .lt-step { display: inline-block; margin-bottom: 8px; font-size: 10px; letter-spacing: 1.5px; color: #1a1408; background: #e8c84a; padding: 2px 7px; border: 2px solid #000; box-shadow: 2px 2px 0 #000; }
#lite-tour p { margin: 0 0 6px; color: #cfcfe0; }
#lite-tour p b { color: #fff8e0; font-weight: normal; }
#lite-tour p em { font-style: normal; color: #e8c84a; }
#lite-tour .lt-big { font-size: 14px; color: #fff8e0; animation: lite-tour-blink 1s steps(2) infinite; }
#lite-tour .lt-big b { color: #e8c84a; }
#lite-tour .lt-note { font-size: 10px; color: #9a9ab4; }
#lite-tour .lt-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#lite-tour button { font: inherit; font-size: 11px; cursor: pointer; padding: 4px 10px; color: #cfcfe0; background: #16162a; border: 2px solid #000; box-shadow: 2px 2px 0 #000; }
#lite-tour button.lt-next { color: #1a1408; background: #e8c84a; }
#lite-tour button:active { transform: translate(2px, 2px); box-shadow: none; }
#lite-tour .lt-arrow { position: absolute; width: 12px; height: 12px; background: #12121f; border: 3px solid #000; transform: rotate(45deg); }
#lite-tour[data-at="below"] .lt-arrow { top: -9px; border-right: 0; border-bottom: 0; }
#lite-tour[data-at="above"] .lt-arrow { bottom: -9px; border-left: 0; border-top: 0; }
.lite-tour-on { outline: 3px solid #e8c84a !important; outline-offset: 3px; }
#mode-toggle.lite-tour-on { animation: lite-tour-blink 1s steps(2) infinite; }
@keyframes lite-tour-blink { 50% { outline-color: transparent; opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
  #lite-tour, #lite-tour .lt-big, #mode-toggle.lite-tour-on, html.lite-first #analyze-btn:not(:disabled) { animation: none; }
}

/* 무료 분석 끝 안내 */
#lite-limit { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 4, 10, .72); }
#lite-limit.hidden { display: none; }
#lite-limit .ll-box {
  position: relative; width: min(460px, 100%); padding: 22px 22px 18px; background: #12121f; color: #f2f2f8;
  border: 3px solid #000; box-shadow: 6px 6px 0 #000, inset 0 0 0 2px #2c2c48; text-align: center; animation: ll-in .25s steps(4);
}
@keyframes ll-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
#lite-limit .ll-x { position: absolute; top: 8px; right: 8px; font: inherit; color: #9a9ab4; background: none; border: 0; cursor: pointer; font-size: 14px; }
#lite-limit .ll-badge { display: inline-block; font-size: 10px; letter-spacing: 2px; color: #1a1408; background: #e8c84a; padding: 3px 8px; border: 2px solid #000; box-shadow: 2px 2px 0 #000; }
#lite-limit h2 { margin: 14px 0 12px; font-size: 18px; font-weight: normal; color: #fff8e0; text-shadow: 2px 2px 0 #000; }
#lite-limit h2.ll-cta-title { font-size: 13px; line-height: 1.7; word-break: keep-all; }
#lite-limit .ll-score { display: grid; gap: 4px; margin: 0 auto 14px; padding: 10px 12px; background: #0a0a14; border: 2px solid #000; box-shadow: inset 0 0 0 2px #22223a; }
#lite-limit .ll-score span { font-size: 10px; color: #9a9ab4; letter-spacing: 1px; }
#lite-limit .ll-score b { font-size: 16px; font-weight: normal; }
#lite-limit .ll-score em { font-style: normal; font-size: 14px; color: #cfcfe0; }
#lite-limit .ll-score em.up { color: #3fb950; }
#lite-limit .ll-score em.down { color: #f85149; }
#lite-limit .ll-score small { font-size: 10px; color: #9a9ab4; }
#lite-limit p { margin: 0 0 16px; font-size: 12px; line-height: 1.7; color: #cfcfe0; }
#lite-limit .ll-go {
  display: block; padding: 12px 10px; font-size: 14px; color: #fff; text-decoration: none; background: #1f8fd0;
  border: 3px solid #000; box-shadow: 4px 4px 0 #000;
}
#lite-limit .ll-go:hover { filter: brightness(1.12); }
#lite-limit .ll-go:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
/* 실제 버전 전용 기능 안내(full_only) — 긴 문구 한 단락 + 버튼 0~3개 */
#lite-limit .ll-full-msg { margin: 14px 0 16px; font-size: 13px; line-height: 1.75; color: #fff8e0; word-break: keep-all; text-align: left; }
#lite-limit .ll-go + .ll-go { margin-top: 10px; }
/* 무료 분석 끝 안내 속 full_only 문구 — 신청 버튼 아래 점선으로 나눈다 */
#lite-limit .ll-full-note { margin: 18px 0 12px; padding-top: 14px; border-top: 2px dashed #2c2c48; font-size: 12px; color: #cfcfe0; }
/* 긴 안내(체험 끝 + full_only)가 낮은 화면을 넘으면 창 안에서 스크롤 */
#lite-limit .ll-box { box-sizing: border-box; max-height: 100%; overflow-y: auto; }
#lite-limit .ll-close { margin-top: 12px; font: inherit; font-size: 11px; color: #9a9ab4; background: none; border: 0; cursor: pointer; text-decoration: underline; }

/* ?shell=1 — 모바일 앱(ptf-mobile) 안 사무실 탭. 앱의 맨 위 띠가 이름을 대신 보여 주므로 로고 줄을 숨기고,
   한 화면에 눌러 담는 대신 위에서 아래로 쌓아 스크롤한다(낮은 화면에서 잔고판이 자막·판정을 덮던 문제).
   사무실 칸(#floor)은 방 위치가 %라서 높이를 정해 둔다 */
html.shell #logo { display: none; }
html.m.shell #whip-chip { margin-left: auto; }
/* 앱 안 셸 사무실(공용판·담당자판)은 채찍을 쓰지 않는다(2026-10-08 대표 요청) — 레일 버튼·휴대폰 칩 모두 숨김 */
html.shell #whip-btn, html.shell #whip-chip { display: none !important; }
html.m.shell, html.m.shell body { height: auto; overflow-x: hidden; overflow-y: auto; }
html.m.shell #app { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
html.m.shell #stage { flex: 1 0 auto; overflow: visible; }
html.m.shell #floor { flex: 1 0 auto; height: clamp(260px, 78vw, 380px); min-height: 0; }
html.m.shell #pnl-board { margin-bottom: 4px; }

/* ---- 중계 모드(html.relay — ?shell=1&relay=1, 모바일 앱 담당자판 사무실) — 읽기 전용 (ptf-mobile 설계 3-2 §4.4) ----
   자동 운영 칩·워치리스트 레일·포지션 청산 버튼·잔고판 내용을 숨긴다. 분석 다시 보기(html.lite-analysis — p34 설계 §4.2·p37 D3)면
   데모와 같은 #controls(입력칸·모드 칩·▶ ANALYZE)·판정 줄(#m-verdict)이 보인다(배율 #lev-select는 위에서 늘 숨김). 분석 다시 보기가 없는 중계는 지금처럼 숨김 */
html.relay #auto-chip, html.relay #v2-rail, html.relay .pos-close { display: none !important; }
html.relay:not(.lite-analysis) #controls, html.relay:not(.lite-analysis) #m-verdict { display: none !important; }
html.relay:not(.lite-analysis) #symbol-input, html.relay:not(.lite-analysis) #mode-toggle { display: none !important; }
html.relay #pnl-board { display: none !important; }

/* ---- p37 D5 암호화폐 | 주식 스위치(#lite-class — 전광판 머리 줄 MARKET 배지 오른쪽) + 종목 칩 줄(#lite-syms) — 모든 셸 사무실(symbols.js) ----
   칩은 차트·입력칸 선택기(누르면 진입·분석 없이 그 종목 차트 + 입력칸에 이름). 자리가 모자라면 스위치만 다음 줄 오른쪽으로(가로 스크롤 없음) */
html.m #board-info { flex: 1 1 100%; min-width: 0; }
#lite-class { display: inline-flex; flex: none; margin-left: auto; align-self: center; border: 2px solid #000; box-shadow: 2px 2px 0 #000; }
#lite-class .lc-opt { font: inherit; font-size: 10px; line-height: 1.3; padding: 2px 7px; color: #cfcfe0; background: #14142a; border: 0; cursor: pointer; white-space: nowrap; }
#lite-class .lc-opt[aria-checked="true"] { color: #0a0a14; background: #e8c84a; }
#lite-class .lc-opt + .lc-opt { border-left: 2px solid #000; }
#lite-syms { display: flex; flex: 1 1 100%; min-width: 0; gap: 6px; overflow-x: auto; padding: 6px 8px; background: #0a0a14; scrollbar-width: none; }
#lite-syms::-webkit-scrollbar { display: none; }
#lite-syms .ls-chip { flex: none; font: inherit; font-size: 11px; color: #cfcfe0; background: #14142a; border: 1px solid #2a2a3a; padding: 4px 10px; cursor: pointer; }
#lite-syms .ls-chip[aria-pressed="true"] { color: #0a0a14; background: #e8c84a; border-color: #e8c84a; }
#lite-syms .ls-chip[hidden] { display: none; }
#lite-class.busy, #lite-syms.busy { opacity: .5; pointer-events: none; }
/* R2 — 셸 사무실에서는 레일의 옛 워치리스트 칩(누르면 바로 분석·무료 횟수 소모)을 숨긴다. 소개 사이트 데모(셸 아님)는 그대로 */
html.shell #watchlist-chips { display: none !important; }
/* 좌석: ui.js가 스캘핑 좌석(setMode·applyModeDim 'scalp')으로 바꾸지만, 알고리즘 좌석이 남아도 GUARD 자리(손절·청산·조정 말풍선)는 보이게 */
html.relay body.mode-algo #desk-guard { display: flex !important; }
/* 매매 논평처럼 읽히는 데모 잡담(stage.js "트리거 전까진 관망" 등)·채찍 칩은 실계좌 중계 화면에서 숨긴다 */
html.relay .small-talk, html.relay #whip-chip { display: none !important; }
/* 휴대폰 배치(html.m — 셸 사무실은 늘 ?vertical=1)는 public/hq.css가 말풍선을 전부 숨기고 자막만 쓴다. 중계 화면은 매매 말풍선이
   본문이라(O-08) 보이게 둔다 — 손절·청산(GUARD) 말풍선도 진입·익절(ACE)과 똑같이 화면에 보여야 한다 */
html.relay .bubble.show { display: block !important; }
/* ---- p37 D1 "그냥 덮게" — 휴대폰 중계 사무실에서 말풍선이 방 팻말(◆ 애널리스트 팀 ◆ 등, z 8)·다른 책상 위에 (R10) ----
   public/style.css: .room-body { z-index: 1 }이 쌓임 맥락이라 말풍선(z 5)이 그 안에 갇혀 팻말(.room-body의 형제, z 8)에 늘 졌다.
   맥락을 풀어 책상이 팻말과 같은 판에서 겨루게 하고, 말풍선이 보이는 책상(.talking — bubbles.js)째 위로, 가장 최근에 말한 책상(.top)이 맨 위.
   흐림(opacity)도 맥락을 만들어 말풍선을 흐리고 가두므로 방·책상 자체는 흐리지 않고 안쪽 그림만 흐린다 */
html.m.relay .room-body { z-index: auto; }
html.m.relay .desk.talking { z-index: 9; }
html.m.relay .desk.talking.top { z-index: 10; }
html.m.relay .room.idle { opacity: 1; filter: none; }
html.m.relay .room.idle .sprite, html.m.relay .room.idle .nametag, html.m.relay .room.idle .room-label { opacity: .45; filter: saturate(.4); }
html.m.relay .desk.idle { opacity: 1; filter: none; }
html.m.relay .desk.idle > :not(.bubble) { opacity: .35; filter: saturate(.3); }
/* 말풍선 상자 — 폭 최대 150px(글 길이만큼)·글자 10px·최대 3줄, 넘치면 '…'와 오른쪽 아래 '›'(누르면 전체 글 — app.js 모달) */
html.m.relay .bubble.show {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  width: max-content; min-width: 0; max-width: 150px; max-height: none; padding: 3px 12px 3px 6px; font-size: 10px; line-height: 1.35; text-align: left;
  word-break: keep-all; overflow-wrap: anywhere;
}
html.m.relay .bubble.show[data-report]:not(.rec)::before { content: '›'; position: absolute; right: 3px; bottom: 1px; font-size: 10px; color: #6a6a80; }
html.m.relay .bubble .dots { font-size: 12px; }
/* 실계좌 기록 말풍선 표시(O-48) — 자리(ACE·GUARD)가 아니라 글로 구분. ::after는 꼬리(public/style.css)라 ::before.
   기록 말풍선은 전체 글 = 말풍선 글이라 '›'가 필요 없다 */
html.relay .bubble.show.rec::before {
  content: '실계좌'; display: inline-block; position: static; margin-right: 4px; padding: 0 3px;
  font-size: 9px; line-height: 1.3; color: #fff; background: #1f8f5a; border: 1px solid #000; vertical-align: 1px;
}
#lite-relay { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px; background: #0a0a14; border-bottom: 2px solid #000; font-size: 11px; line-height: 1.5; }
#lite-relay .lr-band { margin: 0; flex: 1 1 auto; color: #3fb950; }
#lite-relay .lr-band.delayed { color: #e8c84a; }
#lite-relay .lr-band.down { color: #f85149; }
#lite-relay .lr-hist { font: inherit; font-size: 10px; color: #cfcfe0; background: #14142a; border: 1px solid #2a2a3a; padding: 2px 8px; cursor: pointer; }
#lite-relay .lr-help { margin: 0; flex: 1 0 100%; color: #9a9ab4; font-size: 10px; }

/* ---- 분석 다시 보기(html.lite-analysis — 담당자판 사무실 m/, ptf-mobile p34 설계 §4.7) ----
   #controls 아래 안내 줄(최신 분석 시각·자동 운영·오래됨·연결 끊김)과 판정판 아래 고지(O-15·중계 O-18) */
#lite-analysis-line { flex: 1 1 100%; order: 4; display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; padding: 2px 0; font-size: 10px; line-height: 1.5; color: #9a9ab4; }
#lite-analysis-line .la-latest { color: #cfcfe0; }
#lite-analysis-line .la-stale { color: #e8c84a; }
#lite-analysis-line .la-down { color: #f85149; }
#lite-analysis-line .la-auto { color: #7ee2a0; }
#lite-analysis-note { padding: 4px 10px; background: #0a0a14; font-size: 10px; line-height: 1.55; color: #9a9ab4; }
#lite-analysis-note p { margin: 0; }
#lite-analysis-line[hidden], #lite-analysis-note[hidden] { display: none !important; }

/* ---- p37 D2 대화 기록창(#lite-talklog — talklog.js, 셸 사무실 html.m.shell만, R11) ----
   판정 줄·분석 고지 아래 한 줄 머리(접힘이 기본) → 펼치면 최대 200px 안에서 스크롤, 새것이 위. 아래 잔고판·시세 테이프는 기록창 아래로 밀린다 */
html:not(.shell) #lite-talklog, html:not(.m) #lite-talklog { display: none !important; }
#lite-talklog { flex: none; margin: 3px 8px 0; background: #0b0b14; border: 2px solid #000; font-size: 11px; min-width: 0; }
#lite-talklog-head {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; margin: 0; padding: 3px 7px; font: inherit; font-size: 11px; line-height: 1.4;
  color: #cfcfe0; background: transparent; border: 0; cursor: pointer; text-align: left; white-space: nowrap;
}
#lite-talklog-head .tl-title { flex: none; color: #e8c84a; letter-spacing: .5px; }
#lite-talklog-head .tl-count { flex: none; min-width: 14px; padding: 0 4px; font-size: 9px; text-align: center; color: #0a0a14; background: #9a9ab4; border: 1px solid #000; }
#lite-talklog-head .tl-last { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #9a9ab4; }
#lite-talklog-head .tl-arrow { flex: none; color: #9a9ab4; }
#lite-talklog-list { max-height: 200px; overflow-y: auto; margin: 0; padding: 0 4px 3px; list-style: none; border-top: 1px solid #1c1c28; scrollbar-width: thin; }
#lite-talklog-list[hidden] { display: none !important; }
#lite-talklog .tl-row { margin: 0; padding: 0; border-bottom: 1px solid #16162a; }
#lite-talklog .tl-line {
  display: flex; align-items: baseline; gap: 5px; width: 100%; min-width: 0; margin: 0; padding: 3px 2px; font: inherit; font-size: 11px; line-height: 1.4;
  color: #e6e6f0; background: transparent; border: 0; cursor: pointer; text-align: left;
}
#lite-talklog .tl-tag { flex: none; font-size: 9px; line-height: 1.3; padding: 0 4px; border: 1px solid #000; white-space: nowrap; }
#lite-talklog .tl-who { flex: none; font-weight: normal; color: #e8c84a; white-space: nowrap; }
#lite-talklog .tl-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lite-talklog .tl-row.open .tl-text { white-space: normal; overflow-wrap: anywhere; }
#lite-talklog .tl-at { flex: none; font-size: 9px; color: #6a6a80; }
#lite-talklog .tl-k-record .tl-tag { color: #fff; background: #1f8f5a; }
#lite-talklog .tl-k-analysis .tl-tag { color: #0a0a14; background: #e8c84a; }
#lite-talklog .tl-k-live .tl-tag { color: #fff; background: #2c8fb8; }
#lite-talklog .tl-k-demo .tl-tag { color: #e8c84a; background: #6b5a2a; }
#lite-talklog .tl-k-chatter .tl-tag { color: #9a9ab4; background: #2c2c3c; }
#lite-talklog .tl-k-system .tl-tag { color: #cfcfe0; background: #16162a; }
#lite-talklog .tl-k-chatter .tl-text { color: #9a9ab4; }