/* LeCastle Chat v2 — isolated conversation workspace */
.chat-v2{
  --lc-bg:#0b0b11;
  --lc-surface:rgba(20,19,29,.91);
  --lc-surface-2:rgba(255,255,255,.055);
  --lc-stroke:rgba(255,255,255,.09);
  --lc-stroke-strong:rgba(167,139,250,.26);
  --lc-text:#f4f2fb;
  --lc-muted:#918da3;
  --lc-accent:#9b7cff;
  --lc-accent-2:#6d4cf5;
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 4%,rgba(120,83,255,.12),transparent 30%),
    radial-gradient(circle at 15% 86%,rgba(59,130,246,.055),transparent 30%),
    var(--lc-bg) !important;
}

.chat-v2::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.18;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}

/* Header */
#chat-area #chat-header.lc-header{
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:76px;
  padding:12px 18px !important;
  border:0 !important;
  border-bottom:1px solid var(--lc-stroke) !important;
  background:rgba(12,12,18,.78) !important;
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  z-index:20;
}
#chat-area #chat-header.lc-header:not(.hidden){ display:flex !important; }
.lc-header__identity{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
#chat-area #chat-avatar-container.lc-header__avatar{
  position:relative;
  display:grid !important;
  place-items:center;
  flex:0 0 46px;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px !important;
  color:white;
  font-size:17px;
  font-weight:750;
  background:linear-gradient(145deg,#a78bfa,#6044dc) !important;
  box-shadow:0 9px 28px rgba(92,60,210,.28),inset 0 1px rgba(255,255,255,.18);
}
#chat-area #chat-avatar-container img{ width:100%; height:100%; object-fit:cover; }
.lc-header__copy{ min-width:0; }
#chat-area #chat-name{
  max-width:min(38vw,520px) !important;
  min-height:22px;
  overflow:hidden;
  color:var(--lc-text);
  font:700 16px/1.3 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lc-header__meta{ display:flex; align-items:center; gap:9px; min-height:18px; margin-top:2px; }
#chat-area #chat-username{ max-width:320px; overflow:hidden; color:var(--lc-muted); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
#chat-area #chat-online-status .text-xs{ font-size:11px !important; }

.lc-header__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
  flex:0 0 457px;
  width:457px;
}
#chat-area .lc-header__actions > .lc-action.hidden{
  display:grid !important;
  visibility:hidden;
  pointer-events:none;
}
#chat-area .lc-action{
  display:grid;
  place-items:center;
  flex:0 0 36px;
  width:36px !important;
  height:36px !important;
  min-width:36px;
  border:1px solid var(--lc-stroke) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.045) !important;
  color:#aaa5b8;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
  transition:color .14s,border-color .14s,background .14s,transform .14s;
}
#chat-area .lc-action:hover{
  color:white;
  border-color:var(--lc-stroke-strong) !important;
  background:rgba(139,92,246,.14) !important;
  transform:translateY(-1px);
}
#chat-area .lc-action--danger:hover{ color:#fecaca; border-color:rgba(248,113,113,.25) !important; background:rgba(239,68,68,.12) !important; }
.lc-action-separator{ width:1px; height:20px; margin:0 2px; background:var(--lc-stroke); }

