/* ============================================================
   FFXIV Chat Log Viewer — Stylesheet
   Dark FFXIV-themed UI
   ============================================================ */

/* ── FFXIV Game Fonts ─────────────────────────────────────── */
/* PUA icon glyphs (e.g. controller buttons, special symbols) */
@font-face {
  font-family: 'FFXIV';
  src: url(fonts/FFXIV_Lodestone_SSF.woff) format('woff'),
       url(fonts/FFXIV_Lodestone_SSF.ttf) format('truetype');
  unicode-range: U+e020-e0db;
}
/* AXIS Std — non-CJK range (Latin, Greek, Cyrillic, Kana, symbols) */
@font-face {
  font-family: 'AXISStd';
  src: url(fonts/axisstd-regular.otf) format('opentype');
  unicode-range:
    U+0020-007e, U+00a0-00ff, U+0152-0153, U+0160-0161, U+0178, U+0301, U+0306, U+0308, U+0338,
    U+0391-03a1, U+03a3-03a9, U+03b1-03c1, U+03c3-03c9,
    U+0401, U+0410-044f, U+0451,
    U+2010, U+2013-2015, U+2018-201a, U+201c-201e, U+2020-2022, U+2025-2026, U+2030,
    U+2032-2033, U+2039-203b, U+203e, U+2070-2071, U+2080-2089, U+20ac, U+2103, U+2109,
    U+2116, U+2121-2123, U+212b, U+2160-2169, U+2170-2179, U+2190-2193, U+21d2, U+21d4,
    U+2200, U+2202-2203, U+2207-2208, U+220b, U+2211, U+2219-221a, U+221d-2220, U+2225,
    U+2227-222c, U+222e, U+2234-2235, U+223d, U+2252, U+2260-2261, U+2264-2267, U+226a-226b,
    U+2282-2283, U+2286-2287, U+22a5, U+22bf, U+2312,
    U+2460-2490, U+249c-24b5, U+24ea,
    U+2500-2503, U+250c, U+250f-2510, U+2513-2514, U+2517-2518, U+251b-251d, U+2520,
    U+2523-2525, U+2528, U+252b-252c, U+252f-2530, U+2533-2534, U+2537-2538, U+253b-253c,
    U+253f, U+2542, U+254b, U+2571-2573,
    U+25a0-25a1, U+25b2-25b3, U+25bc-25bd, U+25c6-25c7, U+25cb, U+25ce-25cf, U+25ef,
    U+2600-2603, U+2605-2606, U+2640, U+2642, U+2660-2667, U+266a, U+266d, U+266f, U+2713,
    U+2776-277e,
    U+3000-3003, U+3005-3015, U+301c-301d, U+301f-3020,
    U+3041-3094, U+3099-309e, U+30a1-30f6, U+30fb-30fe,
    U+322a-3243, U+3291-3294, U+3296, U+3298-3299, U+329d-329e, U+32a4-32b0,
    U+ff01-ff9f, U+ffe0-ffe5;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-base:       #0d0e1a;
  --bg-panel:      #13152b;
  --bg-header:     #0a0b16;
  --bg-row:        #171930;
  --bg-row-alt:    #141628;
  --bg-row-hover:  #1e2240;
  --border:        #2a2e55;
  --accent:        #c8a84b;
  --accent-dim:    #7a6520;
  --accent-glow:   rgba(200,168,75,0.15);
  --text-primary:  #e8e4d4;
  --text-secondary:#9a97a8;
  --text-dim:      #5a5870;
  --scrollbar-bg:  #1a1c35;
  --scrollbar-thumb: #2e3260;
  --mark-bg:       rgba(200,168,75,0.35);
  --mark-text:     #ffe9a0;
  --drop-hover:    rgba(200,168,75,0.08);
  --font: 'Noto Sans TC', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;
  --font-ffxiv: 'FFXIV', 'AXISStd', 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  overflow: hidden;
}

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ── Layout ───────────────────────────────────────────────── */
#app {
  display: grid;
  grid-template-rows: 52px 1fr 32px;
  grid-template-columns: 280px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "status  status";
  height: 100vh;
}

/* ── Header ───────────────────────────────────────────────── */
#appHeader {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  user-select: none;
}

#appHeader .logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  white-space: nowrap;
  text-shadow: 0 0 12px var(--accent-dim);
}

#appHeader .logo span {
  color: var(--text-secondary);
  font-weight: 300;
  font-size: 14px;
  margin-left: 8px;
}

#headerActions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* ── Sidebar ──────────────────────────────────────────────── */
#sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.sidebar-section {
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}

.sidebar-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* Drop Zone */
#dropZone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}
#dropZone:hover, #dropZone.drag-over {
  border-color: var(--accent);
  background: var(--drop-hover);
}
#dropZone .drop-icon { font-size: 24px; line-height: 1; }
#dropZone .drop-label {
  font-size: 12px;
  color: var(--text-secondary);
}
#dropZone .drop-hint {
  font-size: 11px;
  color: var(--text-dim);
}

/* File List */
#fileList {
  list-style: none;
  max-height: 140px;
  overflow-y: auto;
  margin-top: 6px;
}
#fileList li {
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
#fileList li:hover { background: var(--bg-row-hover); color: var(--text-primary); }
#fileList li.active {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 500;
}

/* Search */
#searchInput {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-row);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
#searchInput::placeholder { color: var(--text-dim); }
#searchInput:focus { border-color: var(--accent-dim); }

/* Channel Panel */
#channelPanel {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 16px;
}

