:root{
      --bg: #0b0f1a;
      --bg-elev: #0f1726;
      --panel: #0e1422;
      --text: #e6eaf2;
      --muted: #9aa4b2;
      --border: #242b3a;
      --accent: #6ee7ff;
      --accent-2: #7c5cff;
      --success: #24d39f;
      --danger: #ff5c7a;
      --glow: 0 0 24px rgba(110,231,255,.18), 0 0 48px rgba(124,92,255,.12);
      --radius: 14px;
      --radius-sm: 10px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --bar-h: 75px;
      --footer-h: 50px;
    }

    *{ box-sizing: border-box }
    html, body{ height:100% }
    body{
      margin:0;
      font: 16px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.15), transparent 60%),
        radial-gradient(1200px 600px at 120% 30%, rgba(110,231,255,.12), transparent 55%),
        var(--bg);
      overscroll-behavior-y: none;
    }
	a {
	  text-decoration: none;
	  color: var(--text);
	}
	a:visited {
	  color: var(--text);
	}

    /* Top bar */
    .topbar{
      position: fixed; inset: 0 0 auto 0; height: var(--bar-h);
      display:flex; align-items:center; gap:16px;
      padding: 0 18px;
      background: color-mix(in oklab, var(--bg-elev) 86%, black 14%);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(10px);
      z-index: 40;
    }
    .brand{
      display:flex; align-items:center; gap:12px; font-weight: 700; letter-spacing:.2px;
    }
    .brand .logo{
      width: 34px; height: 34px; border-radius: 10px;
      /* background: linear-gradient(135deg, var(--accent), var(--accent-2)); */
      box-shadow: var(--glow);
      display:grid; place-items:center; color:#0b0f1a; font-weight:900;
    }
    .brand small{ color: var(--muted); font-weight:600; letter-spacing:.3px }
	
	.logo {
	  width: 32px;
	  height: 32px;
	  background-image: url('/assets/favicon.jpg');
	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: center;
	}

    /* Navigation */
    .nav-spacer{ flex: 1 }
    .menu{
      display:flex; align-items:center; gap: 14px;
    }
    .menu a{
      color: var(--text); text-decoration:none; padding:10px 12px; border-radius: 10px;
      border:1px solid transparent;
    }
    .menu a:hover{ background: #0b1120; border-color: var(--border) }
    .cta{
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#081018; font-weight:700; padding:10px 14px; border-radius:12px;
      box-shadow: var(--glow); border: none;
    }

    /* Hamburger (mobile) */
    .nav-toggle{ display:none }
    .hamburger{
      display:none; width:42px; height:42px; border-radius:12px;
      border:1px solid var(--border); background: #0b1120; align-items:center; justify-content:center;
      cursor:pointer;
    }
    .hamburger span{
      width:22px; height:2px; background: var(--text); position: relative; display:block;
    }
    .hamburger span::before, .hamburger span::after{
      content:""; position:absolute; left:0; width:22px; height:2px; background: var(--text);
      transform-origin: center;
    }
    .hamburger span::before{ top:-7px }
    .hamburger span::after{ top:7px }

    /* Bottom bar */
    .bottombar{
      position: fixed; inset: auto 0 0 0; height: var(--footer-h);
      display:flex; align-items:center; justify-content:center; gap:10px;
      background: color-mix(in oklab, var(--bg-elev) 90%, black 10%);
      border-top: 1px solid var(--border);
      font-size: 13px; color: var(--muted);
      z-index: 30;
    }
	.bottombar a{
		color: var(--muted);
	}

    /* Chat shell occupies space between bars */
    .chat-shell{
      position: fixed;
      top: var(--bar-h);
      bottom: var(--footer-h);
      left: 0; right: 0;
      display: grid; grid-template-rows: 1fr auto;
      background: color-mix(in oklab, var(--panel) 92%, black 8%);
    }

    /* Messages area */
    .messages{
      overflow: auto;
      padding: 20px clamp(14px, 4vw, 28px);
      display: flex; flex-direction: column; gap: 14px;
    }
    .messages::-webkit-scrollbar{ width:10px }
    .messages::-webkit-scrollbar-thumb{ background:#1b2335; border-radius: 8px }
    .messages::-webkit-scrollbar-thumb:hover{ background:#202a41 }

    .msg{
      max-width: 78%;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: #0b1120;
      box-shadow: var(--shadow);
      line-height: 1.5;
      word-wrap: break-word;
    }
    .msg small.time{ display:block; margin-top:6px; color: var(--muted); font-size:12px }
    .msg.user{
      align-self: flex-end;
      background: linear-gradient(135deg, #0f1528, #111b33);
      border-color: #29324a;
    }
	.msg.user img {
	  max-width: 60%;
	  height: auto;
	  border-radius:12px;
	  box-shadow: var(--shadow);
	}
    .msg.ai{
      align-self: flex-start;
      background: linear-gradient(135deg, #0f162f, #0d1b2a);
      border-color: #22304a;
    }
	.msg.ai img {
	  max-width: 60%;
	  height: auto;
	  border-radius:12px;
	  box-shadow: var(--shadow);
	}
	.msg .dot {
	  display: inline-block;
	  width: 8px;
	  height: 8px;
	  margin: 0 4px;
	  background-color: #888;
	  border-radius: 50%;
	  animation: blink 1.4s infinite ease-in-out;
	}
	.msg .dot:nth-child(2) {
	  animation-delay: 0.2s;
	}
	.msg .dot:nth-child(3) {
	  animation-delay: 0.4s;
	}
	.msg code {
	  white-space: pre-wrap;       /* Respeta saltos de línea y permite cortes */
	  word-break: break-word;      /* Corta palabras largas si es necesario */
	  overflow-wrap: anywhere;     /* Corta en cualquier punto si no hay espacios */
	}

	@keyframes blink {
	  0%, 80%, 100% {
		opacity: 0.3;
		transform: scale(1);
	  }
	  40% {
		opacity: 1;
		transform: scale(1.4);
	  }
	}
	
    .tag{
      display:inline-flex; align-items:center; gap:8px;
      background: #0a0f1f; border:1px solid var(--border); color: var(--muted);
      font-size:12px; padding:6px 8px; border-radius: 999px;
    }

    /* Composer */
    .composer{
      display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
      padding: 12px clamp(12px, 3vw, 20px);
      border-top: 1px solid var(--border);
      background: color-mix(in oklab, var(--bg-elev) 90%, black 10%);
      align-items: center;
    }
	/* Solo afecta al editor de imágenes */
	.composer-image {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	}
	.composer-image .input {
	  flex: 1; /* ocupa todo el espacio sobrante */
	}
	.composer-image .icon-select {
	  height: 40px;
	  border-radius: 10px;
	  border: 1px solid var(--border);
	  background: #0b1120;
	  color: var(--text);
	  font-size: clamp(12px, 2vw, 14px); /* baja en pantallas pequeñas */
	  padding: 0 8px;
	}
    .icon-btn{
      display:grid; place-items:center;
      width:40px; height:40px; border-radius: 10px;
      border:1px solid var(--border);
      background: #0b1120; color: var(--muted);
      cursor: pointer;
      transition: transform .08s ease, border-color .15s ease, color .15s ease, background .15s ease;
      font-size: 18px; line-height: 1;
    }
    .icon-btn:hover{ color: var(--text); border-color:#31405d }
    .icon-btn:active{ transform: scale(.98) }
    .icon-btn.reset{ color: #aeb7c6 }
    .icon-btn.reset:hover{ color: var(--danger) }
	.copy-btn{
		background-color: #0f162f;
		border: 1px solid var(--muted);
		cursor: pointer;
		border-radius: 5px;
	}
	.copy-btn:hover{
		background-color: #22304a;
	}
	.icon-select {
	  height: 40px;
	  width: 50px;
	  border-radius: 10px;
	  border: 1px solid var(--border);
	  background: #0b1120;
	  color: var(--text);
	  font-size: 18px;
	  text-align: center;
	  cursor: pointer;
	}
	.icon-select:hover {
	  border-color: #31405d;
	}
	.icon-select.style{
		width: 35px;
	}

    .input{
      width:100%; height: 44px;
      padding: 10px 12px;
      border-radius: 12px; border: 1px solid var(--border);
      background: #0b1120; color: var(--text);
      outline: none;
      box-shadow: inset 0 0 0 1px transparent, var(--shadow);
      transition: box-shadow .15s ease, border-color .15s ease;
    }
    .input::placeholder{ color: #6a7487 }
    .input:focus{
      border-color: color-mix(in oklab, var(--accent) 60%, var(--accent-2) 40%);
      box-shadow: 0 0 0 4px rgba(110,231,255,.12), var(--shadow);
    }

    .send{
      height: 44px; padding: 0 16px;
      border-radius: 12px; border: 1px solid transparent;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#07101a; font-weight: 800; letter-spacing:.2px;
      cursor: pointer; box-shadow: var(--glow);
      transition: transform .08s ease, filter .15s ease;
    }
    .send:hover{ filter: brightness(1.05) }
    .send:active{ transform: translateY(1px) }
	
	/* Desktop */
	.menu{
	  display:flex; align-items:center; gap:14px;
	}

	/* Mobile */
	@media (max-width: 900px){
	  .hamburger{ display:flex }

	  /* El mismo .menu actúa como dropdown */
	  .menu{
		position: absolute; top: var(--bar-h); right: 12px; left: 12px;
		display: grid; gap: 8px; padding: 10px;
		background: #0b1120; border:1px solid var(--border); border-radius: 14px;
		transform-origin: top right; transform: scaleY(0);
		opacity: 0; pointer-events: none;
		transition: transform .15s ease, opacity .15s ease;
	  }

	  /* Abre con el checkbox */
	  #nav-toggle:checked ~ .menu{
		transform: scaleY(1);
		opacity: 1;
		pointer-events: auto;
	  }
	  .msg{ max-width: 88% }
	  
	  .composer {
		gap: 1px;
	  }	  
	  .msg.ai img {
		  max-width: 100%;
		}
		.composer-image .icon-select {
			font-size: 12px;
			padding: 0 4px;
		  }

	  .composer-image .send {
		font-size: 12px;
		padding: 0 8px;
	  }

	  .composer-image .input {
		font-size: 14px;
	  }
	}
	.badge.beta {
	  background: orange;
	  color: white;
	  font-size: 0.7em;
	  padding: 2px 6px;
	  border-radius: 6px;
	  margin-left: 4px;
	}
	.prompt-click {
	  color: var(--accent);       /* color destacado */
	  cursor: pointer;            /* mano al pasar */
	  text-decoration: underline; /* subrayado tipo link */
	  transition: color 0.2s ease;
	}
	.prompt-click:hover {
	  color: var(--accent-2);     /* cambia de color al hover */
	  text-decoration: none;      /* opcional: quita subrayado al hover */
	}
	.msg-tools {
	  display: inline-flex;   /* todos en una sola línea */
	  gap: 6px;               /* espacio entre botones */
	  margin-left: 8px;       /* separación del texto "SirCreation • time" */
	  vertical-align: middle; /* alinear con el texto */
	}
	.msg-tools button {
	  cursor: pointer;
	  background: transparent;
	  font-size: 16px;
	}
	
	@media (max-width: 600px) {
	  .composer-image .icon-select {
		font-size: 10px;
	  }
	  .composer-image .send {
		padding: 0 8px;
		font-size: 12px;
	  }
	}
	
	@media (prefers-reduced-motion: reduce){
	  *{ transition: none !important; animation: none !important; }
	}