/* IRC Modern Minimal Theme */ /* Theming: default dark; light mode via [data-theme="light"] on */ :root { color-scheme: dark; } :root { /* Based on about.html with small extensions */ --bg:#000; --line: rgba(234,234,234,0.06); --line-accent: rgba(226, 75, 71, 0.12); --corner-rgba: rgba(226, 75, 71, 0.28); --tile-bg: rgba(255,255,255,0.035); --cell-padding: 20px; --gutter-min: 32px; --accent:#E24B47; --accent-soft:#FF6B6B; --text:#EAEAEA; --text-dim:#9AA0A6; --user:#6BE7FF; --assistant:#FF8A8A; --live:#F8B6D2; /* live indicator color (still pastel for status) */ --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace; --radius-sm:4px; --panel:#050607; --panel-alt:#0b0d10; --bubble-user-bg:#071c22; --bubble-user-border:#103540; --bubble-assistant-bg:#190b0b; --bubble-assistant-border:#3e1b1b; --bubble-system-bg:#090d10; --input-bg:#040506; --input-border:#121518; } html[data-theme="light"] { color-scheme: light; } html[data-theme="light"] { --bg:#FAFAFA; /* Darker terminal-like grid/border lines */ --line: rgba(18,19,20,0.34); --line-accent: rgba(18,19,20,0.55); --corner-rgba: rgba(226, 75, 71, 0.5); --tile-bg: rgba(0,0,0,0.03); --accent:#C9322E; --accent-soft:#E24B47; --text:#202324; --text-dim:#4c5054; --user:#006b85; --assistant:#b42c2c; --panel:#FFFFFF; --panel-alt:#F5F7F8; --bubble-user-bg:#E3F4F8; --bubble-user-border:#8ECAD9; --bubble-assistant-bg:#FBE1E1; --bubble-assistant-border:#E9A6A6; --bubble-system-bg:#F1F3F5; --input-bg:#FFFFFF; --input-border:#B7BCC0; } * { box-sizing: border-box; } html, body { height:100%; } body { margin:0; font-family:var(--mono); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; overflow:hidden; transition:background .35s ease, color .35s ease; } /* 3D canvas layering */ #bg-canvas { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; opacity:.75; } body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:1; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 4px); opacity:.18; } .topbar { position:fixed; inset:0 0 auto 0; height:56px; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:rgba(0,0,0,0.72); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } html[data-theme="light"] .topbar { background:rgba(255,255,255,0.78); } .brand { display:flex; align-items:center; gap:10px; font-size:15px; letter-spacing:.5px; } .logo { text-decoration:none; color:var(--text); font-weight:600; font-size:16px; } .divider { opacity:.35; } .context { color:var(--accent); font-weight:500; } .main-nav a { color:var(--text-dim); text-decoration:none; font-size:14px; margin-left:16px; } .main-nav a:hover { color:var(--accent); } /* User pill / auth badge - Use theme variables so pill has sufficient contrast in both dark and light modes. - Keep the rule minimal and local to avoid changing layout elsewhere. - English comments per repository collaboration rules. */ .auth-box .user-pill { /* spacing and sizing */ padding: 4px 8px; border-radius: 6px; font-size: 13px; line-height: 1.2; /* Theme-aware colors: uses panel alt as background and text variable for color */ background: var(--panel-alt); color: var(--text); border: 1px solid var(--line); /* prevent overflow when long emails are shown */ max-width: 220px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Modal (challenge gate) */ .modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:30; padding:32px; } .modal.is-open { display:flex; } .modal-panel { width:min(640px,100%); background:var(--panel); border:1px solid var(--line); border-radius:6px; position:relative; padding:28px 28px 24px; box-shadow:0 20px 60px -18px rgba(0,0,0,0.8); z-index:40; /* ensure panel sits above overlay blur */ } /* Overlay to blur/dim the page when modal is open. Uses backdrop-filter where supported. */ .modal.is-open::before { /* legacy fallback: kept for older markup, but overlay now prefers body.modal-open */ content:""; position:fixed; inset:0; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px) saturate(110%); -webkit-backdrop-filter: blur(6px) saturate(110%); /* Place behind modal-panel: give it lower stacking order inside .modal */ z-index:0; pointer-events:auto; /* prevent clicks leaking through */ } /* Prefer overlay applied to body so the modal panel (child of .modal) isn't blurred. JS will toggle `body.modal-open` when showing/hiding the gate modal. */ body.modal-open::before { content:""; position:fixed; inset:0; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px) saturate(110%); -webkit-backdrop-filter: blur(6px) saturate(110%); z-index:20; /* behind modal (z-index:30) and its panel (z-index:40) but above base content */ pointer-events:auto; } /* For light theme, use a lighter translucent overlay so blur stays readable */ html[data-theme="light"] body.modal-open::before { background: rgba(255,255,255,0.6); } .modal-panel h2 { margin:0 0 12px; font-size:22px; font-weight:700; letter-spacing:.5px; color:var(--accent); } .modal-panel .lead { margin:0 0 22px; line-height:1.5; color:var(--text-dim); font-size:15px; } .actions { display:flex; justify-content:flex-end; gap:10px; } .btn { cursor:pointer; font-family:var(--mono); font-size:13px; border:1px solid var(--line); background:var(--panel-alt); color:var(--text); padding:7px 14px 8px; border-radius:4px; display:inline-flex; align-items:center; gap:6px; letter-spacing:.3px; transition:background .25s ease, color .25s ease, border-color .25s ease; } .btn:hover { background:var(--tile-bg); } .btn.primary { border-color:var(--accent); color:var(--accent); background:rgba(226,75,71,0.06); } .btn.primary:hover { background:rgba(226,75,71,0.12); } .btn.ghost { background:transparent; } .btn.neutral { background:var(--bg); border-color:var(--line); color:var(--text); } .btn.neutral:hover { background:var(--tile-bg); } .btn.small { padding:4px 10px; font-size:12px; } /* Layout principal */ .layout { position:fixed; inset:56px 0 40px 0; display:flex; z-index:5;} .chat-grid { display:grid; grid-template-columns:minmax(var(--gutter-min),1fr) repeat(2, minmax(320px, 560px)) minmax(var(--gutter-min),1fr); grid-template-rows:auto 1fr auto; gap:0; width:100%; margin:0 auto; border:1px solid var(--line); border-top:none; border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); justify-content:center; } .cell { position:relative; padding:0; background:transparent; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:40px; } .cell.spacer { background:transparent; } .cell.spacer.small-gap { min-height:80px; } .span-2 { grid-column:span 2; } .small-gap { min-height:8px; } .side-gap { min-height:8px; } /* Corners styled like about */ .corner { position:absolute; display:flex; align-items:center; justify-content:center; width:26px; height:26px; color:var(--corner-rgba); font-size:18px; line-height:1; pointer-events:none; z-index:2; font-weight:600; } .corner.tl { top:0; left:0; transform:translate(-50%,-50%); } .corner.tr { top:0; right:0; transform:translate(50%,-50%); } .corner.bl { bottom:0; left:0; transform:translate(-50%,50%); } .corner.br { bottom:0; right:0; transform:translate(50%,50%); } .chat-shell { display:grid; grid-template-rows:auto 1fr auto; background:var(--panel); padding:0; transition:background .35s ease; } /* Channel bar */ .channel-bar { display:flex; align-items:center; gap:18px; padding:8px 14px; font-size:12px; line-height:1; background:var(--panel); border-bottom:1px solid var(--line); position:relative; transition:background .35s ease; } .chan-cluster { display:flex; align-items:center; gap:10px; } .status-cluster { display:flex; align-items:center; gap:10px; margin-left:auto; } .status { font-size:11px; letter-spacing:.5px; color:var(--text-dim); } .status-cluster { position:relative; } /* Info button for MAC */ .info-btn { width:22px; height:22px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-weight:700; line-height:1; border-color:var(--line); background:var(--panel-alt); color:var(--text-dim); } .info-btn:hover { color:var(--accent); border-color:var(--accent); } /* Simple popover */ .popover { position:absolute; right:52px; top:50%; transform:translateY(-50%); min-width:260px; max-width:360px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:10px 12px; box-shadow:0 14px 40px -16px rgba(0,0,0,0.8); z-index:20; display:none; } .popover[aria-hidden="false"] { display:block; } .popover .popover-content { font-size:12px; color:var(--text-dim); } .popover .popover-content strong { display:block; color:var(--accent); margin:0 0 6px; font-size:12px; } /* Close button inside popover */ .popover-close { position:absolute; top:6px; right:8px; background:transparent; border:0; color:var(--text-dim); font-size:12px; cursor:pointer; padding:6px; border-radius:4px; } .popover-close:hover { color:var(--accent); background:var(--tile-bg); } /* MAC badge shown inline before the assistant bubble */ .mac-badge { display:inline-flex; align-items:center; gap:8px; margin-right:8px; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,0.02); border:1px solid var(--line); font-size:12px; color:var(--text-dim); } .mac-badge .mac-score { font-weight:700; color:var(--accent); } .mac-badge .mac-close { margin-left:6px; background:transparent; border:0; color:var(--text-dim); cursor:pointer; font-size:12px; padding:4px; border-radius:4px; } .mac-badge .mac-close:hover { color:var(--accent); background:var(--tile-bg); } /* Static indicator (pink active, gray idle, red error) */ .indicator { width:10px; height:10px; border-radius:50%; background:var(--live); display:inline-block; position:relative; box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(248,182,210,0.55), 0 0 6px 2px rgba(248,182,210,0.5); transition:background .35s ease, box-shadow .35s ease, opacity .35s ease; } .indicator.pending, .indicator.ok { background:var(--live); } .indicator.error { background:#b2413d; box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(226,75,71,0.5), 0 0 6px 2px rgba(226,75,71,0.45); } .indicator.idle { background:#2d2d2d; box-shadow:0 0 0 1px #000, 0 0 0 2px var(--line); opacity:.45; } /* (Se removieron animaciones de parpadeo del indicador) */ .chan { font-weight:600; color:var(--accent); letter-spacing:.5px; } .session-tools { margin-left:auto; display:flex; gap:8px; } /* Chat body */ .chat-body { position:relative; overflow:hidden; } .log { position:absolute; inset:0; padding:16px 16px 110px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; font-size:13px; line-height:1.45; } .log::-webkit-scrollbar { width:10px; } .log::-webkit-scrollbar-track { background:transparent; } .log::-webkit-scrollbar-thumb { background:linear-gradient(var(--panel-alt),var(--panel)); border:2px solid transparent; background-clip:padding-box; border-radius:20px; } .turn { margin:0 0 14px; animation:fadeln .3s ease; position:relative; } @keyframes fadeln { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} } .meta { display:flex; align-items:center; gap:10px; font-size:11px; text-transform:uppercase; letter-spacing:.8px; margin:0 0 4px; color:var(--text-dim); } .meta .name { font-weight:600; } .turn.user .meta .name { color:var(--user); } .turn.assistant .meta .name { color:var(--assistant); } .turn.system .meta .name { color:var(--text-dim); font-weight:500; } .bubble { background:var(--panel-alt); border:1px solid var(--line); padding:9px 11px 10px; border-radius:var(--radius-sm); white-space:pre-wrap; word-break:break-word; transition:background .35s ease, color .35s ease, border-color .35s ease; } .turn.user .bubble { border-color:var(--bubble-user-border); background:var(--bubble-user-bg); } .turn.assistant .bubble { border-color:var(--bubble-assistant-border); background:var(--bubble-assistant-bg); color:var(--assistant); } html[data-theme="light"] .turn.assistant .bubble { color:#802828; } .turn.system .bubble { font-style:italic; color:var(--text-dim); background:var(--bubble-system-bg); } /* Special states */ .turn.assistant.pending .bubble { position:relative; opacity:.85; } .turn.assistant.error .bubble { border-color:#532222; background:#2a0f0f; color:#ffb6b6; } html[data-theme="light"] .turn.assistant.error .bubble { border-color:#d48787; background:#f7d4d4; color:#6b1212; } /* Spinner y animaciones de procesamiento */ /* Spinner eliminado */ .thinking-dots { display:inline-block; width:20px; } .thinking-dots::after { content:""; display:inline-block; width:4px; height:4px; background:var(--accent); border-radius:50%; box-shadow:6px 0 0 var(--accent), 12px 0 0 var(--accent); animation:pulse-dots 1.2s ease-in-out infinite; margin-left:6px; } @keyframes pulse-dots { 0%,100% { opacity:.2;} 50% { opacity:1;} } /* Input zone */ .input-zone { display:flex; flex-wrap:nowrap; align-items:stretch; gap:10px; padding:10px 10px 12px; background:var(--panel); border-top:1px solid var(--line); position:relative; width:100%; transition:background .35s ease; } .input-zone textarea { flex:1; min-width:0; display:block; resize:vertical; min-height:50px; max-height:240px; padding:10px 12px 12px; background:var(--input-bg); color:var(--text); border:1px solid var(--input-border); border-radius:4px; outline:none; font-family:var(--mono); font-size:13px; line-height:1.45; box-sizing:border-box; transition:background .35s ease, color .35s ease, border-color .35s ease; } .input-zone textarea:focus { border-color:var(--accent); } .input-zone .btn.send { width:50px; height:50px; background:var(--panel-alt); border:1px solid var(--accent); color:var(--accent); padding:0; font-size:12px; letter-spacing:.6px; border-radius:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s ease; } .input-zone .btn.send:hover { background:var(--tile-bg); transform:translateY(-1px); box-shadow:0 2px 8px rgba(226, 75, 71, 0.2); } .input-zone .btn.send svg { transition:transform 0.2s ease; } .input-zone .btn.send:hover svg { transform:translateX(1px); } /* Footer */ .site-footer { position:fixed; left:0; right:0; bottom:0; height:40px; display:flex; align-items:center; justify-content:center; font-size:11px; background:rgba(0,0,0,0.85); border-top:1px solid var(--line); backdrop-filter:blur(6px); } html[data-theme="light"] .site-footer { background:rgba(255,255,255,0.85); } .foot-inner { display:flex; gap:10px; align-items:center; color:var(--text-dim); } .foot-inner a { color:var(--accent-soft); text-decoration:none; } .foot-inner a:hover { color:var(--assistant); } .sep { opacity:.4; } /* Spacing modifiers */ .mini-gap { min-height:100px; } .side-gap { min-height:24px; } .footer-pad { min-height:40px; } /* Status inline inside channel bar (already have span#status) */ #status { font-weight:500; color:var(--text-dim); min-width:120px; display:inline-block; } /* A11y hidden label */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; } /* Responsive */ @media (max-width: 992px) { .layout { padding:8px 0 0; } .chat-grid { grid-template-columns:minmax(16px,1fr) minmax(0,720px) minmax(16px,1fr); } .cell:not(.spacer) { grid-column:2; } .span-2 { grid-column:2; } .input-zone { padding:8px 8px 10px; } .input-zone textarea { font-size:12px; } } @media (max-width: 560px) { .brand .divider, .brand .context { display:none; } .channel-bar { padding:6px 10px; } .log { font-size:12px; } .input-zone textarea { font-size:12px; } } @media (max-width: 540px) { .brand .divider, .brand .context { display:none; } .topbar { padding:0 12px; } .log { font-size:12px; } .input-zone textarea { font-size:12px; } } /* Telegram Migration Styles */ .telegram-box { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--panel-alt); border: 1px solid var(--line); border-radius: 8px; margin-top: 24px; transition: all 0.25s ease; text-decoration: none; max-width: 100%; } .telegram-box:hover { border-color: var(--accent); background: var(--tile-bg); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(226, 75, 71, 0.15); } .telegram-icon { width: 32px; height: 32px; fill: #0088cc; flex-shrink: 0; } .telegram-link { font-size: 18px; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: 0.5px; word-break: break-all; } .migration-note { margin-top: 32px; padding: 20px; background: rgba(226, 75, 71, 0.05); border-left: 3px solid var(--accent); border-radius: 4px; } .migration-note h3 { margin: 0 0 10px; font-size: 16px; color: var(--accent); font-weight: 600; } .migration-note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); } .feature-list { list-style: none; padding: 0; margin: 24px 0 0; } .feature-list li { padding: 8px 0; font-size: 14px; color: var(--text-dim); display: flex; align-items: center; gap: 10px; } .feature-list li::before { content: "→"; color: var(--accent); font-weight: bold; font-size: 16px; } /* Hero Typography */ .hero-title { font-size: 36px; margin: 0 0 16px; color: var(--text); font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; } .hero-title span { color: var(--accent); } .hero-subtitle { font-size: 16px; line-height: 1.6; color: var(--text-dim); margin: 0 0 24px; } /* Mobile adjustments for Telegram page */ @media (max-width: 560px) { .hero-title { font-size: 28px; } .telegram-box { padding: 12px 16px; width: 100%; justify-content: center; } .telegram-link { font-size: 16px; } .migration-note { padding: 16px; } } .log.migration-log { padding: 32px 24px; padding-bottom: 40px; }