/* Critical toolbar icons are vector masks, so they never wait for icon fonts. */
#chat-area .lc-action > i,#chat-area .lc-send > i,#chat-area .lc-emoji-trigger > i{ display:none !important; }
#chat-area .lc-action::before,#chat-area .lc-send::before,#chat-area .lc-emoji-trigger::before{
  content:"";
  display:block;
  width:17px;
  height:17px;
  background:currentColor;
  -webkit-mask:var(--lc-icon) center/contain no-repeat;
  mask:var(--lc-icon) center/contain no-repeat;
}
#add-friend-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15 14c4 0 7 2 7 5v2H8v-2c0-3 3-5 7-5ZM15 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10ZM5 7V4h2v3h3v2H7v3H5V9H2V7h3Z'/%3E%3C/svg%3E"); }
#tp-offer-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22s8-7.1 8-14A8 8 0 1 0 4 8c0 6.9 8 14 8 14Zm0-10a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z'/%3E%3C/svg%3E"); }
#group-invite-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-7 2-7 5v2h12v-2c0-1.2.4-2.3 1.2-3.2A10.8 10.8 0 0 0 9 14Zm10-2V9h-2v3h-3v2h3v3h2v-3h3v-2h-3Z'/%3E%3C/svg%3E"); }
#profile-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6Z'/%3E%3C/svg%3E"); }
#members-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8-1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM8 14c-4 0-7 2-7 5v2h14v-2c0-3-3-5-7-5Zm8 0c-.6 0-1.2 0-1.7.1A6.2 6.2 0 0 1 17 19v2h6v-2c0-3-3-5-7-5Z'/%3E%3C/svg%3E"); }
#nearby-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 10-2 9h3v-6h2v6h3l-2-9h-4ZM4.2 5.2 2.8 3.8A11.5 11.5 0 0 0 0 11h2a9.5 9.5 0 0 1 2.2-5.8Zm15.6 0A9.5 9.5 0 0 1 22 11h2a11.5 11.5 0 0 0-2.8-7.2l-1.4 1.4Z'/%3E%3C/svg%3E"); }
#search-chat-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 2a8 8 0 1 0 4.9 14.3L20.6 22l1.4-1.4-5.7-5.7A8 8 0 0 0 10 2Zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z'/%3E%3C/svg%3E"); }
#pin-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m15 3 6 6-2 2-2-1-4 4v4l-2 2-3-5-5-3 2-2h4l4-4-1-2 3-1Z'/%3E%3C/svg%3E"); }
#pay-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.5 2 2 4.2 2 7s4.5 5 10 5 10-2.2 10-5-4.5-5-10-5ZM2 11v4c0 2.8 4.5 5 10 5s10-2.2 10-5v-4c-2 2-5.7 3-10 3s-8-1-10-3Z'/%3E%3C/svg%3E"); }
#clear-history-btn{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 21a2 2 0 0 1-2-2V6h14v13a2 2 0 0 1-2 2H7ZM9 9v9h2V9H9Zm4 0v9h2V9h-2ZM4 3h5l1-1h4l1 1h5v2H4V3Z'/%3E%3C/svg%3E"); }
.lc-header__actions .lc-action:last-child{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5.6 4.2 12 10.6l6.4-6.4 1.4 1.4-6.4 6.4 6.4 6.4-1.4 1.4-6.4-6.4-6.4 6.4-1.4-1.4 6.4-6.4-6.4-6.4 1.4-1.4Z'/%3E%3C/svg%3E"); }
#chat-area .lc-send{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m2 3 20 9L2 21l2-8 11-1L4 11 2 3Z'/%3E%3C/svg%3E"); }
#chat-area .lc-emoji-trigger{ --lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm8 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-8.7 4a5 5 0 0 0 9.4 0H7.3Z'/%3E%3C/svg%3E"); }

/* Connection status floats over content and never changes chat geometry. */
#chat-area #connection-banner{
  position:absolute !important;
  top:84px;
  left:50%;
  z-index:45;
  display:flex !important;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:calc(100% - 28px);
  min-height:34px;
  padding:7px 13px;
  border:1px solid rgba(245,158,11,.24) !important;
  border-radius:11px;
  background:rgba(44,30,10,.94) !important;
  color:#fbbf24;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-8px);
  transition:opacity .16s,transform .16s;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
#chat-area #connection-banner::before{ content:""; width:7px; height:7px; flex:none; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(245,158,11,.13); }
#chat-area #connection-banner.show{ opacity:1; transform:translate(-50%,0); }
#chat-area #connection-banner.ok{ border-color:rgba(74,222,128,.22) !important; background:rgba(12,42,27,.94) !important; color:#4ade80; }

/* In-conversation search */
#chat-area #chat-search-bar.lc-search{
  flex:0 0 auto;
  padding:9px 18px;
  border:0 !important;
  border-bottom:1px solid var(--lc-stroke) !important;
  background:rgba(15,14,22,.9) !important;
  z-index:19;
}
.lc-search__inner{ display:flex; align-items:center; gap:7px; max-width:820px; margin:0 auto; }
.lc-search__field{ position:relative; flex:1; min-width:130px; }
#chat-area #chat-search-input{
  width:100%;
  height:36px;
  padding:0 12px 0 35px;
  border:1px solid var(--lc-stroke) !important;
  border-radius:11px !important;
  outline:0;
  background:rgba(255,255,255,.045) !important;
  color:var(--lc-text);
  font-size:13px;
}
#chat-area #chat-search-input:focus{ border-color:rgba(155,124,255,.55) !important; box-shadow:0 0 0 3px rgba(139,92,246,.11); }

