* { box-sizing: border-box; } :root { --gray: #c8c8c8; /* fondo "chrome": sidebar, headers, botones, burbuja propia */ --white: #ffffff; /* fondo "contenido": área de mensajes, inputs, paneles */ --black: #000000; /* texto/bordes sobre fondo --white — se usa igual en las dos paletas */ --ink-chrome: #000000; /* texto/íconos sobre fondo --gray — esto sí cambia por paleta */ --bevel-light: #ffffff; /* lado claro de los bordes 3D — fijo, no es "fondo" */ } /* Paleta alternativa estilo Boca Juniors — se activa con [data-theme="boca"] en (ver el selector de paleta en el sidebar). --black y --bevel-light quedan igual a propósito: los bordes se mantienen blanco/negro puro en las dos paletas, solo cambian los fondos y el color de texto que va sobre el fondo "chrome". */ :root[data-theme="boca"] { --gray: #0c2f66; --white: #f2c14e; --ink-chrome: #ffffff; } html, body { margin: 0; height: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--ink-chrome); background: var(--gray); } ul { list-style: none; margin: 0; padding: 0; } h3 { margin: 0; } /* Las reglas de layout de abajo fijan display:flex en elementos que también se ocultan con el atributo `hidden` vía JS; sin este !important pisarían la regla `display:none` del navegador y esos elementos quedarían visibles siempre, tapando la pantalla que debería mostrarse. */ [hidden] { display: none !important; } input, textarea { font-family: inherit; font-size: 17px; padding: 7px 10px; background: var(--white); color: var(--black); border-top: 2px solid var(--black); border-left: 2px solid var(--black); border-right: 2px solid var(--bevel-light); border-bottom: 2px solid var(--bevel-light); outline: none; } input[type="file"] { border: none; background: none; padding: 0; } #text-input { resize: none; overflow-y: auto; max-height: 120px; line-height: 1.3; } button { font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; padding: 8px 14px; background: var(--gray); color: var(--ink-chrome); border-top: 2px solid var(--bevel-light); border-left: 2px solid var(--bevel-light); border-right: 2px solid var(--black); border-bottom: 2px solid var(--black); } button:active { border-top: 2px solid var(--black); border-left: 2px solid var(--black); border-right: 2px solid var(--bevel-light); border-bottom: 2px solid var(--bevel-light); } button:disabled { opacity: 0.5; cursor: default; } .icon-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; flex-shrink: 0; } .icon-btn.send-btn { width: 46px; height: 46px; } .icon-btn svg { pointer-events: none; } /* Auth / pairing */ .centered-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .panel { background: var(--gray); border: 2px solid var(--black); padding: 24px 28px; width: 340px; } .panel h3 { font-size: 20px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; } .panel h3:not(:first-child) { margin-top: 22px; } .panel p { font-size: 15px; margin: 6px 0; } .stack { display: flex; flex-direction: column; gap: 8px; } .error-text { font-weight: 700; min-height: 1em; } #qr-img { max-width: 100%; border: 2px solid var(--black); } /* Main app layout */ #app { display: flex; height: 100vh; overflow: hidden; background: var(--gray); } #sidebar { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 2px solid var(--black); } #sidebar-header { padding: 16px; display: flex; flex-direction: column; gap: 10px; } #sidebar-title-row { display: flex; align-items: center; justify-content: space-between; } #sidebar-title-actions { display: flex; align-items: center; gap: 8px; } #app-title { font-size: 26px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; } .search-box { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--white); color: var(--black); border-top: 2px solid var(--black); border-left: 2px solid var(--black); border-right: 2px solid var(--bevel-light); border-bottom: 2px solid var(--bevel-light); } .search-box input { border: none; flex: 1; padding: 0; background: transparent; } #contact-search-results { display: flex; flex-direction: column; gap: 4px; } #contact-search-results button { width: 100%; text-align: left; text-transform: none; font-weight: 400; } .new-chat-row { display: flex; gap: 8px; } .new-chat-row input { flex: 1; min-width: 0; } .chats-toggle-row { display: flex; gap: 6px; } .chats-toggle-row button { flex: 1; padding: 8px 4px; font-size: 12px; } #chat-list { flex: 1; overflow-y: auto; } #chat-list li { border-bottom: 2px solid var(--black); } .chat-item-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: transparent; border: none; font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 16px; text-align: left; } #chat-list li.selected { background: var(--black); } #chat-list li.selected .chat-item-btn { color: var(--white); } #chat-list li.selected .square-avatar { background: var(--white); border-color: var(--white); color: var(--black); } .square-avatar { width: 40px; height: 40px; background: var(--gray); border: 2px solid var(--black); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; } /* En la lista de chats el avatar es clickeable (togglea si se muestra el último mensaje en la lista) — bordeado punteado marca que está oculto. */ #chat-list .square-avatar { cursor: pointer; } #chat-list .square-avatar.preview-hidden { border-style: dashed; } .chat-item-info { flex: 1; min-width: 0; } .chat-item-top { display: flex; justify-content: space-between; gap: 8px; } .chat-item-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-item-time { font-size: 13px; flex-shrink: 0; } .chat-item-preview { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.75; } #load-more-chats-btn { margin: 10px 16px; } /* Messages column */ #messages-col { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--white); } #chat-header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--gray); border-bottom: 2px solid var(--black); } #chat-header h3 { font-size: 20px; letter-spacing: 1px; font-weight: 700; } #current-chat-subtitle { font-size: 14px; } #current-chat-avatar { width: 36px; height: 36px; font-size: 16px; background: var(--white); color: var(--black); } #load-more-messages-btn { align-self: center; margin: 10px; } #message-list { flex: 1; overflow-y: auto; overflow-anchor: none; /* el scroll acá lo manejamos a mano en app.js */ display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--white); color: var(--black); } li.message { max-width: 75%; border: 2px solid var(--black); padding: 8px 12px; } /* El propio mensaje usa fondo --gray (burbuja "chrome"): necesita su propio color de texto, si no heredaría el --black de #message-list. */ li.message.from-me { align-self: flex-end; background: var(--gray); color: var(--ink-chrome); } li.message:not(.from-me) { align-self: flex-start; background: var(--white); } .message-sender { font-size: 13px; font-weight: 700; margin-bottom: 2px; } .message-body { font-size: 17px; line-height: 1.3; word-wrap: break-word; white-space: pre-wrap; } .message-caption { margin-top: 4px; white-space: pre-wrap; } .message-media { display: block; margin-top: 4px; border: 2px solid var(--black); } img.message-media { max-width: 240px; } video.message-media { max-width: 320px; } audio.message-media { width: 240px; } /* color:inherit (no un valor fijo) para que tome el color de la burbuja que lo contiene — en un mensaje propio con la paleta Boca esa burbuja es de fondo oscuro, y un link negro fijo quedaría invisible ahí. Los no heredan color por default (el navegador les pone azul), por eso hace falta ponerlo explícito. */ .document-link { color: inherit; font-weight: 700; } .message-link { color: inherit; text-decoration: underline; } .message-link:hover { opacity: 0.7; } .contact-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--white); color: var(--black); border: 2px solid var(--black); padding: 5px 10px; font-weight: 700; text-transform: none; } .message-quote { border-left: 3px solid var(--black); background: var(--white); color: var(--black); padding: 4px 8px; margin-bottom: 6px; cursor: pointer; } .message-quote-sender { font-size: 13px; font-weight: 700; } .message-quote-body { font-size: 14px; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .message-edited-note { background: transparent; border: none; padding: 0; margin-top: 4px; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal; text-decoration: underline; opacity: 0.7; } .message-edit-history { border-left: 3px solid var(--black); margin-top: 6px; padding-left: 8px; } .message-edit-history-item { margin-bottom: 6px; font-size: 13px; opacity: 0.8; } .message-edit-history-time { font-size: 11px; opacity: 0.7; } .message-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; position: relative; } .message-time { font-size: 13px; } .message-menu-wrap { position: relative; } .message-menu-btn { background: transparent; border: none; padding: 2px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .message-menu-dropdown { position: absolute; bottom: 100%; /* Por default se abre hacia la derecha del botón: en un mensaje ajeno corto (bubble angosta, pegada a la izquierda) abrirlo hacia la izquierda lo mandaba debajo de la lista de chats. En un mensaje propio (bubble pegada a la derecha) se invierte para no salirse por el otro lado. */ left: 0; margin-bottom: 4px; background: var(--gray); color: var(--ink-chrome); border: 2px solid var(--black); padding: 4px; width: 170px; z-index: 10; } .from-me .message-menu-dropdown { left: auto; right: 0; } .message-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 15px; cursor: pointer; } .message-menu-item:hover { background: var(--white); color: var(--black); } .message-menu-divider { height: 2px; background: var(--black); margin: 2px 0; } #reply-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 20px; background: var(--gray); border-top: 2px solid var(--black); } #reply-preview-text { min-width: 0; } #reply-preview-sender { font-size: 13px; font-weight: 700; } #reply-preview-body { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #send-form { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--gray); border-top: 2px solid var(--black); } #send-form.drag-active { background: var(--white); color: var(--black); } .text-input-wrap { flex: 1; min-width: 0; display: flex; } .text-input-wrap textarea { width: 100%; } #selected-file-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } #schedule-at { width: 150px; font-size: 13px; } /* Modales (reenviar, programados) */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-box { width: 360px; max-height: 70vh; display: flex; flex-direction: column; gap: 10px; background: var(--gray); border: 2px solid var(--black); padding: 20px; overflow-y: auto; } .modal-box h3 { font-size: 20px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; } .modal-header { display: flex; align-items: center; justify-content: space-between; } .modal-close-btn { flex-shrink: 0; } #forward-chat-list { flex: 1; overflow-y: auto; min-height: 60px; display: flex; flex-direction: column; gap: 4px; } #forward-chat-list button { width: 100%; text-align: left; text-transform: none; font-weight: 400; } /* Modal de programados */ .scheduled-section h4 { font-size: 14px; letter-spacing: 0.5px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; } .scheduled-section:not(:first-child) { margin-top: 14px; } .scheduled-list li { border: 2px solid var(--black); background: var(--white); color: var(--black); padding: 8px 10px; margin-bottom: 8px; font-size: 13px; } .scheduled-list li button { margin-top: 6px; } .scheduled-list:empty::after { content: '(nada acá)'; font-size: 13px; opacity: 0.6; } /* Programado por chat */ #chat-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } #chat-scheduled-wrap { position: relative; } #chat-scheduled-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--gray); border: 2px solid var(--black); padding: 10px; width: 260px; z-index: 10; } #chat-scheduled-dropdown .scheduled-list li { font-size: 13px; }