.chat-container{max-width:900px;margin:0 auto;padding:10px;height:100%;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}.chat-header{display:flex;justify-content:space-between;align-items:center;margin:0;background:#101010f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:16px;border-radius:24px;z-index:20}.chat-title{font-size:clamp(1.2rem,4vw,2rem);font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;flex:1}.messages-container{flex:1;overflow-y:auto;padding:16px;background:#111;border-radius:24px;box-shadow:0 20px 40px #0009;border:1px solid #222;scrollbar-width:thin;scrollbar-color:#444 #222;min-height:0}.messages-container::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track{background:#222}.messages-container::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.message{margin:16px 0;display:flex;flex-direction:column}.message-user{align-items:flex-end}.message-grok{align-items:flex-start}.message-sender{font-size:.8rem;opacity:.7;margin-bottom:4px;font-weight:500}.bubble{display:inline-block;max-width:75%;padding:16px 24px;border-radius:24px;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;box-shadow:0 4px 12px #0000004d;font-kerning:normal!important;letter-spacing:.025em!important;-webkit-font-smoothing:subpixel-antialiased!important;text-rendering:optimizeLegibility!important}.bubble-user{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.bubble-grok{background:#1f1f1f;color:#e5e5e5;border:1px solid #333}.input-container{width:100%;display:flex;gap:12px;align-items:flex-end;background:#1a1a1afa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:16px;border-radius:24px;border:1px solid rgba(51,51,51,.5);box-shadow:0 32px 64px #00000080}.chat-input{flex:1;padding:18px 24px;border:2px solid #333;border-radius:32px;background:#1a1a1a;color:#e5e5e5;font-size:16px;transition:all .2s;min-height:24px;resize:vertical;max-height:150px}.chat-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea26;background:#222}.chat-input::placeholder{color:#888}.pill-button{padding:18px 32px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:50px;font-weight:600;font-size:16px;cursor:pointer;transition:all .3s ease;white-space:nowrap;box-shadow:0 4px 12px #667eea66;flex-shrink:0}.pill-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #667eea80}.pill-button:active:not(:disabled){transform:translateY(0)}.pill-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.loading{text-align:center;color:#888;font-style:italic;padding:30px;font-size:1.1rem}.loading-dots:after{content:"...";animation:dots 1.5s steps(4,end) infinite}@keyframes dots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}.model-select{padding:10px 16px;border:2px solid #333;border-radius:20px;background:#1a1a1a;color:#e5e5e5;font-size:16px;cursor:pointer;flex-shrink:0;min-height:44px;box-sizing:border-box;position:relative;left:-12px}.model-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.model-select:disabled{opacity:.6;cursor:not-allowed}.model-select option{padding:8px;background:#1a1a1a;color:#e5e5e5}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.chat-container{padding:8px;max-width:none;margin:0}.messages-container{padding:12px;border-radius:16px}.chat-header{flex-wrap:wrap;gap:8px;padding:12px;margin:4px;border-radius:20px}.chat-title{font-size:clamp(1.5rem,6vw,2rem)}.input-container{width:100%;padding:12px;gap:8px;border-radius:20px;box-shadow:0 20px 40px #0009}.pill-button{padding:18px 24px;font-size:15px}.model-select{font-size:16px;padding:8px 12px;min-height:40px;left:-8px}.bubble{letter-spacing:.035em!important;font-size:clamp(.875rem,4.5vw,1rem)!important;padding:14px 20px!important}}@media (orientation: landscape){.chat-container{max-width:430px;margin:0 auto;padding:8px}.chat-header{padding:12px;margin:4px;border-radius:20px;flex-wrap:wrap;gap:8px}.messages-container{padding:12px;border-radius:16px}.input-container{padding:12px;gap:8px;border-radius:20px;box-shadow:0 20px 40px #0009}.pill-button{padding:18px 24px;font-size:15px}}