/* estilos.css — TokyoNight (versión profesional y elegante) - Mantiene: fondo con imagen, burbujas púrpura/azul-hielo, file-card, typing, autosize textarea, accesibilidad, responsive - Cambios: tipografía de título elegante (Playfair Display), paleta suavizada, sombras y controles más profesionales */ /* === Tip: añade en de index.html: ============================================================ */ /* === Variables (ajustadas para look profesional) === */ :root{ --bg-image-url: url('https://plus.unsplash.com/premium_photo-1700996705054-948c1acd0b88?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); --bg-0: rgba(6,10,20,0.86); --bg-1: rgba(8,12,22,0.9); --panel-glass: rgba(255,255,255,0.02); --accent: #5f8af6; /* botón/links: azul suave */ --accent-2: #82f0f2; /* acento cian */ --lavender: #b57ffb; /* púrpura acento sutil */ /* burbujas (contraste alto pero comedido) */ --bubble-in-bg: linear-gradient(180deg,#6e3bd6 0%, #4b2a7d 100%); /* púrpura */ --bubble-out-bg: linear-gradient(180deg,#e7fbff 0%, #bcefff 100%); /* azul hielo */ --bubble-in-text: #f6f1ff; /* claro suave */ --bubble-out-text: #05292c; /* oscuro legible */ --text: #d3eaff; /* cuerpo principal (suave) */ --text-muted: #9fb5c9; --meta-color: #98b6cf; --glass-border: rgba(255,255,255,0.03); --radius-lg: 12px; --radius-sm: 8px; --shadow-soft: 0 10px 30px rgba(2,6,18,0.6); --shadow-pop: 0 6px 20px rgba(3,8,18,0.5); --focus: 0 0 0 4px rgba(181,127,251,0.08); } /* === Base / layout / background === */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial; background-color: #071026; background-image: linear-gradient(180deg, rgba(6,10,18,0.72), rgba(6,8,18,0.78)), var(--bg-image-url); background-size: cover; background-position: center center; background-attachment: fixed; color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-font-feature-settings: "liga" 1; } /* container */ .page{ max-width:980px; margin:28px auto; padding:18px; } /* header */ .top{ text-align:center; margin-bottom:12px; } .site-title{ margin:0; font-size:30px; line-height:1; font-weight:700; font-family: "Playfair Display", Georgia, "Times New Roman", serif; /* elegante display */ letter-spacing: -0.02em; background: linear-gradient(90deg, var(--accent-2) 10%, var(--lavender) 60%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-rendering: optimizeLegibility; text-shadow: 0 6px 18px rgba(6,10,20,0.45); margin-bottom:6px; } .site-desc{ margin:6px 0 0; color:var(--text-muted); font-size:14px; line-height:1.45; max-width:820px; margin-left:auto; margin-right:auto; } /* subtle divider */ .divider{ border:0; height:1px; margin-top:12px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent); } /* chat card — panel más minimal y profesional */ .chat-wrapper{ border-radius:calc(var(--radius-lg)+2px); padding:18px; background: linear-gradient(180deg, rgba(12,16,24,0.82), rgba(8,10,18,0.78)); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px) saturate(1.02); border:1px solid var(--glass-border); display:flex; flex-direction:column; gap:12px; } /* controls */ .controls{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .controls .left{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text); } #myId{ padding:6px 10px; background: rgba(255,255,255,0.012); border-radius:8px; font-weight:700; letter-spacing:1px; border:1px solid rgba(255,255,255,0.028); font-size:0.95rem; } /* right controls */ .controls .right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .controls label{ color:var(--text-muted); font-weight:600; font-size:14px; } .controls input{ padding:10px 12px; border-radius:10px; border: 1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.01); color:var(--text); width:150px; font-weight:600; outline:none; transition:box-shadow .12s, transform .12s; } .controls input:focus{ box-shadow: var(--focus); transform: translateY(-1px); } /* buttons — diseño más plano, profesional */ .btn{ padding:8px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:700; font-size:14px; transition: transform .12s, box-shadow .12s, opacity .12s; } .btn.primary{ background: linear-gradient(180deg, var(--accent), #3f6fe6); color:#04202a; box-shadow: 0 8px 20px rgba(63,111,230,0.06); } .btn.primary:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(63,111,230,0.09); } .btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,0.03); color:var(--text); padding:7px 12px; } /* clip icon */ .btn-icon{ background: transparent; border:0; padding:8px; border-radius:8px; cursor:pointer; color:var(--accent-2); display:inline-grid; place-items:center; transition: transform .12s, opacity .12s; } .btn-icon:hover{ transform: translateY(-3px); opacity:0.95; } .btn-icon svg{ width:22px; height:22px; } /* messages area */ .messages-area{ background: linear-gradient(180deg, rgba(10,12,18,0.36), rgba(8,10,16,0.36)); border-radius: calc(var(--radius-lg)-2px); padding:22px; position:relative; overflow:auto; min-height:520px; border:1px solid rgba(255,255,255,0.02); box-shadow:var(--shadow-pop); scroll-behavior: smooth; } .messages{ display:flex; flex-direction:column; gap:16px; } /* message base */ .message{ max-width:76%; padding:14px 16px; border-radius:12px; font-size:15.4px; line-height:1.34; color:var(--text); transition: transform .12s cubic-bezier(.2,.9,.2,1), box-shadow .12s; position:relative; word-break: break-word; } /* incoming (PURPLE) — pulido y con borde sutil */ .message.in{ align-self:flex-start; background: var(--bubble-in-bg); color: var(--bubble-in-text); border: 1px solid rgba(150,100,190,0.10); box-shadow: 0 8px 28px rgba(60,30,90,0.28); border-bottom-left-radius:8px; border-top-left-radius:12px; } /* outgoing (ICE BLUE) — limpio y legible */ .message.out{ align-self:flex-end; background: var(--bubble-out-bg); color: var(--bubble-out-text); border: 1px solid rgba(120,200,210,0.06); box-shadow: 0 6px 20px rgba(10,40,50,0.16); border-bottom-right-radius:8px; border-top-right-radius:12px; } /* message content wrapping */ .message .message-body, .stream-text { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; color: inherit; font-size:15.4px; line-height:1.34; letter-spacing: -0.01em; } /* metadata */ .message small{ display:block; color:var(--meta-color); font-size:12px; margin-top:8px; opacity:0.95; } /* media inside messages */ .message img{ display:block; border-radius:10px; max-width:420px; width:100%; height:auto; object-fit:cover; } /* subtle hover */ .message:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px rgba(2,8,20,0.44); } /* subtle tail (softened) */ .message.in::after, .message.out::after{ content:""; position:absolute; width:12px; height:12px; bottom:0; transform: translateY(46%) rotate(45deg); z-index:0; filter: blur(.4px); } .message.in::after{ left:-6px; background: rgba(255,255,255,0.02); } .message.out::after{ right:-6px; background: rgba(255,255,255,0.02); } /* FILE CARD */ .file-card { display:flex; align-items:center; gap:12px; background: linear-gradient(180deg, rgba(255,255,255,0.007), rgba(255,255,255,0.006)); border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,0.03); box-shadow: 0 8px 22px rgba(0,0,0,0.48); max-width: 76%; } .file-card.in { align-self:flex-start; } .file-card.out { align-self:flex-end; } .file-card .file-icon{ width:56px; height:56px; min-width:56px; border-radius:8px; display:grid; place-items:center; background: linear-gradient(180deg, rgba(155,125,251,0.10), rgba(122,90,240,0.03)); border:1px solid rgba(255,255,255,0.02); color: var(--accent-2); font-weight:700; } .file-card .file-meta{ display:flex; flex-direction:column; gap:6px; min-width:0; } .file-card .file-name{ font-weight:700; color: inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; display:inline-block; max-width:100%; } .file-card .file-name:hover, .file-card .file-name:focus{ text-decoration:underline; outline:none; box-shadow: var(--focus); border-radius:4px; } .file-card .file-size{ font-size:13px; color:var(--meta-color); } .file-card .file-thumb{ max-width:220px; max-height:160px; border-radius:8px; object-fit:cover; box-shadow: 0 8px 20px rgba(0,0,0,0.5); cursor:pointer; } /* typing (dots) */ .typing{ position:absolute; bottom:108px; left:36px; padding:8px 12px; border-radius:20px; border:1px solid rgba(255,255,255,0.03); background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006)); box-shadow: 0 8px 22px rgba(0,0,0,0.55); } .dots{ display:flex; gap:7px; align-items:center; justify-content:center; } .dots span{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.12); transform-origin:center; animation: wave 1s infinite ease-in-out; } .dots span:nth-child(2){ animation-delay: .12s; } .dots span:nth-child(3){ animation-delay: .24s; } @keyframes wave{ 0%{ transform: translateY(0) scale(1); opacity:.6 } 30%{ transform: translateY(-6px) scale(1.12); opacity:1 } 60%{ transform: translateY(0) scale(1); opacity:.75 } 100%{ transform: translateY(0) scale(1); opacity:.6 } } /* composer */ .composer{ display:flex; gap:12px; align-items:center; padding:12px; background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006)); border-radius:12px; border:1px solid rgba(255,255,255,0.02); } .message-input{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.008); color:var(--text); font-size:15.2px; outline:none; transition: box-shadow .12s; resize: none; min-height:44px; max-height:40vh; overflow:auto; line-height:1.4; } .message-input:focus{ box-shadow: var(--focus); transform: translateY(-2px); } .message-input::placeholder { color: rgba(206,233,255,0.14); } /* send button */ .btn-send{ width:56px; height:56px; border-radius:12px; display:grid; place-items:center; cursor:pointer; background: linear-gradient(180deg,var(--accent), #4f83f7); color:#052029; box-shadow: 0 12px 26px rgba(74,130,250,0.08); } .btn-send:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(74,130,250,0.10); } /* scrollbar (webkit) */ .messages-area::-webkit-scrollbar { width: 10px; height: 10px; } .messages-area::-webkit-scrollbar-track { background: transparent; } .messages-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.03); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } .messages-area:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); } /* responsive */ @media (max-width:820px){ .page{ padding:12px; } .controls{ flex-direction:column; align-items:flex-start; gap:10px; } .controls .right{ width:100%; display:flex; gap:8px; justify-content:space-between; } .messages-area{ min-height:60vh; padding:14px; } .message{ max-width:88%; font-size:15px; } .typing{ bottom:96px; left:18px; } .btn-send{ width:48px; height:48px; } .btn-icon{ width:40px; height:40px; } .file-card { max-width: 92%; padding:10px; gap:10px; } .file-card .file-icon{ width:48px; height:48px; min-width:48px; } .file-card .file-thumb{ max-width:160px; max-height:120px; } } /* focus / accessibility */ button:focus, input:focus, .message-input:focus, .btn-icon:focus { outline:none; box-shadow: var(--focus); border-color: rgba(181,127,251,0.16); } /* utilities */ .hidden{ display:none !important; } .center{ display:flex; align-items:center; justify-content:center; }