/* ============================================================
   telltotrust — "Azul Medianoche & Crema" global theme skin
   Capa de override sobre el tema nativo de WoWonder 4.3.4.
   Se carga DESPUÉS de style.css (gana la cascada). Solo cambia
   la identidad visual (paleta + tipografía); ninguna estructura.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Spectral:wght@500;600;700&display=swap');

:root{
  --tt-navy:#0B192C; --tt-navy-2:#1a2d46; --tt-navy-3:#22374f;
  --tt-cream:#EDE7DB; --tt-card:#FBF9F4; --tt-card-2:#F5F0E5;
  --tt-light:#F9F6F0; --tt-input:#FFFDF9;
  --tt-gold:#E6C79C; --tt-gold-2:#C9A24B; --tt-gold-ink:#3a2a05; --tt-gold-deep:#8a6a1e;
  --tt-border:#E4DCCD; --tt-border-2:#E0D8C6; --tt-hair:#EEE7D8;
  --tt-slate:#43556E; --tt-muted:#6E7B8C; --tt-ink:#0B192C;
}

/* ---- Base ---- */
body, html { background: var(--tt-cream) !important; }
body { font-family: 'Public Sans', system-ui, -apple-system, sans-serif !important; color: var(--tt-ink); }
body.is-night, body.is-night * { }  /* respeta night-mode si el usuario lo activa */
a { color: var(--tt-slate); }
a:hover { color: var(--tt-navy); }

