/* Flatcast Chat V1 - simple dark skeleton */
.fcchat-iframe-body { margin:0; padding:0; background:#111; }
.fcchat-root{
  width:900px; height:750px;
  max-width:100%;
  background:#0f0f0f;
  color:#eee;
  font-family: Arial, Helvetica, sans-serif;
  border:1px solid #2b2b2b;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
}

/* Theme background image layer (set via Design Tool -> Background -> URL) */
.fcchat-root .fcchat-bg-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center center;
  /* cover => kırpabilir. contain => kırpmaz, gerekirse kenarlarda boşluk bırakır. */
  background-size:contain;
}

/* Ensure all UI is rendered above the background layer */
.fcchat-topbar,
.fcchat-main,
.fcchat-login-proxy,
.fcchat-admin-overlay,
.fcchat-popup,
.fcchat-design-tool{
  position:relative;
  z-index:1;
}
.fcchat-topbar{
  display:flex;
  gap:10px;
  padding:10px;
  border-bottom:1px solid #2b2b2b;
  background:#151515;
  box-sizing:border-box;
  height:120px;
}
.fcchat-toolbar{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:64px;
  align-items:stretch;
}
.fcchat-btn{
  background:#1f1f1f;
  border:1px solid #333;
  color:#eee;
  cursor:pointer;
  padding:6px 0;
  border-radius:6px;
}
.fcchat-btn:hover{ filter:brightness(1.12); }
.fcchat-color{
  width:64px; height:32px;
  padding:0;
  border:1px solid #333;
  background:#1f1f1f;
  border-radius:6px;
}
.fcchat-inputwrap{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden;
}
.fcchat-input{
  flex:1;
  resize:none;
  width:100%;
  height:100%;
  background:#0d0d0d;
  border:1px solid #333;
  color:#fff;
  border-radius:10px;
  padding:10px;
  font-size:14px;
  box-sizing:border-box;
  outline:none;

  /* When the textbox is resized very small in Design Tool, native textarea
     scrollbars become visually noisy. Keep the content clipped and hide the
     native scrollbar so the box stays clean. */
  overflow:hidden;
  scrollbar-width:none; /* Firefox */
}

/* WebKit (Chrome/Edge/Safari) scrollbar hide for textarea */
.fcchat-input::-webkit-scrollbar{
  width:0;
  height:0;
}
.fcchat-meta{
  display:flex;
  justify-content:space-between;
  color:#bdbdbd;
  font-size:12px;
  padding:0 2px;
}
.fcchat-main{
  display:flex;
  height:calc(750px - 120px);
  position: relative;
}
.fcchat-panel{
  box-sizing:border-box;
  height:100%;
}
.fcchat-guests{
  width:28%;
  border-right:1px solid #2b2b2b;
  background:#101010;
  display:flex;
  flex-direction:column;
  position: relative;
  z-index: 3;
}
.fcchat-chat{
  width:72%;
  background:#0b0b0b;
  display:flex;
  position: relative;
  z-index: 1;
  flex-direction:column;
  /* Anchor absolute-positioned overlays (e.g., custom scrollbar mock)
     to the chat panel, not the page body. */
  position:relative;
}
.fcchat-panel-title{
  padding:8px 10px;
  border-bottom:1px solid #2b2b2b;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#cfcfcf;
}
.fcchat-panel.fcchat-guests > .fcchat-panel-title,
.fcchat-panel.fcchat-chat > .fcchat-panel-title{
  display:none;
}
.fcchat-guestlist{
  padding:10px;
  /* Always show a scrollbar area for the userlist.
     This matches the Flatcast-like behavior where the list is obviously scrollable. */
  overflow-y:scroll;
  overflow-x:hidden;
  font-size:13px;
}
.fcchat-guestitem{
  padding:6px 8px;
  border:1px solid #222;
  border-radius:10px;
  margin-bottom:6px;
  background:#141414;
}
.fcchat-stream{
  padding:10px;
  overflow:auto;
  font-size:14px;
  line-height:1.35;
  flex:1;
  /* Allow flex child to shrink below its content size when resizing in edit mode */
  min-width:0;
  min-height:0;

  /* Hide native scrollbars; the UI uses its own draggable scrollbar element.
     Scrolling with mouse wheel/touchpad still works. */
  scrollbar-width:none; /* Firefox */
}

