/* Harbor Chat — themable via CSS variables set on .hc or any ancestor */
.hc{
  --hc-bg: rgba(8,16,30,.55);
  --hc-panel: rgba(12,22,40,.92);
  --hc-raise: rgba(255,255,255,.06);
  --hc-line: rgba(255,255,255,.10);
  --hc-text: #eef1f6;
  --hc-dim: rgba(238,241,246,.62);
  --hc-faint: rgba(238,241,246,.38);
  --hc-accent: #d7b36a;
  --hc-accent-ink: #1b1306;
  --hc-own: linear-gradient(160deg,#e3c47f,#c79d4b);
  --hc-own-ink: #1b1306;
  --hc-bubble: rgba(255,255,255,.08);
  --hc-mention: rgba(215,179,106,.18);
  --hc-font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hc-head: inherit;
  --hc-radius: 18px;
  position:relative; display:flex; flex-direction:column; min-height:0; height:100%;
  color:var(--hc-text); font-family:var(--hc-font); font-size:15px; line-height:1.42;
}
.hc *{ box-sizing:border-box; }
:where(.hc) button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
.hc [hidden]{ display:none !important; }

.hc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px 10px; border-bottom:1px solid var(--hc-line); flex-shrink:0; }
.hc-title{ font-family:var(--hc-head); font-weight:700; letter-spacing:.06em; font-size:13px; text-transform:uppercase; display:flex; align-items:center; gap:8px; color:var(--hc-accent); }
.hc-live-dot{ width:8px; height:8px; border-radius:50%; background:#5ad17a; box-shadow:0 0 0 0 rgba(90,209,122,.7); animation:hcPulse 2.4s infinite; }
@keyframes hcPulse{ 0%{box-shadow:0 0 0 0 rgba(90,209,122,.6)} 70%{box-shadow:0 0 0 8px rgba(90,209,122,0)} 100%{box-shadow:0 0 0 0 rgba(90,209,122,0)} }
.hc-head-tools{ display:flex; align-items:center; gap:4px; }
.hc-today{ font-size:12px; color:var(--hc-dim); margin-right:6px; white-space:nowrap; }
.hc-icon-btn{ width:32px; height:32px; border-radius:10px; display:inline-grid; place-items:center; text-decoration:none; font-size:15px; color:var(--hc-text); }
.hc-icon-btn:hover{ background:var(--hc-raise); }
.hc-icon-btn.off{ opacity:.55; }

.hc-channels{ display:flex; gap:4px; padding:8px 10px 0; flex-shrink:0; overflow-x:auto; }
.hc-ch{ position:relative; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600; color:var(--hc-dim); white-space:nowrap; }
.hc-ch:hover{ background:var(--hc-raise); color:var(--hc-text); }
.hc-ch.on{ background:var(--hc-accent); color:var(--hc-accent-ink); }
.hc-ch-badge:empty{ display:none; }

.hc-prompt{ margin:10px 12px 0; padding:9px 12px; border-radius:14px; background:var(--hc-mention); border:1px solid color-mix(in srgb, var(--hc-accent) 35%, transparent); display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.hc-prompt-k{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--hc-accent); font-weight:700; }
.hc-prompt-q{ flex:1 1 160px; font-size:14px; }
.hc-prompt-go{ font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; background:var(--hc-accent); color:var(--hc-accent-ink) !important; }

.hc-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px 10px 12px; scroll-behavior:auto; }
.hc-scroll::-webkit-scrollbar{ width:6px; } .hc-scroll::-webkit-scrollbar-thumb{ background:var(--hc-line); border-radius:3px; }
.hc-older{ display:block; margin:8px auto; font-size:12px; color:var(--hc-dim); padding:6px 12px; border-radius:999px; border:1px solid var(--hc-line) !important; }
.hc-empty{ text-align:center; color:var(--hc-dim); padding:40px 16px; font-size:14px; }
.hc-empty-ic{ font-size:34px; margin-bottom:8px; opacity:.8; }
.hc-day{ display:flex; justify-content:center; margin:14px 0 6px; pointer-events:none; }
.hc-day span{ font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--hc-text); background:var(--hc-panel); border:1px solid var(--hc-line); padding:3px 11px; border-radius:999px; backdrop-filter:blur(6px); }