/* ---- Top header / navbar → navy ---- */
.header-container,
.navbar-fixed-top,
.header-fixed1000,
.header-fixed1200,
header .navbar-default { background: var(--tt-navy) !important; border: 0 !important; box-shadow: 0 1px 0 #12233c !important; }
.header-container .navbar-nav > li > a,
.header-container a, .header-container .link, .header-container i,
.navbar-default .navbar-nav > li > a { color: #cdd7e4 !important; }
.header-container .navbar-nav > li > a:hover,
.header-container .navbar-nav > li.active > a { color: var(--tt-light) !important; }
.header-container .form-control, .header-container input[type=text],
.header-container .search input { background: var(--tt-light) !important; color: var(--tt-ink) !important; border: 0 !important; border-radius: 9px !important; }
.header-brand, .brand.header-brand { color: var(--tt-light) !important; }

/* ---- Content surfaces → cream cards ---- */
.post-wrapper, .main-box, .box, .panel, .panel-default, .card, .well,
.js-status-poster, .user-box, .list-group, .sidebar .list-group,
.profile-header, .profile-details, .side-bar, .widget, .wo_content,
.comments-list, .settings-menu, .story-item, .group-box, .page-box,
.newsfeed-items > .post, ._post, .post-box, .create-post,
.left-sidebar .list-group-item, .right-sidebar .box {
  background: var(--tt-card) !important;
  border-color: var(--tt-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(11,25,44,.05) !important;
}
.list-group-item { background: transparent !important; border-color: var(--tt-hair) !important; }
.main-container, .container-fluid, #main-content, .wo-main { background: transparent !important; }

/* ---- Buttons: primary/accent red → navy; secondary accents → gold ---- */
.btn-main, .btn-primary, .add-btn, .btn-add, .btn-follow, .btn-danger,
.btn-post, .js-post-submit, button.post, .publish-btn {
  background: var(--tt-navy) !important;
  border-color: var(--tt-navy) !important;
  color: var(--tt-light) !important;
  border-radius: 10px !important;
}
.btn-main:hover, .btn-primary:hover, .add-btn:hover, .btn-danger:hover { background: var(--tt-navy-2) !important; }
.btn-default, .btn-light, .btn-white { background: var(--tt-card) !important; border-color: var(--tt-border-2) !important; color: var(--tt-ink) !important; border-radius: 10px !important; }

/* ---- Accent red text/badges → gold ---- */
.text-danger, .text-red, .badge-danger, .label-danger,
.notification-count, .messages-count, .noti-count, .count-label {
  color: var(--tt-gold-deep) !important;
}
.badge, .label { border-radius: 20px !important; }
.notification-count, .messages-count, .noti-count { background: var(--tt-gold) !important; color: var(--tt-navy) !important; }

/* ---- Inputs ---- */
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], textarea, select, .form-control {
  background: var(--tt-input) !important;
  border-color: var(--tt-border-2) !important;
  border-radius: 9px !important;
  color: var(--tt-ink) !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--tt-navy) !important;
  box-shadow: 0 0 0 3px rgba(11,25,44,.10) !important;
}

/* ---- Headings: Spectral for big titles ---- */
h1, .page-title, .box-title, .section-title { font-family: 'Spectral', serif; color: var(--tt-ink); }

/* ---- Sidebar active/links ---- */
.left-sidebar .list-group-item a, .sidebar a { color: var(--tt-slate) !important; }
.left-sidebar .list-group-item a:hover, .sidebar a:hover { color: var(--tt-navy) !important; }
.left-sidebar .list-group-item svg path { }  /* iconos conservan su fill inline */

/* ---- Links/tabs highlight → gold underline ---- */
.nav-tabs > li.active > a, .tab.active, .active-tab { border-bottom-color: var(--tt-gold-2) !important; color: var(--tt-navy) !important; }

/* ---- Cookie consent bar ---- */
.cc-window, #cookie-bar, .cookie-consent, .cookies-notification { background: var(--tt-navy) !important; }
.cc-window .cc-btn, .cc-btn.cc-dismiss, #cookie-bar .cc_btn, .cookie-consent .btn,
.cookies-notification a.button, [aria-label="dismiss cookie message"] {
  background: var(--tt-gold-2) !important; color: var(--tt-gold-ink) !important; border-color: var(--tt-gold-2) !important; border-radius: 8px !important;
}

/* ---- Usernames / content links (WoWonder blue) → navy ---- */
.user-name a, .user_name a, .name a, .author a, .post-user-name a, .user-link,
.newsfeed-items .user-name, .comment-author, .profile-name, .username, .p_name,
a.user_status, .profile-usernames a, .side-title a { color: var(--tt-navy) !important; }
.follow-btn, .btn-follow, a.follow, .add-friend { color: var(--tt-gold-deep) !important; }

/* ---- Pro / promo cards keep gold ---- */
.pro-members, .go-pro-box, .promo-box { background: linear-gradient(135deg,#C9A24B,#E6C79C) !important; color: var(--tt-gold-ink) !important; }

/* ---- Brand logo: usar el logo telltotrust del feed en TODO el chrome nativo ---- */
.header-brand img, .brand.header-brand img, a.brand img, .navbar-brand img { display: none !important; }
/* PNG con transparencia real: se ve limpio sobre cualquier fondo, sin depender
   de mix-blend-mode (que falla cuando un ancestro aísla el contexto de apilado) */
.header-brand, .brand.header-brand, a.brand.header-brand {
  display: inline-block !important;
  width: 150px !important; height: 30px !important;
  background: url('/themes/wowonder/img/telltotrust-logo-alpha.png') left center / contain no-repeat !important;
}

/* ---- Welcome / Login / Register (guest landing) ---- */
/* panel izquierdo: granate → navy; texto legible */
.login_left_combo_parent { background: linear-gradient(135deg,#0B192C 0%,#22374f 100%) !important; }
.login_left_combo_parent > svg { display: none !important; }
.login_left_combo, .login_left_combo h1, .login_left_combo p,
.register_left_combo, .register_left_combo h1, .register_left_combo p { color: #F9F6F0 !important; }
/* El logo original trae el fondo negro incrustado y se veía como un recuadro
   sobre el navy: se oculta el <img> y se pinta el PNG con alfa como fondo. */
.login_left_combo .logo img, .register_left_combo .logo img { display: none !important; }
.login_left_combo .logo, .register_left_combo .logo {
  display: inline-block !important;
  width: 200px !important; height: 42px !important;
  background: url('/themes/wowonder/img/telltotrust-logo-alpha.png') left center / contain no-repeat !important;
}
/* títulos rojos del formulario (lado derecho) → navy — SIN tocar los h1 del panel izquierdo */
.title.main, .dec.main, .main, #login .title, #register .title { color: #0B192C !important; }
/* botones rojos → navy (login/register/welcome header) */
/* :not(.tt-pw-toggle) — el ojo de la contraseña también es un <button> dentro de #login */
#login button[type=submit], #register button[type=submit], form#login button:not(.tt-pw-toggle), form#register button,
.login .mdbtn, .register .mdbtn, #welcomeheader .mdbtn, .mdbtn.main, .login button.main {
  background: #0B192C !important; border-color: #0B192C !important; color: #F9F6F0 !important; border-radius: 9px !important;
}
#welcomeheader .mdbtn:hover, .login .mdbtn:hover { filter: brightness(1.15); }
/* enlaces (Register / Forgot password) rojos → dorado */
.login a:not(.mdbtn), .register a:not(.mdbtn), .login_signup_combo a, .help-block-welcome a { color: #8a6a1e !important; }
.login input[type=checkbox], .register input[type=checkbox] { accent-color: #0B192C; }

/* ---- Login: ojo para mostrar/ocultar la contraseña ---- */
/* El <input> deja de ser hijo directo de .wow_form_fields, así que el botón se
   ancla a este envoltorio y no al alto total del campo (que incluye el label). */
.tt-pw-field { position: relative; }
/* hueco a la derecha para que el texto no quede por debajo del botón */
.tt-pw-field input { padding-right: 48px !important; }
.tt-pw-toggle {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; margin: 0;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--tt-muted); cursor: pointer; line-height: 0;
  -webkit-appearance: none; appearance: none;
  transition: color 160ms, background-color 160ms;
}
.tt-pw-toggle:hover { color: var(--tt-navy); background: rgba(11,25,44,.07); }
.tt-pw-toggle:focus { outline: 2px solid var(--tt-gold-2); outline-offset: 2px; }
.tt-pw-toggle:focus:not(:focus-visible) { outline: 0; }
.tt-pw-toggle:focus-visible { outline: 2px solid var(--tt-gold-2); outline-offset: 2px; }
.tt-pw-toggle[disabled] { opacity: .45; cursor: default; }
/* pointer-events: el clic siempre debe llegar al <button>, nunca al <svg> */
.tt-pw-toggle .tt-pw-icon { width: 20px; height: 20px; display: block; pointer-events: none; }
.tt-pw-toggle .tt-pw-icon-hide { display: none; }
.tt-pw-toggle.is-revealed .tt-pw-icon-show { display: none; }
.tt-pw-toggle.is-revealed .tt-pw-icon-hide { display: block; }
@media (max-width: 480px) {
  .tt-pw-toggle { width: 34px; height: 34px; right: 5px; }
  .tt-pw-field input { padding-right: 44px !important; }
}
.tt-captcha { margin: 10px 0 6px; min-height: 78px; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar-thumb { background: #D6CCB8 !important; border-radius: 20px; }

/* El ojo de la contraseña quedaba excluido del repintado navy y heredaba el
   rojo del boton nativo, que no pertenece a la paleta. Va sin fondo, con el
   icono en gris azulado y navy al pasar por encima. */
form#login .tt-pw-toggle,
form#register .tt-pw-toggle,
.login .tt-pw-toggle,
.register .tt-pw-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #6E7B8C !important;
}
form#login .tt-pw-toggle:hover,
form#register .tt-pw-toggle:hover,
.login .tt-pw-toggle:hover,
.register .tt-pw-toggle:hover { color: #0B192C !important; background: rgba(11,25,44,.06) !important; }
form#login .tt-pw-toggle svg, .login .tt-pw-toggle svg { stroke: currentColor; fill: none; }

/* ============================================================
   Mensajes (/messages) — pantalla nativa de WoWonder
   Son ~2000 lineas de chat en tiempo real que no conviene
   reescribir: se reviste con la paleta apuntando a sus propios
   selectores. Si una actualizacion del script los renombra, esta
   pantalla vuelve a su aspecto original pero sigue funcionando.
   ============================================================ */
.wo_kb_msg_page { background: var(--tt-cream) !important; }
.msg_under_hood {
  background: var(--tt-card) !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(11,25,44,.05) !important;
  overflow: hidden;
}

/* Panel izquierdo: buscador y pestañas */
.messages-search-users-form .form-control {
  background: var(--tt-input) !important;
  border: 1px solid var(--tt-border-2) !important;
  border-radius: 9px !important;
}
.wo_msg_tabs { background: transparent !important; border-bottom: 1px solid var(--tt-hair) !important; }
.wo_msg_tabs > li > a { color: var(--tt-muted) !important; font-weight: 600 !important; border: 0 !important; }
.wo_msg_tabs > li.active > a,
.wo_msg_tabs > li > a:hover {
  color: var(--tt-navy) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--tt-gold-2) !important;
}

/* Lista de conversaciones */
.messages-users-list, .messages-chat-list, .messages-group-list { background: transparent !important; }
.messages-recipients-list { border-bottom: 1px solid var(--tt-hair) !important; }
.messages-recipients-list:hover, .messages-recipients-list.active { background: var(--tt-card-2) !important; }
.messages-user-name, .msg_ava_name { color: var(--tt-ink) !important; font-weight: 600 !important; }
.messages-last-sent, .messages-text { color: var(--tt-muted) !important; }

/* Burbujas: las propias en navy, las recibidas en crema */
.message-contnaier, .message-model { background: transparent !important; }
.message-text {
  background: var(--tt-card-2) !important;
  color: var(--tt-ink) !important;
  border: 1px solid var(--tt-hair) !important;
  border-radius: 14px !important;
}
.msg_rght_prt .message-text,
.message.self .message-text,
.message-model.self .message-text {
  background: var(--tt-navy) !important;
  color: var(--tt-light) !important;
  border-color: var(--tt-navy) !important;
}
.msg_rght_prt .message-text a, .message.self .message-text a { color: var(--tt-gold) !important; }
.message-details, .message-seen, .message-typing { color: var(--tt-muted-2) !important; }

/* Barra de escritura y acciones */
.text-sender-container { background: var(--tt-card) !important; border-top: 1px solid var(--tt-hair) !important; }
.msg_usr_info_top_list { background: var(--tt-card) !important; border-bottom: 1px solid var(--tt-hair) !important; color: var(--tt-ink) !important; }
.wo_kb_msg_page .btn.btn-main {
  background: var(--tt-navy) !important;
  border-color: var(--tt-navy) !important;
  color: var(--tt-light) !important;
  border-radius: 9px !important;
}
.wo_kb_msg_page .empty_state, .no-online-users { color: var(--tt-muted) !important; }
.wo_kb_msg_page .feather { stroke: var(--tt-slate); }

/* ---- Blog y paginas de empresa (modulos nativos reactivados) ----
   Los selectores salen del marcado real (wo_page_hdng, wow_content, btn-mat),
   no de suponerlos: el intento anterior apuntaba a clases que no existen y no
   pintaba nada. La cabecera del blog trae un degradado violeta de serie que no
   pertenece a la paleta. */
.wo_page_hdng, .wo_page_hdng_innr {
  background: linear-gradient(135deg, var(--tt-navy) 0%, var(--tt-navy-3) 100%) !important;
  color: var(--tt-light) !important;
}
.wo_page_hdng h1, .wo_page_hdng h2, .wo_page_hdng_innr h1, .wo_page_hdng_innr h2 {
  font-family: 'Spectral', serif !important;
  color: var(--tt-light) !important;
}
.wo_page_hdng a, .wo_page_hdng_innr a { color: var(--tt-gold) !important; }
.wo_page_hdng .btn, .wo_page_hdng_innr .btn,
.wo_page_hdng .btn-mat, .wo_page_hdng_innr .btn-mat {
  background: var(--tt-gold-2) !important;
  color: var(--tt-gold-ink) !important;
  border-color: var(--tt-gold-2) !important;
  border-radius: 9px !important;
}
.wow_content, .wow_form_fields {
  background: var(--tt-card) !important;
  border-color: var(--tt-border) !important;
  border-radius: 14px !important;
}
.wow_content .btn, .btn-mat {
  background: var(--tt-navy) !important;
  color: var(--tt-light) !important;
  border-color: var(--tt-navy) !important;
  border-radius: 9px !important;
}
/* Pastillas de categoria */
.wow_content a.btn-mat, .wow_form_fields a.btn-mat {
  background: var(--tt-chip) !important;
  color: var(--tt-slate) !important;
  border: 1px solid var(--tt-chip-br) !important;
  border-radius: 20px !important;
}
.wow_content a.btn-mat:hover { background: var(--tt-chip-hover) !important; color: var(--tt-navy) !important; }
.page-margin { background: transparent !important; }

/* El degradado violeta del blog vive en .wow_main_float_head, no en la cabecera
   que sugieren los nombres de clase. Se identifico inspeccionando el DOM: el
   intento de adivinarlo por el nombre no acerto. */
.wow_main_float_head,
.wow_main_float_head.new_market,
.wow_main_float_head.blogs,
.wow_main_float_head.new_market.blogs {
  background-image: linear-gradient(-45deg, var(--tt-navy) 0%, var(--tt-navy-3) 100%) !important;
}
.wow_main_float_head h1, .wow_main_float_head h2, .wow_main_float_head p { color: var(--tt-light) !important; }

/* ---- Continuidad visual en las pantallas nativas (blog, paginas) ----
   Reutilizar el modulo nativo trae su chrome completo: cabecera propia y
   barra de chat lateral, que en una red B2B distraen y rompen la lectura.
   No se reescribe la plantilla; se alinea lo visible con el resto del sitio. */
.wow_main_float_head + *, body.blogs { background: var(--tt-cream) !important; }

/* La barra de chat lateral no aporta nada en una pantalla de lectura y roba
   350px de ancho al articulo. */
.wo_chat_right_sec, #chat-right-side, .chat-right-sidebar, .wo_right_chat {
  display: none !important;
}
.wow_main_float_head ~ .container,
.wow_main_float_head ~ .page-margin { max-width: 1240px !important; margin: 0 auto !important; }

/* Cabecera nativa: misma altura y color que la barra B2B para que al pasar de
   una pantalla a otra no parezca otra aplicacion. */
.wow_main_header, .main_header, header.wo_header {
  background: var(--tt-navy) !important;
  border-bottom: 1px solid #12233c !important;
}
.wow_main_header a, .main_header a { color: #cdd7e4 !important; }
.wow_main_header a:hover, .main_header a:hover { color: var(--tt-light) !important; }

/* Tarjetas de articulo */
.wow_main_blogs_info, .blog_card, .wow_blog_item {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ---- Cabecera nativa: quitar lo que no pertenece a una red B2B ----
   Las pantallas que reutilizan el modulo nativo (mensajes, blog) traen su
   propia barra con "Create" y un buscador de "people, pages, groups and
   #hashtags". Al pasar del feed B2B a mensajes parecia otra aplicacion.
   No se puede inyectar la barra B2B desde CSS, pero si retirar lo ajeno. */
.header-container a[href*="link1=create"],
.header-container .create-post-btn,
.header-container li a[href$="/create"],
#create-post-header, .wo_create_btn { display: none !important; }

/* El buscador nativo apunta a personas y hashtags; el del sitio busca
   productos y empresas. Se deja el campo pero sin el reclamo equivocado. */
.header-container input[placeholder*="hashtag"],
.header-container input[placeholder*="people"] { color: var(--tt-ink) !important; }

/* Alineacion con la barra B2B: misma altura, mismo navy, mismo ancho util. */
.header-container { height: 62px !important; }
.header-container .container, .header-container .container-fluid { max-width: 1320px !important; }

#wo_msg_right_prt .message-model .message {
  background: var(--tt-card-2) !important;
  border: 1px solid var(--tt-hair) !important;
  border-radius: 14px !important;
  border-bottom-left-radius: 4px !important;
  color: var(--tt-ink) !important;
  padding: 8px 12px !important;
}
#wo_msg_right_prt .outgoing .message-model .message {
  background: var(--tt-navy) !important;
  border-color: var(--tt-navy) !important;
  border-radius: 14px !important;
  border-bottom-right-radius: 4px !important;
  color: var(--tt-light) !important;
}
#wo_msg_right_prt .message-model .message .message-text {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  overflow-wrap: anywhere;
}
#wo_msg_right_prt .outgoing .message-model .message .message-text,
#wo_msg_right_prt .outgoing .message-model .message .message-text a { color: var(--tt-light) !important; }
#wo_msg_right_prt .message-model .message .message-text a,
#wo_msg_right_prt .message-text a.hash { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; }
#wo_msg_right_prt .message-model .message .wo_reply_msg_bg { border-radius: 10px; }
#wo_msg_right_prt .message-model .message .wo_reply_msg_bg .message-text { opacity: .85; }
#wo_nw_msg_page .messages-container .message-media img.image-file { max-width: 100%; max-height: 240px; width: auto; height: auto; border-radius: 10px; }

#wo_msg_right_prt .msg_write_combo {
  background: var(--tt-input) !important;
  border: 1px solid var(--tt-border-2) !important;
}
#wo_msg_right_prt .msg_write_combo .btn-file,
#wo_msg_right_prt .msg_write_combo .emo-message,
#wo_msg_right_prt .message-option-btns .btn-file { color: var(--tt-slate) !important; background: transparent !important; border-color: transparent !important; }
#wo_msg_right_prt .msg_write_combo .btn-file:hover { color: var(--tt-navy) !important; }
#wo_msg_right_prt .msg_write_combo .btn-file svg,
#wo_msg_right_prt .msg_write_combo .emo-message svg { color: currentColor !important; }
#wo_msg_right_prt .send-button,
#wo_msg_right_prt .send-button.btn-main {
  background: var(--tt-navy) !important;
  border-color: var(--tt-navy) !important;
  color: var(--tt-light) !important;
}

@media (min-width: 993px) {
  #wo_nw_msg_page.wo_kb_msg_page { padding-top: 16px; }
  #wo_nw_msg_page .msg_under_hood .mobilerightpane,
  #wo_nw_msg_page .msg_under_hood .mobileleftpane { height: calc(100vh - var(--tt-msg-top, 63px) - 32px); }
  #wo_nw_msg_page .text-sender-container .messagejoint { height: calc(100vh - var(--tt-msg-top, 63px) - 32px - 84px); }
}
@media (max-width: 992px) {
  #wo_nw_msg_page .text-sender-container .messagejoint {
    top: calc(var(--tt-msg-top, 45px) + 60px);
    height: auto;
  }
  #wo_nw_msg_page .messages-container { padding: 12px 12px 0; }
  #wo_msg_right_prt .text-sender-container .message-model { width: 92%; }
}

.tt-chat-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tt-slate);
  cursor: pointer;
  flex-shrink: 0;
}
.tt-chat-attach:hover { background: var(--tt-chip, #F4EFE4); color: var(--tt-navy); }
.tt-chat-attach:focus-visible { outline: 2px solid var(--tt-navy); outline-offset: 2px; }
#wo_msg_right_prt .msg_write_combo .tt-chat-attach-slot { margin: 0 2px 0 0; }
.chat-wrapper .tt-chat-attach-slot .tt-chat-attach { width: 30px; height: 30px; }
.chat-wrapper .tt-chat-attach-slot .tt-chat-attach svg { width: 20px; height: 20px; }

.tt-chat-refs { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; max-width: 100%; }
.tt-chat-has-refs .message-text + .tt-chat-refs { margin-top: 8px; }
.tt-chat-text-label { display: none !important; }
#wo_msg_right_prt .message-model .message.tt-chat-refs-only,
.chat-wrapper .message.tt-chat-refs-only,
.chat-messages-wrapper .message.tt-chat-refs-only {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.message.tt-chat-refs-only > .message-media:not(:has(img, video, audio, a, iframe)) { display: none !important; }
.tt-chat-card {
  display: flex;
  gap: 10px;
  width: min(320px, 100%);
  padding: 10px;
  border: 1px solid var(--tt-border, #E4DCCD);
  border-radius: 12px;
  background: var(--tt-card, #FBF9F4);
  color: var(--tt-ink, #0B192C) !important;
  text-decoration: none !important;
  text-align: left;
  line-height: 1.3;
  box-shadow: 0 1px 4px rgba(11, 25, 44, .08);
  white-space: normal;
}
a.tt-chat-card:hover, a.tt-chat-card:focus-visible { border-color: var(--tt-gold-2, #C9A24B); }
a.tt-chat-card:focus-visible { outline: 2px solid var(--tt-navy, #0B192C); outline-offset: 2px; }
.tt-chat-card-media {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--tt-card-2, #F5F0E5);
}
.tt-chat-card-media .tt-pimg,
.messages-container .tt-chat-card-media img.tt-pimg,
.chat-messages-wrapper .tt-chat-card-media img.tt-pimg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 9px;
}
.tt-chat-card-media.is-rfq {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tt-chip, #F4EFE4);
  border: 1px solid var(--tt-chip-br, #E7DFCE);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--tt-gold-deep, #8a6a1e);
}
.tt-chat-card-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tt-chat-card-kicker { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tt-gold-deep, #8a6a1e); }
.tt-chat-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 800;
  color: var(--tt-ink, #0B192C);
}
.tt-chat-card-price { font-size: 14px; font-weight: 800; color: var(--tt-navy, #0B192C); }
.tt-chat-card-meta { font-size: 12.5px; color: var(--tt-slate, #43556E); overflow-wrap: anywhere; }
.tt-chat-card-status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  border: 1px solid var(--tt-chip-br, #E7DFCE);
  background: var(--tt-chip, #F4EFE4);
  font-size: 11px;
  font-weight: 700;
  color: var(--tt-slate, #43556E);
}
.tt-chat-card-status.is-published { border-color: #cfe3d4; background: #E4F0E7; color: #1d6b3a; }
.tt-chat-card-company { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--tt-slate, #43556E); }
.tt-chat-card-company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-chat-card-verified { flex-shrink: 0; padding: 1px 6px; border-radius: 20px; background: var(--tt-navy, #0B192C); font-size: 10.5px; font-weight: 700; color: var(--tt-light, #F9F6F0); }
.tt-chat-card-cta { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--tt-navy, #0B192C); text-decoration: underline; text-underline-offset: 2px; }
.tt-chat-card.is-unavailable {
  display: block;
  padding: 10px 12px;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-style: italic;
  color: var(--tt-muted, #6E7B8C) !important;
}
.tt-chat-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 120px)); gap: 6px; }
.tt-chat-imgs.is-single { grid-template-columns: minmax(0, 180px); }
.tt-chat-img { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--tt-border, #E4DCCD); background: var(--tt-card-2, #F5F0E5); }
.tt-chat-img img,
.messages-container .tt-chat-img img,
.chat-messages-wrapper .tt-chat-img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
}
.tt-chat-img:focus-visible { outline: 2px solid var(--tt-navy, #0B192C); outline-offset: 2px; }
.chat-wrapper .tt-chat-card { width: 100%; padding: 8px; }
.chat-wrapper .tt-chat-card-media { flex-basis: 56px; width: 56px; height: 56px; }
.chat-wrapper .tt-chat-refs { padding: 0 4px; }

.tt-chat-picker {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: min(680px, calc(100vh - 48px));
  max-height: min(680px, calc(100dvh - 48px));
  padding: 0;
  border: 1px solid var(--tt-border, #E4DCCD);
  border-radius: 16px;
  background: var(--tt-card, #FBF9F4);
  color: var(--tt-ink, #0B192C);
  box-shadow: 0 20px 60px rgba(11, 25, 44, .3);
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
.tt-chat-picker[open] { display: flex; flex-direction: column; }
.tt-chat-picker:modal { overscroll-behavior: contain; }
.tt-chat-picker::backdrop { background: rgba(11, 25, 44, .45); overflow: hidden; overscroll-behavior: contain; }
.tt-chat-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.tt-chat-picker-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--tt-ink, #0B192C); }
.tt-chat-picker-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tt-slate, #43556E);
  cursor: pointer;
}
.tt-chat-picker-close:hover { background: var(--tt-chip, #F4EFE4); color: var(--tt-navy, #0B192C); }
.tt-chat-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--tt-hair, #EEE7D8); overflow-x: auto; scrollbar-width: none; }
.tt-chat-tab {
  flex-shrink: 0;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tt-slate, #43556E);
  cursor: pointer;
}
.tt-chat-tab[aria-selected="true"] { color: var(--tt-navy, #0B192C); border-bottom-color: var(--tt-gold-2, #C9A24B); }
.tt-chat-tab:focus-visible,
.tt-chat-pick:focus-visible,
.tt-chat-pick-image:focus-visible,
.tt-chat-picker-close:focus-visible,
.tt-chat-upload:focus-visible,
.tt-chat-send-images:focus-visible { outline: 2px solid var(--tt-navy, #0B192C); outline-offset: 2px; }
.tt-chat-search {
  margin: 12px 14px 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--tt-border-2, #E0D8C6);
  border-radius: 10px;
  background: var(--tt-input, #FFFDF9);
  font: inherit;
  font-size: 14px;
  color: var(--tt-ink, #0B192C);
}
.tt-chat-search[hidden] { display: none; }
.tt-chat-heading { margin: 10px 16px 0; font-size: 12.5px; font-weight: 700; color: var(--tt-muted, #6E7B8C); }
.tt-chat-heading:empty { display: none; }
.tt-chat-list { flex: 1; min-height: 220px; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 14px; }
.tt-chat-empty { margin: 0; padding: 36px 12px; text-align: center; font-size: 14px; color: var(--tt-slate, #43556E); }
.tt-chat-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tt-chat-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: var(--tt-ink, #0B192C);
  text-align: left;
  cursor: pointer;
}
.tt-chat-pick:hover { background: var(--tt-card-2, #F5F0E5); border-color: var(--tt-border, #E4DCCD); }
.tt-chat-pick-img,
.tt-chat-pick-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--tt-card-2, #F5F0E5);
}
.tt-chat-pick-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tt-chip-br, #E7DFCE);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--tt-gold-deep, #8a6a1e);
}
.tt-chat-pick-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tt-chat-pick-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.tt-chat-pick-meta { font-size: 12.5px; color: var(--tt-slate, #43556E); }
.tt-chat-pick-send {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 9px;
  background: var(--tt-navy, #0B192C);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tt-light, #F9F6F0);
}
.tt-chat-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.tt-chat-pick-image {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: var(--tt-ink, #0B192C);
  text-align: left;
  cursor: pointer;
}
.tt-chat-pick-image .tt-chat-pick-img { width: 100%; height: auto; aspect-ratio: 1 / 1; flex-basis: auto; }
.tt-chat-pick-image[aria-pressed="true"] { border-color: var(--tt-gold-2, #C9A24B); background: var(--tt-chip, #F4EFE4); }
.tt-chat-pick-image[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tt-navy, #0B192C) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F9F6F0' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.tt-chat-pick-caption { padding: 0 4px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--tt-slate, #43556E); }
.tt-chat-picker-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--tt-hair, #EEE7D8);
  background: var(--tt-card-2, #F5F0E5);
}
.tt-chat-upload {
  padding: 9px 14px;
  border: 1px solid var(--tt-border-2, #E0D8C6);
  border-radius: 10px;
  background: var(--tt-card, #FBF9F4);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tt-ink, #0B192C);
  cursor: pointer;
}
.tt-chat-upload[hidden], .tt-chat-send-images[hidden] { display: none; }
.tt-chat-status { flex: 1; min-width: 0; font-size: 13px; color: var(--tt-slate, #43556E); }
.tt-chat-send-images {
  margin-left: auto;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--tt-navy, #0B192C);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--tt-light, #F9F6F0);
  cursor: pointer;
}
@media (max-width: 640px) {
  .tt-chat-picker {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
  }
  .tt-chat-tab { flex: 1 1 0; padding: 10px 6px; text-align: center; line-height: 1.25; }
  .tt-chat-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tt-chat-pick-send { padding: 5px 10px; font-size: 12px; }
  .tt-chat-send-images { width: 100%; }
  .tt-chat-card { width: 100%; }
  .tt-chat-card-media { flex-basis: 64px; width: 64px; height: 64px; }
  #wo_msg_right_prt .msg_write_combo .tt-chat-attach { width: 32px; height: 32px; margin: 0; }
  #wo_msg_right_prt .msg_write_combo .tt-chat-attach svg { width: 20px; height: 20px; }
}

body #wo_nw_msg_page .messages-recipients-list .avatar .online_dot { top: 3px; bottom: auto; right: 3px; }
body #wo_nw_msg_page .messages-recipients-list .avatar .tt-rb { right: -2px; bottom: -2px; }
#wo_nw_msg_page #user-avatar-right { position: relative; display: inline-flex; flex-shrink: 0; margin-right: 15px; }
.text-sender-container .msg_usr_info_top_list .msg_usr_cht_usr_data #user-avatar-right img { margin-right: 0; }
#wo_nw_msg_page #user-avatar-right .tt-rb { right: -2px; bottom: -2px; }
#wo_nw_msg_page #user-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
#wo_nw_msg_page #user-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wo_nw_msg_page #user-name .tt-role { flex-shrink: 0; }
#wo_nw_msg_page .messages-recipients-list .avatar { position: relative; }

@media (min-width: 861px) {
  body:has(.tt-topbar) .chat-container.full { top: var(--tt-bar-h, 63px) !important; height: calc(100vh - var(--tt-bar-h, 63px)) !important; min-height: 0; padding-top: 0; }
}
@media (min-width: 861px) {
  body:has(.tt-topbar):has(.chat-container.full) { padding-right: 250px !important; }
  body:has(.tt-topbar):has(.chat-container.full) > .tt-topbar { margin-right: -250px; }
}
@media (min-width: 861px) and (max-width: 1140px) {
  body:has(.tt-topbar):has(.chat-container.full) .content-container.container { width: auto !important; }
}