:root{--primary-50: #E6F3F5;--primary-100: #B3D9E0;--primary-500: #44AEBF;--primary-600: #3A9BA8;--primary-700: #2F8A95;--secondary-50: #E6F3F5;--secondary-500: #44AEBF;--success-500: #4CAF50;--warning-500: #FF9800;--error-500: #F44336;--neutral-50: #FAFAFA;--neutral-100: #F5F5F5;--neutral-200: #EEEEEE;--neutral-400: #BDBDBD;--neutral-600: #757575;--neutral-800: #424242;--font-family-primary: "Inter", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-weight-normal: 400;--font-weight-semibold: 600;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--transition-normal: .25s ease-in-out}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);background:linear-gradient(135deg,var(--primary-50),var(--neutral-100));min-height:100dvh;color:var(--neutral-800);overflow:auto;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}.container{display:flex;flex-direction:column;height:100vh;background:#fffffff2;padding:var(--spacing-4);gap:var(--spacing-2);margin:0 auto;max-width:100%}.main-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-2)}.left-panel{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--spacing-2)}.right-panel{flex:1;display:flex;flex-direction:column}@media (orientation: landscape){.container{width:min(100%,760px);margin:0 auto;padding:var(--spacing-4);min-height:100dvh;display:flex;flex-direction:column}.main-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-2);min-height:auto}.left-panel{flex:1;display:flex;flex-direction:column;width:100%;min-height:auto}.right-panel{width:100%;min-height:auto}.input-area{flex:0 0 auto;width:100%;min-height:auto}.chat-log{flex:0 0 auto;width:100%;min-height:200px;overflow:visible;display:block}.controls{flex:0 0 auto;width:100%;margin-top:var(--spacing-2);padding:var(--spacing-2);min-height:60px}}.header{display:flex;justify-content:center;align-items:center;background:#ffffffe6;padding:var(--spacing-2);border-radius:var(--radius-md);margin-bottom:var(--spacing-2)}.hi-ronan-logo{max-width:140px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.panel-header{margin-bottom:var(--spacing-2);padding:var(--spacing-2);background:var(--primary-50);border-radius:var(--radius-sm);border-left:3px solid var(--primary-500)}.panel-header h3{margin:0;font-size:.6rem;font-weight:var(--font-weight-semibold);color:var(--neutral-600);text-transform:uppercase;letter-spacing:.05em;opacity:.7}.chat-log{flex:0 0 auto;min-height:200px;background:#fff;border:2px solid var(--neutral-400);border-radius:var(--radius-md);padding:var(--spacing-2);overflow:visible;display:block;transition:border-color var(--transition-normal);box-shadow:inset 0 1px 3px #0000001a;scroll-margin-top:12px}.chat-log:focus{border-color:var(--primary-500);background:#fff;outline:none;box-shadow:0 0 0 3px #44aebf4d}.chat-message{padding:var(--spacing-1) var(--spacing-2);margin:var(--spacing-1) 0;border-radius:var(--radius-sm);transition:all var(--transition-normal)}.chat-message.highlighted{background:var(--neutral-200);border-left:3px solid var(--primary-500);font-weight:var(--font-weight-semibold)}.chat-message{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-2)}.message-content,.message-timestamp{background:transparent;border:0;box-shadow:none;padding:0}.message-content{flex:1;word-wrap:break-word;color:#000;font-weight:500}.message-timestamp{font-size:.7rem;color:var(--neutral-800);font-weight:500;white-space:nowrap;opacity:1;margin-left:var(--spacing-2)}.chat-log>div{background:#fff;border-left:4px solid var(--neutral-600);border-radius:var(--radius-sm);padding:var(--spacing-2);margin-bottom:var(--spacing-2);box-shadow:0 3px 6px #00000026;transition:transform var(--transition-normal);color:#000;font-weight:500}.chat-log>div:hover{transform:translate(2px);box-shadow:var(--shadow-md)}.chat-log>div:first-child{background:linear-gradient(135deg,var(--primary-50),white);border-left-color:var(--primary-500);border-left-width:4px;box-shadow:0 4px 8px #44aebf33}.input-area{display:flex;flex-direction:column;gap:var(--spacing-2);flex:0 0 auto}textarea{flex:1;min-height:120px;max-height:150px;width:100%;padding:var(--spacing-2);border:2px solid var(--neutral-200);border-radius:var(--radius-md);font-size:16px;background:var(--neutral-50);resize:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}@media (orientation: landscape){textarea{min-height:120px}}textarea:focus{border-color:var(--primary-500);background:#fff;outline:none}.controls{display:flex;flex-direction:column;gap:var(--spacing-2);margin-top:var(--spacing-1);padding:var(--spacing-1);background:transparent;border-radius:var(--radius-md)}.voice-controls{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-2);padding:var(--spacing-2);background:var(--neutral-50);border-radius:var(--radius-sm)}.voice-controls label{font-size:var(--font-size-xs);color:var(--neutral-600);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;width:80px;flex-shrink:0}.voice-controls select{width:200px;min-width:200px;max-width:200px;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--neutral-200);border-radius:var(--radius-sm);font-size:var(--font-size-xs);background:#fff;color:var(--neutral-800)}.voice-controls select:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 2px #44aebf1a}.typing-controls{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-2);padding:var(--spacing-2);background:var(--neutral-50);border-radius:var(--radius-sm)}.typing-controls label{font-size:var(--font-size-xs);color:var(--neutral-600);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;width:80px;flex-shrink:0}.typing-controls select{width:200px;min-width:200px;max-width:200px;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--neutral-200);border-radius:var(--radius-sm);font-size:var(--font-size-xs);background:#fff;color:var(--neutral-800)}.typing-controls select:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 2px #44aebf1a}.save-typing-btn{margin-top:var(--spacing-2);padding:var(--spacing-1) var(--spacing-2);background:var(--primary-500);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--font-size-xs);cursor:pointer;transition:all var(--transition-normal);width:auto;min-width:60px}.save-typing-btn:hover{background:var(--primary-600)}button{padding:var(--spacing-1) var(--spacing-3);border:none;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;cursor:pointer;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}button:hover{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));box-shadow:var(--shadow-md)}.action-buttons{display:flex;gap:var(--spacing-4);justify-content:center}.help-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:none;justify-content:center;align-items:center;z-index:1000}.help-modal.show{display:flex}.help-content{background:#fff;padding:var(--spacing-4);border-radius:var(--radius-lg);max-width:90%;max-height:80%;overflow-y:auto;box-shadow:var(--shadow-md);position:relative}.help-content h2{margin-bottom:var(--spacing-3);color:var(--neutral-800);font-size:var(--font-size-xl)}.help-section{margin-bottom:var(--spacing-4)}.help-section h3{margin-bottom:var(--spacing-2);color:var(--primary-600);font-size:var(--font-size-base);border-bottom:2px solid var(--primary-100);padding-bottom:var(--spacing-1)}.help-section ul{list-style:none;margin-left:0}.help-section li{padding:var(--spacing-1) 0;position:relative;padding-left:var(--spacing-4);color:var(--neutral-700);line-height:var(--line-height-relaxed);font-size:var(--font-size-sm)}.help-section li:before{content:"";position:absolute;left:0;color:var(--primary-500);font-weight:700}.close-help{position:absolute;top:40px;right:40px;background:var(--neutral-200);border:none;border-radius:50%;width:35px;height:35px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--neutral-600);z-index:1001;transform:translate(50%,-50%)}.close-help svg{width:40px;height:40px;transition:all var(--transition-normal)}.close-help:hover{background:var(--neutral-300)}.edit-btn{margin-top:var(--spacing-2);padding:var(--spacing-1) var(--spacing-2);background:var(--primary-500);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--font-size-xs);cursor:pointer;transition:all var(--transition-normal);width:auto;min-width:60px}.edit-btn:hover{background:var(--primary-600)}.test-voice-btn{padding:var(--spacing-1) var(--spacing-2);background:transparent;color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;cursor:pointer;transition:all var(--transition-normal);min-width:40px;display:flex;align-items:center;justify-content:center}.sound-icon{width:16px;height:16px;transition:all var(--transition-normal)}.test-voice-btn:hover{background:transparent;transform:scale(1.1)}.test-voice-btn:hover .sound-icon{transform:scale(1.2)}.shortcut-item{display:flex;align-items:center;gap:var(--spacing-2);margin-bottom:var(--spacing-1)}.shortcut-item input:first-child{width:60px;flex:none;padding:var(--spacing-1);border:none;background:transparent;border-radius:var(--radius-sm);font-size:var(--font-size-sm);text-align:center;font-weight:var(--font-weight-semibold)}.shortcut-item input:last-child{flex:1;padding:var(--spacing-1);border:1px solid var(--neutral-200);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.chat-log::-webkit-scrollbar{width:8px}.chat-log::-webkit-scrollbar-thumb{background:var(--neutral-200);border-radius:var(--radius-sm)}.save-voice-btn{margin-top:var(--spacing-2);padding:var(--spacing-1) var(--spacing-2);background:var(--primary-500);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--font-size-xs);cursor:pointer;transition:all var(--transition-normal);width:auto;min-width:60px}.save-voice-btn:hover{background:var(--primary-600)}.voice-info{margin-top:var(--spacing-2);font-size:var(--font-size-xs);color:var(--neutral-600);font-style:italic}.voice-search{margin-bottom:var(--spacing-3);padding:var(--spacing-2);background:var(--neutral-50);border-radius:var(--radius-sm);border:1px solid var(--neutral-200)}.search-row{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-2);margin-bottom:var(--spacing-2)}.search-row:last-child{margin-bottom:0}.search-row label{font-size:var(--font-size-xs);color:var(--neutral-600);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;width:80px;flex-shrink:0}.search-row select{width:200px;min-width:200px;max-width:200px;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--neutral-200);border-radius:var(--radius-sm);font-size:var(--font-size-xs);background:#fff;color:var(--neutral-800)}.search-row select:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 2px #44aebf1a}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.input-area{position:relative;display:flex;flex-direction:column;gap:var(--spacing-0)}.recent-messages-inline{position:static;pointer-events:auto;z-index:1;padding:var(--spacing-2);display:flex;flex-direction:row;gap:var(--spacing-2);margin-top:var(--spacing-1);overflow-x:auto;scrollbar-width:thin;-ms-overflow-style:none}.recent-messages-inline::-webkit-scrollbar{display:none}.recent-message-item{background:var(--neutral-50);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);border:1px solid var(--neutral-200);font-size:var(--font-size-xl);color:var(--neutral-700);line-height:1.4;min-width:200px;max-width:300px;flex-shrink:0;box-shadow:var(--shadow-sm);font-weight:var(--font-weight-semibold);transition:all var(--transition-normal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-message-item:first-child{background:linear-gradient(135deg,var(--primary-50),var(--neutral-50));border:2px solid var(--primary-300);font-weight:var(--font-weight-semibold);color:var(--neutral-800);box-shadow:0 2px 8px #44aebf26;white-space:normal;word-wrap:break-word;overflow:visible;text-overflow:clip;max-width:400px;min-width:200px;flex:0 1 auto;width:fit-content}.recent-message-item:hover{background:var(--neutral-100);border-color:var(--neutral-300);box-shadow:var(--shadow-md)}#textInput{position:relative;z-index:1;background:#fff}@media (orientation: landscape){.recent-messages-inline{gap:var(--spacing-2);margin-top:var(--spacing-4)}.recent-message-item{font-size:var(--font-size-base);min-width:180px;max-width:250px}.recent-message-item:first-child{max-width:350px;flex:0 1 auto;width:fit-content}}@media (max-width: 768px){.recent-messages-inline{gap:var(--spacing-2);padding:var(--spacing-1)}.recent-message-item{min-width:150px;max-width:200px;font-size:var(--font-size-sm);padding:var(--spacing-1) var(--spacing-2)}.recent-message-item:first-child{max-width:280px;flex:0 1 auto;width:fit-content;min-width:150px}}