/* Message viewport */
#chat-area #messages-wrapper.lc-messages-scroll{
  position:relative;
  display:block !important;
  flex:1 1 0 !important;
  min-height:0 !important;
  overflow-x:hidden;
  overflow-y:auto !important;
  padding:22px clamp(18px,3vw,44px) 26px !important;
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}
#chat-area #messages.lc-messages{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  width:100%;
  min-height:100%;
  max-width:1100px;
  margin:0 auto !important;
  background:transparent !important;
}
#chat-area #messages > *{ margin-top:0 !important; }
#chat-area .message-item{ width:100%; margin-block:0 !important; }
#chat-area .chat-message{
  width:fit-content;
  max-width:min(72%,720px) !important;
  padding:10px 14px;
  border:1px solid var(--lc-stroke);
  font-size:14px;
  line-height:1.48;
  word-break:break-word;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
#chat-area .chat-message-incoming{
  border-radius:5px 17px 17px 17px;
  background:rgba(255,255,255,.062) !important;
  color:#eeecf6;
}
#chat-area .chat-message-outgoing{
  border-color:rgba(181,158,255,.24);
  border-radius:17px 17px 5px 17px;
  background:linear-gradient(145deg,#8b6cf3,#6546d8) !important;
  color:white;
  box-shadow:0 9px 26px rgba(91,58,198,.24);
}
#chat-area .lc-message-cluster{ max-width:min(78%,780px) !important; }
#chat-area .lc-message-cluster .chat-message{ max-width:100% !important; }
#chat-area .lc-message-avatar{ flex:0 0 28px; border:1px solid rgba(255,255,255,.09); box-shadow:0 5px 16px rgba(0,0,0,.16); }
#chat-area .lc-bubble-head{ min-height:17px; }
#chat-area .lc-bubble-text{ min-width:0; }
#chat-area .lc-bubble-time{ min-height:14px; }
#chat-area .message-item img{ background:#211f2c; }
#chat-area .chat-message .text-xs.opacity-60{ color:rgba(235,231,246,.53); font-size:10px !important; letter-spacing:.02em; }
#chat-area .message-translation{ color:#d5c9ff; border-top-color:rgba(255,255,255,.12); }

/* Notification cards generated by messages.js */
#chat-area .message-item > [data-msg-id]{
  max-width:min(74%,680px) !important;
  border-radius:15px !important;
  box-shadow:0 8px 25px rgba(0,0,0,.13);
}
#chat-area #messages > .flex.flex-col.items-center{
  align-self:stretch;
  min-height:280px;
  padding:44px 20px !important;
  justify-content:center;
  color:var(--lc-muted);
}

/* Loading state occupies the final message region without large artwork. */
#chat-area .message-skeleton{ min-height:360px; justify-content:flex-end; gap:11px; padding:20px 0 0; }
#chat-area .message-skeleton__row span{ border-color:rgba(255,255,255,.065); background:linear-gradient(90deg,rgba(255,255,255,.026),rgba(255,255,255,.07),rgba(255,255,255,.026)); }

/* Composer */
#chat-area #input-area.lc-composer-wrap{
  flex:0 0 auto;
  padding:11px clamp(14px,2.5vw,32px) max(12px,env(safe-area-inset-bottom)) !important;
  border:0 !important;
  border-top:1px solid var(--lc-stroke) !important;
  background:rgba(12,12,18,.84) !important;
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  z-index:18;
}
#chat-area #input-area.lc-composer-wrap:not(.hidden){ display:block !important; }
#chat-area #typing-indicator{ max-width:1100px; min-height:18px; margin:0 auto 5px; padding:0 4px !important; }
#chat-area .lc-composer{ display:flex; align-items:flex-end; gap:9px; max-width:1100px; margin:0 auto; }
#chat-area .lc-composer__field{
  position:relative;
  display:flex;
  flex:1;
  min-width:0;
  min-height:46px;
  border:1px solid var(--lc-stroke);
  border-radius:15px;
  background:rgba(255,255,255,.052);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