.channel-controls {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.channel-group { margin-bottom: 12px; }

.channel-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.channel-group-header .group-cb {
  cursor: pointer;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  accent-color: var(--accent);
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: background 0.12s;
}
.channel-item:hover { background: var(--bg-row-hover); color: var(--text-primary); }
.channel-item input[type=checkbox] {
  accent-color: var(--accent);
  width: 13px; height: 13px;
  flex-shrink: 0;
  cursor: pointer;
}

.channel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.9;
}

/* ── Main Content ─────────────────────────────────────────── */
#mainContent {
  grid-area: main;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Message list */
#messageList {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

#emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--text-dim);
}
#emptyState .empty-icon { font-size: 48px; opacity: 0.4; }
#emptyState .empty-title { font-size: 16px; color: var(--text-secondary); }
#emptyState .empty-sub   { font-size: 13px; }

/* Message Rows — grid layout for column alignment */
.msg-row {
  display: grid;
  grid-template-columns: 152px max-content 1fr;
  align-items: baseline;
  gap: 0 8px;
  padding: 3px 14px;
  border-bottom: 1px solid transparent;
  transition: background 0.1s;
}
.msg-row:nth-child(even) { background: var(--bg-row-alt); }
.msg-row:hover { background: var(--bg-row-hover); }

.msg-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
}

.msg-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  background: color-mix(in srgb, var(--badge-color) 18%, transparent);
  color: var(--badge-color);
  border: 1px solid color-mix(in srgb, var(--badge-color) 35%, transparent);
}

.msg-content { min-width: 0; word-break: break-word; font-family: var(--font-ffxiv); }
.msg-sender  { color: var(--accent); font-weight: 500; }
.msg-text    { color: var(--text-primary); white-space: pre-wrap; }

/* Interactive link spans (items / actions / status effects) */
.se-link {
  cursor: pointer;
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.se-link-item   { color: #f0c070; text-decoration-color: #f0c07088; }
.se-link-action { color: #7ecfde; text-decoration-color: #7ecfde88; }
.se-link-player { color: #b8d4ff; text-decoration-color: #b8d4ff88; }
.se-link:hover  { filter: brightness(1.2); }
.msg-sender:hover { filter: brightness(1.2); cursor: default; }
.se-server-sep  { opacity: 0.7; }

/* FontIcon sprite icons (from fonticon_ps5.png) */
i.fonticon {
  display: inline-block;
  background-image: url('fonts/fonticon_ps5.png');
  background-repeat: no-repeat;
  vertical-align: middle;
  opacity: 0.9;
}

mark {
  background: var(--mark-bg);
  color: var(--mark-text);
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Pagination ───────────────────────────────────────────── */
#pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
#pageInfo { font-size: 12px; color: var(--text-secondary); min-width: 60px; text-align: center; }

/* ── Status Bar ───────────────────────────────────────────── */
#statusBar {
  grid-area: status;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-header);
  border-top: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}

/* ── Buttons ──────────────────────────────────────────────── */
button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
button:disabled { opacity: 0.4; cursor: default; }

.btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-row);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn:hover:not(:disabled) { background: var(--bg-row-hover); color: var(--text-primary); }

.btn-accent {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
}
.btn-accent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: #ffe28a;
}

.btn-tiny {
  padding: 3px 8px;
  font-size: 11px;
  background: var(--bg-row);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-tiny:hover:not(:disabled) { background: var(--bg-row-hover); color: var(--text-primary); }

.btn-icon {
  padding: 5px 10px;
  font-size: 13px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.btn-icon:hover:not(:disabled) {
  background: var(--bg-row-hover);
  color: var(--text-primary);
  border-color: var(--border);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 700px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: 52px auto 1fr 32px;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "status";
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
  }
  html, body { overflow: auto; }
  #sidebar { max-height: 320px; }
  #mainContent { min-height: 50vh; }
  #messageList { overflow-y: visible; }
}

/* ── TC Datamining Tooltip ────────────────────────────────── */
.tc-tooltip {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 360px;
  background: #1a1a2e;
  border: 1px solid #4a4a6a;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7);
  pointer-events: auto;
  font-size: 13px;
  color: #e8e8f0;
  line-height: 1.4;
}
.tc-tip-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.tc-tip-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 3px;
  background: #0d0d1a;
  border: 1px solid #3a3a5a;
}
.tc-tip-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tc-tip-name {
  font-size: 14px;
  font-weight: 600;
  font-family: 'FFXIV_Lodestone_SSF', 'Noto Sans TC', sans-serif;
  /* default white, overridden by rarity class */
  color: #ffffff;
}
/* FFXIV rarity colours */
.tc-tip-name.rarity-1 { color: #e0e0e0; }
.tc-tip-name.rarity-2 { color: #6edd44; }
.tc-tip-name.rarity-3 { color: #54a8ff; }
.tc-tip-name.rarity-4 { color: #c875ff; }
.tc-tip-name.rarity-7 { color: #ff9640; }
.tc-tip-meta {
  font-size: 11px;
  color: #9090b0;
  font-family: 'FFXIV_Lodestone_SSF', 'Noto Sans TC', sans-serif;
}
/* separator between meta and desc */
.tc-tip-meta:not([hidden]) + .tc-tip-desc::before {
  content: '';
  display: block;
  border-top: 1px solid #3a3a5a;
  margin: 6px 0;
}
.tc-tip-desc {
  margin: 0;
  color: #b8b8cc;
  font-family: 'FFXIV_Lodestone_SSF', 'Noto Sans TC', sans-serif;
  white-space: pre-wrap;
  font-size: 12px;
}