/* WebKit (Chrome/Edge/Safari) scrollbar hide for stream */
.fcchat-stream::-webkit-scrollbar{
  width:0;
  height:0;
}
.fcchat-line{
  padding:6px 8px;
  border-bottom:1px solid #161616;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.fcchat-line.fcchat-has-emoji{
  align-items:center;
}
.fcchat-line.fcchat-has-gif{
  align-items:center;
  line-height:1.1;
}
.fcchat-line.fcchat-has-gif .fcchat-msg{
  display:inline-flex;
  align-items:center;
  gap:4px;
  line-height:1.1;
}
.fcchat-line.fcchat-has-gif .fcchat-msg-body,
.fcchat-line.fcchat-has-gif .fcchat-time-inline{
  display:inline-flex;
  align-items:center;
  line-height:1.1;
}
.fcchat-line.fcchat-has-gif .fcchat-msg-text{
  display:inline-flex;
  align-items:center;
  line-height:1.1;
}
.fcchat-time{
  color:#9a9a9a;
  margin-right:8px;
  font-size:12px;
  flex:0 0 auto;
  white-space:nowrap;
}
.fcchat-name{
  color:#e6e6e6;
  margin-right:6px;
  font-weight:700;
  flex:0 0 auto;
  white-space:nowrap;
}
.fcchat-msg{
  color:#f0f0f0;
  flex:1 1 auto;
  min-width:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Zoom (A+/A-) should affect the whole message content, even if server HTML contains inline font sizes */
.fcchat-msg,
.fcchat-msg *{
  font-size: inherit !important;
}

/* Flatcast-like inline time at end of message */
.fcchat-time-inline{
  margin-left:6px;
  color: inherit;
  font-size: .9em;
  opacity:.85;
  white-space:nowrap;
}

.fcchat-emoji-pop{
  position:absolute;
  top:60px;
  left:10px;
  background:#1a1a1a;
  border:1px solid #333;
  border-radius:12px;
  padding:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index:99;
}
.fcchat-emoji-grid{
  display:grid;
  grid-template-columns: repeat(5, 34px);
  gap:6px;
}
.fcchat-emoji-btn{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid #333;
  background:#111;
  cursor:pointer;
  color:#fff;
  font-size:18px;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  font-variant-emoji: emoji;
}
.fcchat-emoji-btn .fcchat-flag-emoji{
  width: 20px;
  height: 20px;
}
.fcchat-emoji-btn:hover{ filter:brightness(1.15); }


/* V1.2 UI tweaks */
.fcchat-topbar{
  flex-direction:column;
  height:110px;
  padding:8px 10px;
}
.fcchat-toolbar-horizontal{
  flex-direction:row !important;
  width:100% !important;
  align-items:center;
  gap:8px;
}
.fcchat-toolbar-horizontal .fcchat-btn{
  padding:8px 10px;
  min-width:44px;
}
.fcchat-toolbar-horizontal .fcchat-color{
  width:44px;
  height:34px;
}
.fcchat-sep{
  flex:1;
}
.fcchat-toolbar-horizontal .fcchat-guest,
.fcchat-toolbar-horizontal .fcchat-status{
  font-size:12px;
  color:#bdbdbd;
}
.fcchat-inputwrap{
  width:100%;
}
.fcchat-input{
  min-height:52px;
  background:#0b0b0b !important;
  color:#fff !important;
  border-radius:10px;
}
.fcchat-main{
  height:calc(750px - 110px);
}
.fcchat-panel-title{
  padding:6px 10px;
  font-size:11px;
}
.fcchat-msg strong{ font-weight:800 !important; }
.fcchat-msg em{ font-style:italic !important; }
.fcchat-msg .fcchat-emoji-char{
  font-style: normal !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  vertical-align: middle;
  display: inline-block;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  font-variant-emoji: emoji;
}
.fcchat-msg .fcchat-emoji-char.fcchat-flag-emoji{
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.fcchat-msg .fcchat-emoji-char,
.fcchat-msg .fcchat-gif-sticker{
  line-height: 1 !important;
  vertical-align: -0.15em !important;
  margin-top: -1px;
  margin-bottom: -1px;
}
.fcchat-msg s,
.fcchat-msg strike{
  text-decoration-thickness:3px;
  text-decoration-skip-ink:none;
}


/* V1.3 additions */
.fcchat-login{ padding:8px 12px; }


/* V1.4 size enforcement */
.fcchat-root{ width:900px !important; height:750px !important; min-width:900px; min-height:750px; }


/* V1.5: theme-friendly + time on the right */
.fcchat-root{ background: transparent !important; border:0 !important; }
.fcchat-topbar{
  background: rgba(0,0,0,0) !important;
  border-bottom: 0 !important;
}
.fcchat-guests{ background: var(--fcchat-guests-bg, rgba(10,10,10,.35)) !important; border-right:0 !important; }
.fcchat-chat{ background: var(--fcchat-chat-bg, rgba(10,10,10,.20)) !important; }
.fcchat-panel-title{ border-bottom:0 !important; opacity:.85; }
.fcchat-guestitem{ border:0 !important; background: rgba(20,20,20,.25) !important; }
.fcchat-stream{ background: transparent !important; }
.fcchat-stream.fcchat-flow-bottom{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
}
.fcchat-stream.fcchat-flow-bottom > .fcchat-line{
  width:100%;
}

/* remove per-message separators */
.fcchat-line{
  padding:6px 8px;
  border-bottom:1px solid #161616;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.fcchat-time-right{
  margin-left:auto;
}


/* V1.7: time more visible */
.fcchat-time-right{
  margin-left:auto;
}


/* V1.8: stronger time visibility */
.fcchat-time-right{
  margin-left:auto;
}


/* V1.9: UI font size control applies to stream */
.fcchat-stream{ font-size:14px; }


/* V1.10: Bold button active state */
.fcchat-toolbar button.active,
.fcchat-toolbar button.active:hover {
  background-color: #6a2bd9 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}


/* V1.11: keep hover look when Bold is active (generic, theme-proof) */
.fcchat-btn.active,
.fcchat-btn.active:hover{
  filter: brightness(1.12) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28) !important;
}


/* V1.12: force hover + active to same color (Flatcast style) */
.fcchat-toolbar .fcchat-btn:hover,
.fcchat-toolbar .fcchat-btn.active,
.fcchat-toolbar .fcchat-btn.active:hover{
  background-color:#d9a7ff !important;
  filter:none !important;
}
/* ultra soft divider - force override */
.fcchat-stream .fcchat-line{
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px rgba(0,0,0,0.008) !important;
}


/* Admin bar (only visible for admin) */
.fcchat-adminbar{
  display:flex;
  gap:6px;
  padding:6px 6px 2px 6px;
  align-items:center;
}
/* Respect the HTML [hidden] attribute (otherwise CSS overrides UA styles) */
.fcchat-adminbar[hidden]{
  display:none !important;
}
.fcchat-adminbtn{
  width:26px;height:26px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.25);
  color:inherit;
  cursor:pointer;
  font-size:14px;
  line-height:1;
}
.fcchat-adminbtn:hover{ filter:brightness(1.1); }
.fcchat-systemline{ text-align:center; }

/* Flatcast-style admin dropdown menu (settings) */
.fcchat-fcmenu{
  position:absolute;
  z-index:10060;
  width:210px;
  background:#ececec;
  color:#111;
  border:1px solid #9a9a9a;
  border-radius:3px;
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
  padding:4px 0;
  margin:0;
  list-style:none;
  font:12px/1.2 Arial, Helvetica, sans-serif;
}
.fcchat-fcmenu[hidden]{ display:none !important; }
.fcchat-fcmenu li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.fcchat-fcmenu li:hover{ background:#dcdcdc; }
.fcchat-fcmenu .fcchat-fcmenu-check{
  width:16px;
  text-align:center;
  color:#111;
  font-weight:700;
  flex:0 0 auto;
}
.fcchat-fcmenu .fcchat-fcmenu-check.is-off{ color:transparent; }
.fcchat-fcmenu .fcchat-fcmenu-label{ flex:1 1 auto; }
.fcchat-fcmenu .fcchat-fcmenu-sep{
  height:1px;
  background:#c7c7c7;
  margin:4px 6px;
}
.fcchat-fcmenu .fcchat-fcmenu-lang{
  justify-content:flex-end;
  gap:6px;
  font-weight:700;
  cursor:default;
}
.fcchat-fcmenu .fcchat-fcmenu-lang button{
  background:transparent;
  border:0;
  padding:0 2px;
  cursor:pointer;
  font:inherit;
  color:#111;
}
.fcchat-fcmenu .fcchat-fcmenu-lang button.is-active{
  text-decoration:underline;
}
.fcchat-fcmenu .fcchat-fcmenu-help{
  padding:6px 10px 8px 10px;
  color:#222;
  font-size:12px;
  line-height:1.3;
  cursor:default;
  white-space:normal;
  word-break:break-word;
}

/* Draggable popup */
.fcchat-pop{
  position:fixed;
  top:120px;
  left:120px;
  width:320px;
  max-width:92vw;
  background:rgba(25,25,25,0.95);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  /* Keep Design Tool above edit overlays across browsers */
  z-index:10050;
  color:#fff;
}
/* Respect the HTML [hidden] attribute */
.fcchat-pop[hidden]{
  display:none !important;
}
.fcchat-pop-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px 8px 12px;
  cursor:move;
  user-select:none;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.fcchat-pop-title{ font-weight:700; font-size:14px; }
.fcchat-pop-close{
  width:28px;height:28px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(0,0,0,0.25);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.fcchat-pop-body{ padding:10px 12px 12px 12px; }
.fcchat-pop-section{ margin-bottom:10px; }
.fcchat-pop-label{ font-size:12px; opacity:0.9; margin-bottom:6px; }
.fcchat-theme-list{ display:flex; flex-wrap:wrap; gap:6px; }
.fcchat-theme-item, .fcchat-enter-edit{
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);
  color:#fff;
  padding:6px 10px;
  cursor:pointer;
  font-size:12px;
}
.fcchat-enter-edit{ width:100%; padding:8px 10px; font-size:13px; }
.fcchat-pop-hint{ font-size:11px; opacity:0.75; }

/* Flatcast 4.15-like Design Tool window (visual-only for now) */
.fcchat-designpop{
  width:420px;
  min-width:300px;
  max-width:94vw;
  min-height:320px;
  background:#f3f3f3;
  color:#111;
  border:1px solid #8a8a8a;
  border-radius:2px;
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
}
.fcchat-designpop .fcchat-pop-header{
  padding:6px 8px;
  background:linear-gradient(#e9eef7,#cfd8ea);
  border-bottom:1px solid #9aa6bf;
}
.fcchat-designpop .fcchat-pop-title{ font-weight:600; font-size:13px; color:#111; }
.fcchat-designpop .fcchat-pop-close{
  width:22px;height:22px;
  border-radius:2px;
  border:1px solid #9aa6bf;
  background:linear-gradient(#f7f7f7,#dfdfdf);
  color:#222;
}
.fcchat-designpop .fcchat-pop-body{ padding:8px; }

/* v177: Make Design Tool popup content truly responsive to window resize (no "two layers") */
.fcchat-designpop{
  display:flex;
  flex-direction:column;
  /* allow internal flex children to shrink/grow when user resizes */
}

.fcchat-designpop .fcchat-pop-header{ flex:0 0 auto; }

/* each view should fill remaining popup height */
.fcchat-designpop .fcchat-dt-view{
  flex:1 1 auto;
  min-height:0;
}

/* THEME view (simple) */
.fcchat-dt-view-theme .fcchat-dt-body{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

/* FULL view (classic) */
.fcchat-dt-view-full{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.fcchat-dt-view-full .fcchat-dt-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Theme list area should expand/shrink with popup height */
.fcchat-dt-listwrap{
  flex:1 1 auto;
  height:auto;          /* override old fixed height */
  min-height:140px;     /* keep usable */
  overflow:auto;
}

/* Keep bottom actions reachable */
.fcchat-dt-theme-actions{ margin-top:auto; }


.fcchat-dt-menubar{
  display:flex;
  gap:16px;
  padding:4px 10px;
  font-size:12px;
  background:#efefef;
  border-bottom:1px solid #c9c9c9;
  user-select:none;
  /* Ensure hover submenus can stack above the toolbar row below */
  position:relative;
  z-index:5;
}
.fcchat-dt-menuitem{ opacity:0.85; }
.fcchat-dt-presetmenu{ position:relative; cursor:pointer; }
.fcchat-dt-presets-submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:0;
  min-width:160px;
  padding:2px 0;
  background:rgba(255,255,255,0.98);
  border:1px solid #c9c9c9;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  z-index:20;
}
.fcchat-dt-presetsub-item{
  width:100%;
  text-align:left;
  padding:6px 10px;
  background:transparent;
  border:0;
  font-size:12px;
  color:#111;
  cursor:default;
}
.fcchat-dt-presetsub-item:hover{
  background:#cfe0ff;
}
.fcchat-dt-presetsub-sep{
  height:1px;
  background:#bdbdbd;
  margin:4px 6px;
}

/* Background hover menu (Flatcast-like) */
.fcchat-dt-bgmenu{ position:relative; }
.fcchat-dt-bgmenu{ cursor:pointer; }
.fcchat-dt-bgsubmenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:0; /* IMPORTANT: no gap so you can move mouse to submenu */
  padding:2px 0;
  background:rgba(255,255,255,0.98);
  border:1px solid #c9c9c9;
  border-radius:4px;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  /* Must overlay the toolbar buttons below (some browsers create a stacking context) */
  z-index:100000;
  white-space:nowrap;
  min-width:84px;
}
.fcchat-dt-bgsubmenu[hidden]{
  display:none !important;
}
.fcchat-dt-bgmenu:hover .fcchat-dt-bgsubmenu{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.fcchat-dt-bgbtn{
  display:block;
  width:100%;
  padding:6px 10px;
  border:0;
  background:transparent;
  border-radius:0;
  font-size:12px;
  cursor:pointer;
  text-align:left;
}
.fcchat-dt-bgbtn:hover{ background:#f0f0f0; }

/* Floating background URL bar (top overlay area) */
.fcchat-bgurlbar{
  position:fixed;
  top:8px;
  right:12px;
  z-index:100000;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  background:rgba(0,0,0,0.65);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:6px;
}
.fcchat-bgurlbar[hidden]{
  display:none !important;
}
.fcchat-bgurlbar-label{ color:#fff; font-size:12px; opacity:0.9; }
.fcchat-bgurlbar-input{
  width:420px;
  max-width:calc(100vw - 60px);
  padding:4px 8px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.92);
  font-size:12px;
}

.fcchat-dt-toolbar{
  display:flex;
  gap:6px;
  padding:6px 10px;
  background:#f7f7f7;
  border-bottom:1px solid #c9c9c9;
  position:relative;
  z-index:1;
}
.fcchat-dt-tool{
  width:26px;height:26px;
  border-radius:2px;
  border:1px solid #bdbdbd;
  background:linear-gradient(#ffffff,#e9e9e9);
  font-size:14px;
  line-height:1;
  opacity:0.7;
}
.fcchat-dt-tool:disabled{ cursor:not-allowed; }

.fcchat-dt-body{ padding:10px; }
.fcchat-dt-current{
  font-size:13px;
  font-weight:600;
  padding:6px 8px;
  border:1px solid #bdbdbd;
  background:#fff;
  margin-bottom:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fcchat-dt-search{
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  border:1px solid #bdbdbd;
  border-radius:2px;
  margin-bottom:8px;
  font-size:12px;
  background:#fff;
}
.fcchat-dt-listwrap{
  border:1px solid #bdbdbd;
  background:#fff;
  height:220px;
  overflow:auto;
}
.fcchat-dt-list{ padding:0; margin:0; }
.fcchat-theme-item{
  padding:6px 8px;
  font-size:12px;
  border-bottom:1px solid #f0f0f0;
  cursor:pointer;
}
.fcchat-theme-item:last-child{ border-bottom:none; }
.fcchat-theme-item.is-selected{
  background:#2b66d9;
  color:#fff;
}
.fcchat-theme-item.is-hidden{ display:none; }

.fcchat-dt-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-top:10px;
}
.fcchat-dt-marker-title{ font-size:12px; margin-bottom:4px; opacity:0.9; }
.fcchat-dt-marker-row{ display:flex; align-items:center; gap:6px; }
.fcchat-dt-marker-dot{ width:16px;height:16px; border-radius:50%; background:#d92b2b; border:1px solid #9a9a9a; display:inline-block; }
.fcchat-dt-smallbtn{
  width:22px;height:22px;
  border-radius:2px;
  border:1px solid #bdbdbd;
  background:linear-gradient(#ffffff,#e9e9e9);
  font-size:11px;
  opacity:0.7;
}
.fcchat-dt-clear{
  padding:4px 10px;
  border-radius:2px;
  border:1px solid #bdbdbd;
  background:linear-gradient(#ffffff,#e9e9e9);
  opacity:0.7;
}
.fcchat-dt-actions{ display:flex; gap:8px; }
.fcchat-dt-presets-wrap{ position:relative; display:inline-flex; }
.fcchat-dt-presets-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 6px);
  min-width:160px;
  padding:4px 0;
  background:#f3f3f3;
  border:1px solid #a8a8a8;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  z-index:20;
}
.fcchat-dt-preset-item{
  width:100%;
  text-align:left;
  padding:6px 10px;
  background:transparent;
  border:0;
  font-size:12px;
  color:#111;
  cursor:default;
}
.fcchat-dt-preset-item:hover{
  background:#cfe0ff;
}
.fcchat-dt-preset-sep{
  height:1px;
  background:#bdbdbd;
  margin:4px 6px;
}
.fcchat-dt-actionbtn{
  padding:6px 12px;
  border-radius:2px;
  border:1px solid #bdbdbd;
  background:linear-gradient(#ffffff,#e9e9e9);
  opacity:0.7;
}
.fcchat-designpop .fcchat-pop-hint{ color:#222; opacity:0.7; margin-top:8px; }


/* --- v128: Flatcast-like window polish (keep draggable, remove resize) --- */
/* Disable resize (user asked to optionally turn it off) */
.fcchat-designpop{
  resize: none;
  overflow: visible;
}

/* Keep content visible without looking "disabled/invisible" even if the theme overrides disabled buttons */
.fcchat-designpop button:disabled{
  opacity: 0.75 !important;
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
}

/* close button: cleaner */
.fcchat-designpop .fcchat-pop-close{
  width:26px;height:26px;
  line-height:24px;
  border-radius:4px !important;
  border:1px solid #7e8aa3 !important;
  background:linear-gradient(#ffffff,#e9e9e9) !important;
  color:#222 !important;
  font-size:18px;
  font-weight:700;
  opacity:1;
}
.fcchat-designpop .fcchat-pop-close:hover{ filter:brightness(0.97); }

/* --- Design Tool: 2 ekran (Tema / Tam Panel) --- */
.fcchat-dt-view[hidden]{ display:none !important; }

/* Theme list readability: some WP themes force white text. Keep Design Tool list always readable. */
.fcchat-designpop .fcchat-dt-list{
  background:#fff !important;
  color:#111 !important;
}
.fcchat-designpop .fcchat-theme-item{
  color:#111 !important;
}
.fcchat-designpop .fcchat-theme-item.is-selected{
  color:#fff !important;
}
.fcchat-designpop .fcchat-dt-current{
  color:#111 !important;
}

/* FULL view editable theme name input should look like a normal text field */
.fcchat-designpop .fcchat-dt-current-input{
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  margin:0 0 8px 0;
  border:1px solid #bdbdbd;
  border-radius:4px;
  background:#fff;
  font-size:13px;
}

/* Tema ekranında sadece liste+tek buton görünür */
.fcchat-dt-view-theme .fcchat-dt-body{ padding:10px; }
.fcchat-dt-theme-actions{ margin-top:10px; }
.fcchat-dt-view-theme .fcchat-dt-actionbtn{
  width:160px;
  height:44px;
  border-radius:4px;
}

/* force square-ish buttons even if theme applies pill styles */
.fcchat-designpop .fcchat-dt-tool,
.fcchat-designpop .fcchat-dt-smallbtn,
.fcchat-designpop .fcchat-dt-clear,
.fcchat-designpop .fcchat-dt-actionbtn{
  border-radius:6px !important;
  background:linear-gradient(#ffffff,#e9e9e9) !important;
  border:1px solid #bdbdbd !important;
  color:#222 !important;
  box-shadow:none !important;
  text-transform:none !important;
}

/* toolbar tools: a bit bigger for nicer icons */
.fcchat-designpop .fcchat-dt-tool{
  width:30px;height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  padding:0;
  opacity:0.9;
}

/* marker arrows should stay readable even when disabled */
.fcchat-designpop .fcchat-dt-smallbtn{
  font-size:12px;
  line-height:20px;
  text-align:center;
}

/* footer buttons: prevent wrapping like "CLE\nAR" */
.fcchat-designpop .fcchat-dt-clear{
  padding:6px 12px;
  font-size:12px;
  white-space:nowrap;
}
.fcchat-designpop .fcchat-dt-actionbtn{
  padding:8px 14px;
  font-size:12px;
  white-space:nowrap;
  min-width:110px;
  text-align:center;
}

/* when window is too small, keep layout sane */
.fcchat-designpop .fcchat-dt-footer{ flex-wrap:wrap; }

/* --- v131: stronger contrast for toolbar + close X (force override against theme CSS) --- */

/* Make toolbar icons and footer labels slightly more visible while keeping disabled feel */
.fcchat-designpop .fcchat-dt-tool,
.fcchat-designpop .fcchat-dt-smallbtn,
.fcchat-designpop .fcchat-dt-clear,
.fcchat-designpop .fcchat-dt-actionbtn{
  opacity: 1 !important; /* themes sometimes double-dim disabled buttons */
}

/* Disabled buttons: readable but still muted */
.fcchat-designpop button:disabled,
.fcchat-designpop .fcchat-dt-tool:disabled,
.fcchat-designpop .fcchat-dt-smallbtn:disabled,
.fcchat-designpop .fcchat-dt-clear:disabled,
.fcchat-designpop .fcchat-dt-actionbtn:disabled{
  opacity: 0.88 !important;
  color: #333 !important;
  -webkit-text-fill-color: #333 !important;
  filter: none !important;
}

/* Toolbar icon buttons: darker border + icon */
.fcchat-designpop .fcchat-dt-tool{
  border-color:#9d9d9d !important;
  color:#111 !important;
}

/* Footer text buttons: slightly darker text */
.fcchat-designpop .fcchat-dt-clear,
.fcchat-designpop .fcchat-dt-actionbtn{
  color:#222 !important;
  border-color:#a6a6a6 !important;
}

/* Close button (X): guarantee visibility across themes */
.fcchat-designpop .fcchat-pop-header .fcchat-pop-close{
  width:28px !important;
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  border:1px solid #6b7896 !important;
  background:linear-gradient(#ffffff,#dfe6f6) !important;
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  font-size:20px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-shadow:0 1px 0 rgba(255,255,255,0.85) !important;
  opacity:1 !important;
}
.fcchat-designpop .fcchat-pop-header .fcchat-pop-close:hover{
  filter:brightness(0.97) !important;
}


/* v132: Square icon style for topbar & adminbar (Flatcast-like) */
.fcchat-topbar .fcchat-btn,
.fcchat-topbar .fcchat-login,
.fcchat-adminbar .fcchat-adminbtn{
  width:32px !important;
  height:32px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:4px !important;
  background:#f3f3f3 !important;
  border:1px solid #c7c7c7 !important;
  color:#111 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;
  line-height:1 !important;
}

.fcchat-topbar .fcchat-btn b,
.fcchat-topbar .fcchat-btn i{
  color:inherit !important;
}

.fcchat-topbar .fcchat-color{
  width:32px !important;
  height:32px !important;
  padding:0 !important;
  border-radius:4px !important;
  border:1px solid #c7c7c7 !important;
  background:#f3f3f3 !important;
}

/* Keep "Login" readable even if wider */
.fcchat-topbar .fcchat-login{
  width:auto !important;
  min-width:60px !important;
  padding:0 10px !important;
  font-weight:700 !important;
}

/* Disabled-looking but visible (placeholders) */
.fcchat-adminbar .fcchat-adminbtn:not([data-admin-action="design"]):not([data-admin-action="themes"]){
  opacity:0.75 !important;
}

/* Slight spacing alignment */
.fcchat-toolbar-horizontal{ gap:8px !important; }
.fcchat-adminbar{ gap:8px !important; }

/* --- Edit Mode overlay (draft) --- */
.fcchat-root{ position: relative; }
.fcchat-root.is-editmode{ cursor: crosshair; }

/* Login trigger area (proxy)
   - Always present in DOM so guests can click it
   - Visually highlighted only in edit mode (via overlay or this subtle fill) */
.fcchat-login-proxy{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 64px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}

/* Bold (B) trigger area (proxy)
   - Always present in DOM so guests can click it
   - Highlighted only in edit mode */
.fcchat-bold-proxy{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}


/* Strikethrough (S) trigger area (proxy)
   - Always present in DOM so guests can click it
   - Highlighted only in edit mode
   - Default: stacked above Underline */
.fcchat-strike-proxy{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}

/* Underline (U) trigger area (proxy)
   - Always present in DOM so guests can click it
   - Highlighted only in edit mode
   - Default: stacked above Italic */
.fcchat-underline-proxy{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}

/* Italic (I) trigger area (proxy)
   - Always present in DOM so guests can click it
   - Highlighted only in edit mode
   - Default: stacked above Bold (uses Bold vars as fallback) */
.fcchat-italic-proxy{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}
.fcchat-italic-proxy.is-on{
  background: rgba(180, 180, 180, 0.35);
  border-radius: 4px;
}
/* Font size Bigger (+) trigger area (proxy)
   - Always present in DOM so guests can click it
   - Highlighted only in edit mode
   - Default: stacked above Bold */
.fcchat-bigger-proxy{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}
.fcchat-bold-proxy.is-on,
.fcchat-underline-proxy.is-on,
.fcchat-strike-proxy.is-on{
  background: rgba(180, 180, 180, 0.35);
  border-radius: 4px;
}

/* Font size Smaller (-) trigger area (proxy)
   - Always present in DOM so guests can click it
   - Highlighted only in edit mode
   - Default: stacked above Bigger */
.fcchat-smaller-proxy{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}


/* Sound (Mute) trigger area (proxy) */
.fcchat-sound-proxy{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}


/* Color picker trigger area (proxy) */
.fcchat-color-proxy{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}

/* Emoji / İfadeler trigger area (proxy) */
.fcchat-emoji-proxy{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  z-index: 60;
  min-width: 6px;
  min-height: 6px;
}

/* Chrome-safe: make the real <input type=color> fill the proxy.
   - It's visually invisible
   - But it receives the real user click, so the picker opens reliably */
.fcchat-color-proxy .fcchat-color{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}

/* Backward compat: if any code still creates .fcchat-color-hidden, keep it inert but present */
.fcchat-color-hidden{
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fcchat-root.is-editmode .fcchat-login-proxy{
  /* give the editor something to see even if overlay is toggled */
  background: rgba(0,0,0,0.10);
}

.fcchat-root.is-editmode .fcchat-bold-proxy{
  background: rgba(0,0,0,0.10);
}

.fcchat-root.is-editmode .fcchat-underline-proxy{
  background: rgba(0,0,0,0.10);
}

.fcchat-root.is-editmode .fcchat-italic-proxy{
  background: rgba(0,0,0,0.10);
}

/* Hide topbar guest/status text (system label not needed) */
.fcchat-toolbar .fcchat-guest,
.fcchat-toolbar .fcchat-status{
  display: none;
}

/* Design Tool context menu (edit mode) */
.fcchat-dt-ctx{
  position: fixed;
  z-index: 100000;
  background: #f4f4f4;
  border: 1px solid #c8c8c8;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  font-size: 12px;
  color: #111;
  min-width: 180px;
}
.fcchat-dt-ctx-list,
.fcchat-dt-ctx-sub{
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.fcchat-dt-ctx-list > li,
.fcchat-dt-ctx-sub > li{
  position: relative;
  padding: 6px 26px 6px 10px;
  cursor: default;
  white-space: nowrap;
}
.fcchat-dt-ctx-list > li:hover,
.fcchat-dt-ctx-sub > li:hover{
  background: #e8e8e8;
}
.fcchat-dt-ctx-list > li.is-disabled,
.fcchat-dt-ctx-sub > li.is-disabled{
  color: #9a9a9a;
  background: transparent;
  pointer-events: none;
}
.fcchat-dt-ctx-list > li.sep{
  padding: 0;
  margin: 4px 0;
  border-top: 1px solid #d6d6d6;
}
.fcchat-dt-ctx-arrow{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #666;
}
.fcchat-dt-ctx-check{
  display: inline-block;
  width: 12px;
  margin-right: 6px;
  color: #2d6cdf;
}
.fcchat-dt-ctx-sub{
  display: none;
  position: absolute;
  left: 100%;
  top: -4px;
  background: #f4f4f4;
  border: 1px solid #c8c8c8;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  min-width: 160px;
}
.fcchat-dt-ctx-list > li.has-sub:hover > .fcchat-dt-ctx-sub{
  display: block;
}
.fcchat-dt-ctx-sub > li.has-sub:hover > .fcchat-dt-ctx-sub{
  display: block;
}

/* Custom text blocks (Design Tool) */
.fcchat-text-layer{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.fcchat-pic-layer{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.fcchat-url-layer{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.fcchat-custom-pic{
  position: absolute;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.fcchat-custom-pic img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.fcchat-custom-url{
  position: absolute;
  display: block;
  pointer-events: auto;
  cursor: pointer;
}
.fcchat-root:not(.is-editmode) .fcchat-custom-url{
  pointer-events: none;
}
.fcchat-url-label{
  display: none;
  color: #ffffff;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.fcchat-root.is-editmode .fcchat-url-label{
  display: block;
}
.fcchat-url-editor{
  position: absolute;
  z-index: 100001;
  background: #111;
  color: #fff;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
.fcchat-custom-text{
  position: absolute;
  color: #ffffff;
  font-size: 24px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.fcchat-custom-text-inner{
  display: inline-block;
  white-space: nowrap;
  transform: translateX(0);
}
.fcchat-text-editor{
  position: absolute;
  z-index: 100001;
  background: #111;
  color: #fff;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 16px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
.fcchat-text-size-editor{
  position: absolute;
  z-index: 100001;
  background: #ffffff;
  color: #111;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 16px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
.fcchat-text-speed-editor{
  position: absolute;
  z-index: 100001;
  background: #ffffff;
  color: #111;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 14px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

.fcchat-text-color-editor{
  position: absolute;
  z-index: 100001;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  background: #fff;
}

.fcchat-edit-box[data-edit-key^="text:"] .fcchat-edit-label{
  top: -16px;
}
.fcchat-root.is-editmode .fcchat-bigger-proxy{
  background: rgba(0,0,0,0.10);
}

.fcchat-root.is-editmode .fcchat-smaller-proxy{
  background: rgba(0,0,0,0.10);
}


.fcchat-root.is-editmode .fcchat-sound-proxy{
  background: rgba(0,0,0,0.10);
}

.fcchat-root.is-editmode .fcchat-color-proxy{
  background: rgba(0,0,0,0.10);
}

.fcchat-root.is-editmode .fcchat-emoji-proxy{
  background: rgba(0,0,0,0.10);
}

.fcchat-edit-overlay{
  position: absolute;
  inset: 0;
  /* Keep slightly below Design Tool popup */
  z-index: 9998;
}
.fcchat-edit-overlay[hidden]{ display:none !important; }

.fcchat-edit-box{
  position: absolute;
  /* Thin visible outline, Flatcast-like */
  border: 1px solid rgba(0, 200, 160, 0.9);
  box-sizing: border-box;
  background: transparent;
}
.fcchat-edit-label{
  position: absolute;
  /* Keep label INSIDE the edit box so it doesn't drift away when resized small */
  top: 2px;
  left: 2px;
  padding: 2px 6px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(0, 200, 160, 0.9);
  max-width: calc(100% - 8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fcchat-edit-resize{
  position: absolute;
  /* Invisible but easy-to-grab hit areas (the outline stays thin) */
  background: transparent;
  border: 0;
  z-index: 2;
}

/* Full-edge handles: 4 edges + 4 corners */
/* Edges */
.fcchat-edit-resize-n,
.fcchat-edit-resize-s{
  left: 0;
  right: 0;
  height: 12px;
}
.fcchat-edit-resize-n{ top: -6px; cursor: ns-resize; }
.fcchat-edit-resize-s{ bottom: -6px; cursor: ns-resize; }

.fcchat-edit-resize-e,
.fcchat-edit-resize-w{
  top: 0;
  bottom: 0;
  width: 12px;
}
.fcchat-edit-resize-e{ right: -6px; cursor: ew-resize; }
.fcchat-edit-resize-w{ left: -6px; cursor: ew-resize; }

/* Corners */
.fcchat-edit-resize-ne,
.fcchat-edit-resize-nw,
.fcchat-edit-resize-se,
.fcchat-edit-resize-sw{
  width: 16px;
  height: 16px;
}
.fcchat-edit-resize-ne{ top: -8px; right: -8px; cursor: nesw-resize; }
.fcchat-edit-resize-nw{ top: -8px; left: -8px; cursor: nwse-resize; }
.fcchat-edit-resize-se{ bottom: -8px; right: -8px; cursor: nwse-resize; }
.fcchat-edit-resize-sw{ bottom: -8px; left: -8px; cursor: nesw-resize; }


/* Scrollbar mock (visual only) */
.fcchat-scrollbar-mock{
  position: absolute;
  right: 10px;
  top: 44px;
  width: 12px;
  height: 180px;
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 2px;
  pointer-events: auto;
  z-index: 6000;
  user-select: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fcchat-scrollbar-btn{
  height: 14px;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fcchat-scrollbar-btn::before{
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.fcchat-scrollbar-up::before{
  border-bottom: 6px solid rgba(255,255,255,0.8);
}
.fcchat-scrollbar-down::before{
  border-top: 6px solid rgba(255,255,255,0.8);
}
.fcchat-scrollbar-track{
  flex: 1 1 auto;
  position: relative;
  background: var(--fcchat-scroll-track-bg, rgba(0,0,0,0.2));
}
.fcchat-scrollbar-thumb{
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  height: 12px;
  max-height: 100%;
  min-height: 0;
  background: var(--fcchat-scroll-thumb-bg, rgba(255,255,255,0.45));
  border-radius: 2px;
}

/* Edit mode: make the scrollbar mock obvious and keep it above other layers */
.fcchat-root.is-editmode .fcchat-scrollbar-mock,
.fcchat-draft-on .fcchat-scrollbar-mock{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.45);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
  opacity: 1;
  z-index: 6000;
}
.fcchat-root.is-editmode .fcchat-scrollbar-mock{
  pointer-events: none;
}

.fcchat-scrollbar-mock .fcchat-scrollbar-track,
.fcchat-scrollbar-mock .fcchat-scrollbar-thumb{
  pointer-events: auto;
  user-select: none;
}

.fcchat-root.is-editmode .fcchat-scrollbar-mock::after,
.fcchat-draft-on .fcchat-scrollbar-mock::after{
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 16px;
  bottom: 16px;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
  pointer-events: none;
}

/* Design Tool footer button state */
.fcchat-dt-editmode.is-disabled,
.fcchat-dt-editmode[aria-disabled="true"]{
  opacity: 0.45;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* === v176: Tool popup edge resize + header wrap fixes === */
.fcchat-designpop{ position: fixed; }
.fcchat-designpop .fcchat-pop-rz{
  position:absolute;
  z-index: 10060;
  background: transparent;
}
/* edges */
.fcchat-designpop .fcchat-pop-rz-n,
.fcchat-designpop .fcchat-pop-rz-s{
  left:0; right:0;
  height:12px;
}
.fcchat-designpop .fcchat-pop-rz-n{ top:-6px; cursor: ns-resize; }
.fcchat-designpop .fcchat-pop-rz-s{ bottom:-6px; cursor: ns-resize; }

.fcchat-designpop .fcchat-pop-rz-e,
.fcchat-designpop .fcchat-pop-rz-w{
  top:0; bottom:0;
  width:12px;
}
.fcchat-designpop .fcchat-pop-rz-e{ right:-6px; cursor: ew-resize; }
.fcchat-designpop .fcchat-pop-rz-w{ left:-6px; cursor: ew-resize; }

/* corners */
.fcchat-designpop .fcchat-pop-rz-ne,
.fcchat-designpop .fcchat-pop-rz-nw,
.fcchat-designpop .fcchat-pop-rz-se,
.fcchat-designpop .fcchat-pop-rz-sw{
  width:16px; height:16px;
}
.fcchat-designpop .fcchat-pop-rz-ne{ top:-8px; right:-8px; cursor: nesw-resize; }
.fcchat-designpop .fcchat-pop-rz-nw{ top:-8px; left:-8px; cursor: nwse-resize; }
.fcchat-designpop .fcchat-pop-rz-se{ bottom:-8px; right:-8px; cursor: nwse-resize; }
.fcchat-designpop .fcchat-pop-rz-sw{ bottom:-8px; left:-8px; cursor: nesw-resize; }

/* prevent top menus from overflowing when popup is narrow */
.fcchat-designpop .fcchat-dt-menubar,
.fcchat-designpop .fcchat-dt-toolbar{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* prevent text selection during drag/resize */
body.fcchat-no-select{ user-select:none; -webkit-user-select:none; }


/* === v181: Userlist collapse (Flatcast-like) === */
.fcchat-guestlist{
  overflow-y:auto;
  overflow-x:hidden;
}
.fcchat-guestitem{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}
.fcchat-guestitem *{
  white-space:nowrap;
}
.fcchat-guests.is-narrow .fcchat-guestlist{
  overflow:hidden; /* no scrollbars when panel is intentionally narrowed */
}
.fcchat-guests.is-collapsed{
  opacity:0 !important;
  pointer-events:none !important;
}

/* When chat text panel is collapsed to (almost) zero, hide it in LIVE */
.fcchat-stream.is-collapsed{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === v182: Force LIVE userlist to CLIP (no wrap, no scroll) when narrowed/collapsed === */
/* We scope most rules to .fcchat-guests.is-narrow so normal guest list keeps scrolling. */
.fcchat-guests.is-narrow .fcchat-panel-title{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.fcchat-guests.is-narrow .fcchat-guestlist{
  overflow: hidden !important; /* never show scrollbars in narrow mode */
  padding: 6px !important;
}

.fcchat-guests.is-narrow .fcchat-guestitem{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  min-width: 0 !important;
  writing-mode: horizontal-tb !important;
}

.fcchat-guests.is-narrow .fcchat-guestitem *{
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
}

/* When fully collapsed (almost zero), hide the entire panel in LIVE. */
.fcchat-guests.is-collapsed{
  opacity: 0 !important;
  pointer-events: none !important;
}


/*
  v204 — Textbox: keep the REAL textbox area clean (no green gap/overlay).
  NOTE: The edit overlay box itself must remain visible in Edit Mode, otherwise
  users can move/resize but won't SEE the change in the design view.
*/
/* Hide textbox overlay visuals by default (overlay is hidden anyway outside edit mode) */
.fcchat-edit-box[data-edit-key="textbox"]{
  border-color: transparent !important;
}
.fcchat-edit-box[data-edit-key="textbox"] .fcchat-edit-label{
  display:none !important;
}
/* Show a light dashed outline for the textbox overlay ONLY while editing */
.fcchat-root.is-editmode .fcchat-edit-box[data-edit-key="textbox"]{
  border-color: rgba(0, 255, 255, 0.55) !important;
  border-style: dashed !important;
  background: transparent !important;
}
.fcchat-root.is-editmode .fcchat-edit-box[data-edit-key="textbox"] .fcchat-edit-label{
  display:block !important;
}

/* Make textbox wrapper match textarea exactly (no extra gap/flex growth) */
.fcchat-inputwrap{
  gap:0 !important;
  flex: 0 0 auto !important;
  padding:0 !important;
  margin:0 !important;
}
.fcchat-input{
  flex: 0 0 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}


/* ============================================================
   Admin Panel (Stage 1) - modern draggable panel (admin/edit only)
   ============================================================ */
.fcchat-noselect, .fcchat-noselect *{
  user-select: none !important;
}

.fcchat-adminpanel{
  position: absolute;
  left: 16px;
  top: 54px;
  width: 320px;
  max-width: calc(100% - 24px);
  background: rgba(35,36,39,0.92);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  z-index: 999999;
  color: rgba(237,237,237,0.96);
  backdrop-filter: blur(6px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
  min-/* PATCH-024: make panel taller (more content visible) */
  height: 520px;
}

.fcchat-adminpanel-body{
  overflow-y: auto;
  padding-bottom: 10px;
}

.fcchat-adminpanel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  cursor: move;
}

.fcchat-adminpanel-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: none;
}

.fcchat-adminpanel-close{
  width: 30px;
  height: 28px;
  line-height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(42,44,48,0.85);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
}
.fcchat-adminpanel-close:hover{
  background: rgba(0, 212, 170, 0.14);
  border-color: rgba(0, 212, 170, 0.55);
}

.fcchat-adminpanel-body{
  padding: 12px;
  display: grid;
  gap: 12px;
}

.fcchat-adminpanel-section{
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(42,44,48,0.65);
  border-radius: 12px;
}

.fcchat-adminpanel-section-title{
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  color: rgba(0,212,170,0.95);
  letter-spacing: 0.4px;
}

.fcchat-adminpanel-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: 13px;
  color: rgba(237,237,237,0.90);
  cursor: pointer;
}

.fcchat-adminpanel-item input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: rgb(0, 212, 170);
}

.fcchat-adminpanel-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
}

.fcchat-adminpanel-volume{
  margin-top: 8px;
  padding: 8px 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(30,31,34,0.65);
  border-radius: 10px;
}

.fcchat-adminpanel-volume-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(207,207,207,0.95);
  margin-bottom: 6px;
}

.fcchat-adminpanel-volume-val{
  font-variant-numeric: tabular-nums;
  color: rgba(237,237,237,0.92);
}

.fcchat-adminpanel-slider{
  width: 100%;
  height: 20px;
  background: transparent;
  accent-color: rgb(0, 212, 170);
}

/* Keep slider modern but low-risk across browsers */
.fcchat-adminpanel-slider:focus{ outline: none; }

.fcchat-adminpanel-foot{
  margin-top: 4px;
}
.fcchat-adminpanel-hint{
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}

/* Detached radio widget (admin/design only)
   NOTE: This is a helper overlay and will be integrated with draggable layers later. */
.fcchat-radio-widget{
  position: absolute;
  left: 420px;
  top: 180px;
  width: 280px;
  min-width: 220px;
  min-height: 120px;
  background: rgba(35,36,39,0.92);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  z-index: 999998;
  resize: both;
  overflow: auto;
}
.fcchat-radio-widget-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-weight: 700;
  cursor: move;
}
.fcchat-radio-widget-title{
  color: rgba(0,212,170,0.95);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.fcchat-radio-widget-close{
  width: 20px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
}
.fcchat-radio-widget-close:hover{
  background: rgba(0, 212, 170, 0.14);
  border-color: rgba(0, 212, 170, 0.55);
}
.fcchat-radio-widget-body{
  padding: 0 12px 12px;
}
.fcchat-radio-widget-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.fcchat-radio-widget-btn{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.fcchat-radio-widget-btn:hover{
  border-color: rgba(0, 212, 170, 0.55);
}
.fcchat-radio-widget-slider{
  flex: 1;
  height: 4px;
  accent-color: rgb(0, 212, 170);
}


/* ===== V185 EMBED RESPONSIVE OVERRIDE =====
   When used inside an iframe (/?fc_chat=1), make the chat fill the iframe.
   This allows width/height changes on the iframe to resize the chat without cropping.
*/
.fcchat-embed .fcchat-root{
  width:100% !important;
  height:100% !important;
  min-width:500px;
  min-height:300px;
  max-width:none !important;
  max-height:none !important;
  display:flex;
  flex-direction:column;
}
.fcchat-embed .fcchat-main{
  flex:1 1 auto;
  height:auto !important;
  min-height:0;
}
.fcchat-embed .fcchat-guests,
.fcchat-embed .fcchat-chat{
  height:100% !important;
  min-height:0;
}
.fcchat-embed .fcchat-guestlist,
.fcchat-embed .fcchat-stream{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}


/* PATCH: remove label border/outline around edit labels (admin-only overlay) */
.fcchat-edit-label{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* PATCH-022: allow Color + Emoji proxies to shrink like others
   Problem: input[type=color] and some emoji shells impose intrinsic min-size in some browsers.
   Goal: let Design Tool resize down to the global proxy min (≈6px).
*/
#fcchat-color-proxy,
.fcchat-color-proxy,
#fcchat-emoji-proxy,
#fcchat-expressions-proxy,
.fcchat-emoji-proxy,
.fcchat-expressions-proxy{
  min-width: 6px !important;
  min-height: 6px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Color input inside proxy: remove UA min-size so the wrapper can shrink */
#fcchat-color-proxy input[type="color"],
.fcchat-color-proxy input[type="color"]{
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box;
}

/* In Design Tool (edit-mode) let drag/resize win over the native color input */
.fcchat-root.is-editmode #fcchat-color-proxy input[type="color"],
.fcchat-root.is-editmode .fcchat-color-proxy input[type="color"]{
  pointer-events: none !important;
}

/* In Live/Guest ensure it's clickable */
.fcchat-root:not(.is-editmode) #fcchat-color-proxy input[type="color"],
.fcchat-root:not(.is-editmode) .fcchat-color-proxy input[type="color"]{
  pointer-events: auto !important;
}

/* ============================================================
   Expressions/GIFs panel UI (WhatsApp/Facebook-like)
   ============================================================ */
.fcchat-emoji-pop[hidden]{
  display: none !important;
}
.fcchat-emoji-pop{
  position: fixed;
  left: 10px;
  top: 52px;
  /* PATCH-024: make panel narrower (doesn't cover top links) */
  width: 420px;
  max-width: calc(100vw - 20px);
  height: 520px;/* PATCH-026: taller panel */
  max-height: calc(100vh - 80px);
  z-index: 999999;
}
.fcchat-exp{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(20,20,20,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.fcchat-exp-head{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.fcchat-exp-mode{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.fcchat-exp-mode.is-on{
  background: rgba(255,255,255,0.18);
}
.fcchat-exp-search{
  flex: 1;
  min-width: 120px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: #fff;
  outline: none;
}
.fcchat-exp-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
}
.fcchat-exp-tabs{
  display: flex;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fcchat-exp-tab{
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.fcchat-exp-tab.is-on{
  background: rgba(255,255,255,0.18);
}
.fcchat-exp-body{
  flex: 1;
  min-height: 0;
}
.fcchat-exp-grid{
  padding: 10px;
  box-sizing: border-box;
  padding-right: 22px; /* PATCH-028: keep last column clickable under scrollbar */
  padding-bottom: 22px; /* PATCH-028: keep last row fully visible */
  scrollbar-gutter: stable both-edges; /* where supported */
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 8px;
  overflow: auto;
  height: 100%;
  min-height: 0;
}
@media (max-width: 900px){
  .fcchat-exp-grid{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .fcchat-exp-grid{ grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.fcchat-exp-btn{
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.fcchat-exp-btn:hover{
  background: rgba(255,255,255,0.10);
}
.fcchat-gif-empty{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  color: rgba(255,255,255,0.85);
}
.fcchat-gif-empty-title{
  font-size: 18px;
  margin-bottom: 6px;
}
.fcchat-gif-empty-sub{
  font-size: 13px;
  opacity: 0.85;
}

/* PATCH-029: GIF tab empty + keep back button visible (safe UI fix) */
.fcchat-exp-head{ flex-wrap: nowrap; }
.fcchat-exp-mode{ flex: 0 0 auto; white-space: nowrap; }
/* when GIF mode active, ensure expression parts are not shown (JS also hides, this is belt+braces) */
.fcchat-exp[data-active-mode="gif"] .fcchat-exp-tabs{ display: none !important; }
.fcchat-exp[data-active-mode="gif"] .fcchat-exp-grid{ display: none !important; }
.fcchat-exp[data-active-mode="gif"] .fcchat-exp-search{ display: none !important; }
.fcchat-exp[data-active-mode="gif"] .fcchat-gif-wrap{ display: block !important; }
.fcchat-exp[data-active-mode="fx"] .fcchat-exp-tabs{ display: none !important; }
.fcchat-exp[data-active-mode="fx"] .fcchat-exp-grid{ display: none !important; }
.fcchat-exp[data-active-mode="fx"] .fcchat-gif-wrap{ display: none !important; }
.fcchat-exp[data-active-mode="fx"] .fcchat-fx-wrap{ display: block !important; }

/* PATCH-030: GIF stickers */
.fcchat-gif-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;align-content:start;padding-right:6px;padding-bottom:6px;}
.fcchat-gif-btn{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;}
.fcchat-gif-btn:hover{filter:brightness(1.05);}
.fcchat-gif-thumb{width:64px;height:64px;object-fit:contain;display:block;}
.fcchat-msg .fcchat-gif-sticker{width:48px;height:48px;object-fit:contain;vertical-align:middle;display:inline-block;margin:0 4px;}
.fcchat-fx-grid .fcchat-gif-thumb{width:64px;height:64px;}
.fcchat-msg .fcchat-gif-sticker.fcchat-gif-effect{width:auto;height:auto;max-width:none;max-height:none;margin:0;}
.fcchat-msg .fcchat-emoji-char,
.fcchat-msg .fcchat-gif-sticker{
  vertical-align: -0.25em !important;
  line-height: 1 !important;
  margin-top: -2px;
  margin-bottom: -2px;
}
.fcchat-line.fcchat-has-gif .fcchat-gif-sticker{
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.fcchat-link-anchor{color:#4fd7ff;text-decoration:underline;word-break:break-all;}
.fcchat-link-embed{margin-top:6px;max-height:260px;overflow:auto;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.35);}
.fcchat-x-embed{padding:6px;}
.fcchat-yt-iframe{width:100%;height:220px;border:0;display:block;}

/* ============================================================
   PATCH-031B: Center the expressions/GIFs panel + 3-column GIF grid
   (CSS-only override; no layout/theme core changes)
   ============================================================ */
.fcchat-emoji-pop{
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
/* Keep within viewport */
@media (max-height: 620px){
  .fcchat-emoji-pop{ top: 56px !important; transform: translate(-50%, 0) !important; }
}
/* GIF grid: 3 columns (narrower look) */

/* ============================================================
   PATCH-033: GIF panel width shrink (about -33%) + internal scrollbar
   - Keep panel centered (from PATCH-031B)
   - Keep GIF grid at 3 columns (from PATCH-030)
   - Ensure GIF list scrolls inside the panel
   ============================================================ */

/* Make the whole panel narrower so it doesn't cover the chat area */
.fcchat-emoji-pop{
  width: 280px !important;           /* ~33% narrower than 420px */
  max-width: calc(100vw - 20px) !important;
}

/* When GIF mode is active, make the GIF wrap the scroll container */
.fcchat-exp[data-active-mode="gif"] .fcchat-gif-wrap{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
  padding: 6px;
  padding-right: 10px;  /* keep last column clickable */
  padding-bottom: 10px; /* keep last row fully visible */
  scrollbar-gutter: stable both-edges;
}
.fcchat-exp[data-active-mode="fx"] .fcchat-fx-wrap{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
  padding: 6px;
  padding-right: 10px;
  padding-bottom: 10px;
  scrollbar-gutter: stable both-edges;
}

/* Let the wrap handle padding; keep grid tight */
.fcchat-exp[data-active-mode="gif"] .fcchat-gif-grid{
  padding: 0 !important;
}
.fcchat-exp[data-active-mode="fx"] .fcchat-fx-grid{
  padding: 0 !important;
}

/* ============================================================
   PATCH-033: GIF panel width shrink + internal scrollbar
   ============================================================ */

/* Narrower panel (roughly 1/3 smaller than the previous 420px) */
.fcchat-emoji-pop{
  width: 280px !important;
  max-width: calc(100vw - 20px) !important;
  min-width: 240px !important;
}

/* When GIF mode is active, make the GIF area scroll internally */
.fcchat-exp[data-active-mode="gif"] .fcchat-gif-wrap{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
  padding: 10px;
  padding-right: 22px; /* keep last column clickable */
  padding-bottom: 22px; /* keep last row fully visible */
  scrollbar-gutter: stable both-edges;
}
.fcchat-exp[data-active-mode="fx"] .fcchat-fx-wrap{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
  padding: 10px;
  padding-right: 22px;
  padding-bottom: 22px;
  scrollbar-gutter: stable both-edges;
}

/* Let the grid size naturally inside the scrollable wrapper */
.fcchat-exp[data-active-mode="gif"] .fcchat-gif-grid{
  padding: 0 !important;
}
.fcchat-exp[data-active-mode="fx"] .fcchat-fx-grid{
  padding: 0 !important;
}

/* ============================================================
   PATCH-034: Expressions grid wrap fix for narrow panel
   Problem: fixed 18-column grid causes emoji overflow/overlap when panel is narrow.
   Fix: responsive auto-fill columns with a sane min cell width.
   ============================================================ */
.fcchat-exp-grid{
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)) !important;
  align-content: start;
}
.fcchat-exp-btn{
  height: 34px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}



/* FCCHAT IFRAME FIT START */
/* iframe mode: eliminate top offset, no clipping, fill viewport */
html, body, body.fcchat-iframe-body{
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* bypass any document-flow offset (e.g., mysterious 18px) */
body.fcchat-iframe-body{
  position: relative !important;
}
body.fcchat-iframe-body .fcchat-root{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body.fcchat-iframe-body .fcchat-main{
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}
body.fcchat-iframe-body .fcchat-guests,
body.fcchat-iframe-body .fcchat-chat{
  min-height: 0 !important;
}
/* FCCHAT IFRAME FIT END */

/* FCCHAT IFRAME SCALE: keep room base size, scale to iframe size */
body.fcchat-iframe-body.fcchat-embed .fcchat-root{
  width: var(--fcchat-embed-base-w, 900px) !important;
  height: var(--fcchat-embed-base-h, 750px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) scale(var(--fcchat-embed-scale-x, 1), var(--fcchat-embed-scale-y, 1)) !important;
  transform-origin: top center !important;
  margin-left: var(--fcchat-embed-offset-x, 0px) !important;
  margin-top: var(--fcchat-embed-offset-y, 0px) !important;
  right: auto !important;
  bottom: auto !important;
}
body.fcchat-iframe-body.fcchat-embed .fcchat-main{
  height: calc(var(--fcchat-embed-base-h, 750px) - 110px) !important;
}

/* Kalıcı debug-friendly arka plan (mavi) */
.fcchat-iframe-body .fcchat-bg-layer{
  background-color: #0b2bd6 !important;
  background-image: var(--fcchat-bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fcchat-auth-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.fcchat-auth-modal[hidden]{ display:none !important; }
.fcchat-auth-card{
  width:360px;
  max-width:calc(100% - 24px);
  background:#1b1b1b;
  color:#fff;
  border:1px solid #333;
  border-radius:12px;
  padding:16px 16px 18px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
  position:relative;
}
.fcchat-auth-title{
  font-weight:700;
  margin:0 0 12px;
}
.fcchat-auth-label{
  display:block;
  font-size:12px;
  margin:8px 0 4px;
  color:#cfcfcf;
}
.fcchat-auth-input{
  width:100%;
  box-sizing:border-box;
  border:1px solid #444;
  background:#111;
  color:#fff;
  border-radius:8px;
  padding:8px 10px;
}
.fcchat-auth-passwrap{
  display:flex;
  gap:8px;
  align-items:center;
}
.fcchat-auth-passwrap .fcchat-auth-input{
  flex:1 1 auto;
}
.fcchat-auth-toggle{
  border:1px solid #444;
  background:#111;
  color:#cfcfcf;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  font-size:12px;
}
.fcchat-auth-btn{
  width:100%;
  margin-top:12px;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background:#4b5cff;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.fcchat-auth-error{
  margin-top:8px;
  color:#ffb0b0;
  font-size:12px;
  min-height:16px;
}
.fcchat-auth-link{
  margin-top:10px;
  font-size:12px;
  color:#cfcfcf;
}
.fcchat-auth-link button{
  margin-left:6px;
  background:none;
  border:0;
  color:#9bb7ff;
  cursor:pointer;
}
.fcchat-auth-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  margin:8px 0 4px;
  color:#cfcfcf;
}
.fcchat-auth-close{
  position:absolute;
  right:10px;
  top:8px;
  border:0;
  background:none;
  color:#cfcfcf;
  font-size:14px;
  cursor:pointer;
}

/* PATCH: remove extra padding at top-left of chat text stream */
.fcchat-stream{ padding-top:0 !important; padding-left:0 !important; }
.fcchat-stream > .fcchat-line:first-child{ padding-top:0 !important; padding-left:0 !important; }

/* PATCH: remove left padding on all chat lines */
.fcchat-stream .fcchat-line{ padding-left:0 !important; }