#chat-area .lc-composer__field:focus-within{ border-color:rgba(155,124,255,.52); background:rgba(255,255,255,.063); box-shadow:0 0 0 3px rgba(139,92,246,.1); }
#chat-area #message-input{
  display:block;
  width:100%;
  min-height:44px;
  max-height:132px;
  margin:0;
  padding:12px 48px 11px 14px;
  border:0 !important;
  outline:0;
  resize:none;
  overflow-y:auto;
  background:transparent !important;
  color:var(--lc-text);
  font:400 14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:none !important;
}
#chat-area #message-input::placeholder{ color:#777283; }
#chat-area .lc-emoji-trigger{
  position:absolute;
  right:8px;
  bottom:7px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:9px;
  color:#8f899c;
}
#chat-area .lc-emoji-trigger:hover{ color:#f9d56e; background:rgba(255,255,255,.06); }
#chat-area .lc-send{
  display:grid;
  place-items:center;
  flex:0 0 46px;
  width:46px;
  height:46px;
  border:1px solid rgba(188,166,255,.26);
  border-radius:14px;
  color:white;
  background:linear-gradient(145deg,var(--lc-accent),var(--lc-accent-2));
  box-shadow:0 9px 24px rgba(91,58,198,.28);
  transition:transform .14s,filter .14s,box-shadow .14s;
}
#chat-area .lc-send:hover{ transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 12px 28px rgba(91,58,198,.34); }
#chat-area .lc-send:active{ transform:scale(.97); }
#chat-area .lc-composer__tools{ display:flex; justify-content:flex-start; max-width:1100px; height:18px; margin:5px auto 0; }
#chat-area .lc-volume{ display:flex; align-items:center; gap:8px; color:#777283; }
#chat-area .lc-volume button{ width:22px; color:inherit; font-size:11px; }
#chat-area .lc-volume:hover{ color:#a9a4b5; }
#chat-area .lc-volume .volume-slider{ width:68px; height:3px; opacity:.65; }
#chat-area #emoji-picker{ bottom:54px !important; right:0 !important; border-color:var(--lc-stroke) !important; border-radius:15px !important; background:#171620 !important; }

@media (max-width:900px){
  #chat-area #chat-header.lc-header{ gap:10px; padding-right:10px !important; }
  .lc-header__actions{ flex-basis:48%; width:48%; max-width:48%; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  .lc-header__actions::-webkit-scrollbar{ display:none; }
  #chat-area #chat-name{ max-width:28vw !important; }
}

@media (max-width:768px){
  #chat-area.chat-v2{ height:100dvh; max-height:100dvh; }
  #chat-area #chat-header.lc-header{
    display:block !important;
    min-height:96px;
    padding:10px 8px 8px 54px !important;
  }
  #chat-area #chat-header.lc-header.hidden{ display:none !important; }
  .lc-header__identity{ min-height:42px; padding-right:6px; }
  #chat-area #chat-avatar-container.lc-header__avatar{ flex-basis:38px; width:38px !important; height:38px !important; min-width:38px !important; border-radius:12px !important; }
  #chat-area #chat-name{ max-width:calc(100vw - 118px) !important; font-size:14px !important; }
  .lc-header__meta{ min-height:14px; }
  #chat-area #chat-username{ display:block; max-width:52vw; font-size:10.5px; }
  .lc-header__actions{
    width:calc(100vw - 62px);
    max-width:none;
    height:39px;
    margin-top:3px;
    overflow-x:auto !important;
    justify-content:flex-start;
    gap:5px;
    flex-basis:auto;
  }
  #chat-area .lc-action{ flex-basis:34px; width:34px !important; height:34px !important; min-width:34px !important; }
  #chat-area #clear-history-btn,#chat-area #add-friend-btn{ display:none !important; }
  .lc-action-separator{ display:none; }
  #chat-area #chat-search-bar.lc-search{ padding:7px 9px; }
  .lc-search__inner{ flex-wrap:nowrap !important; }
  #chat-area #chat-search-input{ font-size:16px !important; }
  #chat-area #messages-wrapper.lc-messages-scroll{ padding:15px 12px 18px !important; scrollbar-gutter:auto; }
  #chat-area .chat-message{ max-width:86% !important; padding:9px 12px; font-size:13.5px; }
  #chat-area .lc-message-cluster{ max-width:91% !important; }
  #chat-area .message-item > [data-msg-id]{ max-width:90% !important; }
  #chat-area .message-skeleton{ min-height:280px; }
  #chat-area #input-area.lc-composer-wrap{ padding:8px 9px max(8px,env(safe-area-inset-bottom)) !important; }
  #chat-area #message-input{ font-size:16px !important; padding-block:10px; }
  #chat-area .lc-composer__tools{ display:none; }
  #chat-area #emoji-picker{ position:fixed !important; right:8px !important; bottom:72px !important; width:calc(100vw - 16px) !important; max-width:360px !important; }
  #chat-area #connection-banner{ top:104px; }
}

@media (prefers-reduced-motion:reduce){
  #chat-area .lc-action,#chat-area .lc-send,#chat-area .lc-composer__field{ transition:none; }
}