.hc-msg{ position:relative; display:flex; gap:9px; padding:5px 6px; margin-top:6px; border-radius:14px; transition:background .2s; }
.hc-msg.grouped{ margin-top:0; padding-top:1px; }
.hc-msg.grouped .hc-av{ visibility:hidden; height:0; }
.hc-msg:hover{ background:rgba(255,255,255,.035); }
.hc-msg.mention{ background:var(--hc-mention); }
.hc-msg.flash{ background:color-mix(in srgb, var(--hc-accent) 30%, transparent); }
.hc-av{ width:34px; height:34px; border-radius:50%; flex-shrink:0; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,#3a4d70,#22304c); font-size:12px; font-weight:700; color:#fff !important; }
.hc-av img{ width:100%; height:100%; object-fit:cover; }
.hc-body{ min-width:0; flex:1; display:flex; flex-direction:column; align-items:flex-start; }
.hc-meta{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:12.5px; margin-bottom:2px; }
.hc-name{ font-weight:700; display:inline-flex; align-items:center; gap:5px; }
.hc-flag{ width:15px; height:11px; border-radius:2px; object-fit:cover; }
.hc-handle{ color:var(--hc-faint); }
.hc-meta time{ color:var(--hc-faint); font-size:11.5px; }
.hc-badge{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:1px 6px; border-radius:6px; background:var(--hc-accent); color:var(--hc-accent-ink); }
.hc-wx{ font-size:11px; color:var(--hc-dim); background:var(--hc-raise); padding:1px 7px; border-radius:999px; white-space:nowrap; }
.hc-bubble{ background:var(--hc-bubble); padding:8px 12px; border-radius:4px var(--hc-radius) var(--hc-radius) var(--hc-radius); max-width:100%; overflow-wrap:anywhere; }
.hc-msg.grouped .hc-bubble{ border-radius:var(--hc-radius); }
.hc-bubble a{ color:var(--hc-accent); text-decoration:underline; text-underline-offset:2px; }
.hc-bubble.big{ background:none; padding:0 2px; font-size:38px; line-height:1.15; }
.hc-mention{ color:var(--hc-accent); font-weight:700; }
.hc-mention.me{ background:var(--hc-accent); color:var(--hc-accent-ink); border-radius:5px; padding:0 3px; }
.hc-edited{ font-size:10.5px; color:var(--hc-faint); margin-left:6px; }
.hc-msg.deleted .hc-bubble{ background:none; color:var(--hc-faint); padding-left:0; }
.hc-quote{ text-align:left; font-size:12.5px; color:var(--hc-dim) !important; border-left:3px solid var(--hc-accent) !important; padding:3px 9px !important; margin:2px 0 4px; background:var(--hc-raise) !important; border-radius:6px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hc-quote b{ color:var(--hc-text); }
.hc-img{ margin-top:4px; border-radius:14px; overflow:hidden; max-width:min(320px,100%); padding:0 !important; }
.hc-img img{ display:block; max-width:100%; height:auto; max-height:320px; object-fit:cover; }
.hc-reacts{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.hc-react{ font-size:13px; padding:2px 8px !important; border-radius:999px; background:var(--hc-raise) !important; border:1px solid var(--hc-line) !important; }
.hc-react span{ font-size:11.5px; color:var(--hc-dim); font-weight:600; }
.hc-react.mine{ border-color:var(--hc-accent) !important; background:var(--hc-mention) !important; }
.hc-react:hover{ transform:scale(1.06); }

/* Own messages on the right */
.hc-msg.own{ flex-direction:row-reverse; }
.hc-msg.own .hc-body{ align-items:flex-end; }
.hc-msg.own .hc-meta{ flex-direction:row-reverse; }
.hc-msg.own .hc-bubble{ background:var(--hc-own); color:var(--hc-own-ink); border-radius:var(--hc-radius) 4px var(--hc-radius) var(--hc-radius); }
.hc-msg.own.grouped .hc-bubble{ border-radius:var(--hc-radius); }
.hc-msg.own .hc-bubble a, .hc-msg.own .hc-mention{ color:var(--hc-own-ink); }
.hc-msg.own .hc-bubble.big{ background:none; color:inherit; }
.hc-msg.own .hc-av{ display:none; }

/* Hover actions */
.hc-actions{ position:absolute; top:-14px; right:8px; display:none; gap:1px; background:var(--hc-panel); border:1px solid var(--hc-line); border-radius:12px; padding:2px; box-shadow:0 6px 18px rgba(0,0,0,.35); z-index:3; }
.hc-msg.own .hc-actions{ right:auto; left:8px; }
.hc-actions button{ width:30px; height:28px; border-radius:9px; font-size:14px; }
.hc-actions button:hover{ background:var(--hc-raise); transform:scale(1.12); }
.hc-msg:hover .hc-actions, .hc-msg:focus-within .hc-actions{ display:flex; }
@media (hover:none){ .hc-msg .hc-actions{ position:static; display:flex; background:none; border:0; box-shadow:none; padding:0; margin-top:2px; opacity:.7; } .hc-msg.own .hc-actions{ justify-content:flex-end; } .hc-msg{ flex-wrap:wrap; } .hc-msg .hc-actions{ width:100%; padding-left:43px; } .hc-msg.own .hc-actions{ padding-left:0; } }

.hc-newbadge{ position:absolute; left:50%; transform:translateX(-50%); bottom:120px; z-index:5; background:var(--hc-accent) !important; color:var(--hc-accent-ink) !important; font-weight:700; font-size:13px; padding:7px 14px !important; border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,.35); }

.hc-foot{ flex-shrink:0; border-top:1px solid var(--hc-line); padding:8px 10px 10px; }
.hc-signin{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 4px; color:var(--hc-dim); font-size:14px; }
.hc-btn{ background:var(--hc-accent) !important; color:var(--hc-accent-ink) !important; font-weight:700; padding:9px 16px !important; border-radius:999px; font-size:14px; }
.hc-replybar, .hc-imgbar{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--hc-dim); background:var(--hc-raise); border-radius:10px; padding:6px 8px 6px 10px; margin-bottom:6px; }
.hc-replybar span, .hc-imgbar span{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.hc-imgbar img{ width:42px; height:42px; object-fit:cover; border-radius:8px; }
.hc-x{ width:24px; height:24px; border-radius:7px; font-size:12px; }
.hc-x:hover{ background:var(--hc-line); }
.hc-inputrow{ display:flex; align-items:flex-end; gap:6px; }
.hc-tool{ width:38px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:19px; cursor:pointer; flex-shrink:0; }
.hc-tool:hover{ background:var(--hc-raise); }
.hc-inputwrap{ flex:1; min-width:0; background:var(--hc-raise); border:1px solid var(--hc-line); border-radius:20px; padding:2px 4px; transition:border-color .15s; }
.hc-inputwrap:focus-within{ border-color:var(--hc-accent); }
.hc-inputwrap textarea{ width:100%; resize:none; border:0; outline:0; background:transparent; color:var(--hc-text); font:inherit; font-size:15px; padding:9px 10px; max-height:140px; display:block; }
.hc-inputwrap textarea::placeholder{ color:var(--hc-faint); }
.hc-send{ width:44px; height:44px; border-radius:50%; background:var(--hc-accent) !important; color:var(--hc-accent-ink) !important; font-size:18px; flex-shrink:0; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.3); transition:transform .12s; }
.hc-send:hover{ transform:scale(1.06); } .hc-send:active{ transform:scale(.94); } .hc-send:disabled{ opacity:.5; }
.hc-subrow{ display:flex; justify-content:space-between; align-items:center; padding:5px 6px 0 92px; font-size:11.5px; color:var(--hc-faint); }
.hc-sharewx{ display:inline-flex; gap:5px; align-items:center; cursor:pointer; }
.hc-sharewx input{ accent-color:var(--hc-accent); }

.hc-mentions{ background:var(--hc-panel); border:1px solid var(--hc-line); border-radius:12px; padding:4px; margin-bottom:6px; max-height:220px; overflow:auto; }
.hc-mentions button{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:6px 8px !important; border-radius:8px; font-size:13px; color:var(--hc-dim) !important; }
.hc-mentions button b{ color:var(--hc-text); }
.hc-mentions button.on, .hc-mentions button:hover{ background:var(--hc-raise) !important; }
.hc-mentions img, .hc-mentions span{ width:22px; height:22px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#334; font-size:10px; }

.hc-picker{ position:absolute; z-index:20; width:300px; max-width:calc(100% - 16px); background:var(--hc-panel); border:1px solid var(--hc-line); border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.5); overflow:hidden; backdrop-filter:blur(12px); }
.hc-pk-tabs{ display:flex; gap:2px; padding:6px; border-bottom:1px solid var(--hc-line); overflow-x:auto; }
.hc-pk-tabs button{ width:32px; height:30px; border-radius:8px; font-size:16px; flex-shrink:0; opacity:.6; }
.hc-pk-tabs button.on{ background:var(--hc-raise); opacity:1; }
.hc-pk-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:6px; max-height:210px; overflow-y:auto; }
.hc-pk-grid button{ height:34px; border-radius:8px; font-size:21px; }
.hc-pk-grid button:hover{ background:var(--hc-raise); transform:scale(1.15); }
.hc-menu{ position:absolute; z-index:20; background:var(--hc-panel); border:1px solid var(--hc-line); border-radius:12px; padding:4px; min-width:150px; box-shadow:0 14px 40px rgba(0,0,0,.45); }
.hc-menu button{ display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; font-size:13.5px; }
.hc-menu button:hover{ background:var(--hc-raise); }
.hc-menu .danger{ color:#ff8a80; }
.hc-lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.86); display:grid; place-items:center; padding:20px; }
.hc-lightbox img{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.hc-lightbox .hc-icon-btn{ position:absolute; top:14px; right:14px; background:rgba(255,255,255,.12); color:#fff; }
.hc-drop{ position:absolute; inset:6px; z-index:30; border:2px dashed var(--hc-accent); border-radius:18px; background:rgba(0,0,0,.55); display:grid; place-items:center; font-weight:700; color:var(--hc-accent); pointer-events:none; }

@media (max-width:600px){ .hc{ font-size:15px; } .hc-subrow{ padding-left:6px; } .hc-today{ display:none; }
  .hc-prompt{ margin:8px 8px 0; padding:7px 10px; gap:6px; flex-wrap:nowrap; } .hc-prompt-k{ display:none; } .hc-prompt-q{ font-size:13px; flex:1 1 auto; } .hc-prompt-go{ padding:5px 10px; } .hc-head{ padding:9px 10px 8px; } }
@media (prefers-reduced-motion:reduce){ .hc-live-dot{ animation:none; } .hc *{ transition:none !important; } }